www.webdeveloper.com
Results 1 to 4 of 4

Thread: Resizing images in a slider

  1. #1
    Join Date
    Oct 2013
    Posts
    3

    Resizing images in a slider

    So I am trying to put a slider on my website but the images are too big how would I go about resizing them? (side note I got this from a generator)

    Code:
    <!-- configurable script -->
    <script type="text/javascript">
    theimage = new Array();
    
    
    // The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
    // Format: theimage[...]=[image URL, link URL, name/description]
    theimage[0]=["http://technicalruckus.com/eveready/volusion/logos/slider1.jpg", "", ""]; 
    theimage[1]=["http://technicalruckus.com/eveready/volusion/logos/slider2.jpg", "", ""]; 
    theimage[2]=["http://technicalruckus.com/eveready/volusion/logos/slider3.jpg", "", ""]; 
    theimage[3]=["http://technicalruckus.com/eveready/volusion/logos/slider4.jpg", "", ""]; 
    theimage[4]=["http://technicalruckus.com/eveready/volusion/logos/slider5.jpg", "", ""]; 
    theimage[5]=["http://technicalruckus.com/eveready/volusion/logos/slider6.jpg", "", ""]; 
    theimage[6]=["http://technicalruckus.com/eveready/volusion/logos/slider7.jpg", "", ""]; 
    theimage[7]=["http://technicalruckus.com/eveready/volusion/logos/slider8.jpg", "", ""]; 
    theimage[8]=["http://technicalruckus.com/eveready/volusion/logos/slider9.jpg", "", ""]; 
    theimage[9]=["http://technicalruckus.com/eveready/volusion/logos/slider10.jpg", "", ""]; 
    
    ///// Plugin variables
    
    playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
    //#####
    //key that holds where in the array currently are
    i=0;
    
    
    //###########################################
    window.onload=function(){
    
    	//preload images into browser
    	preloadSlide();
    
    	//set the first slide
    	SetSlide(0);
    
    	//autoplay
    	PlaySlide();
    }
    
    //###########################################
    function SetSlide(num) {
    	//too big
    	i=num%theimage.length;
    	//too small
    	if(i<0)i=theimage.length-1;
    
    	//switch the image
    	document.images.imgslide.src=theimage[i][0];
    
    }
    
    
    //###########################################
    function PlaySlide() {
    	if (!window.playing) {
    		PlayingSlide(i+1);
    		if(document.slideshow.play){
    			document.slideshow.play.value="   Stop   ";
    		}
    	}
    	else {
    		playing=clearTimeout(playing);
    		if(document.slideshow.play){
    			document.slideshow.play.value="   Play   ";
    		}
    	}
    	// if you have to change the image for the "playing" slide
    	if(document.images.imgPlay){
    		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
    		imgStop=document.images.imgPlay.src
    	}
    }
    
    
    //###########################################
    function PlayingSlide(num) {
    	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
    }
    
    
    //###########################################
    function preloadSlide() {
    	for(k=0;k<theimage.length;k++) {
    		theimage[k][0]=new Image().src=theimage[k][0];
    	}
    }
    
    
    </script>
    
    
    <!-- slide show HTML -->
    <form name="slideshow">
    
    <table border="1" cellpadding="2" cellspacing="0">
    <tr>
    	<td align="center">
    	<a href="#" onmouseover="this.href=theimage[i][1];return false">
    	<script type="text/javascript">
    		document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
    	</script>
    	</a>
    	</td>
    </tr>
    </table>
    
    </form>
    <!-- end of slide show HTML -->

  2. #2
    Join Date
    Oct 2013
    Posts
    377
    Quote Originally Posted by ruckus09 View Post
    The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
    Netscape 4? Really? When was this script written? 1999?

    In all seriousness, look for something newer. There's a bunch of free HTML5 sliders out there. Most require jQuery but they're no more difficult to implement than what you have. As well as auto-resizing to fit.

  3. #3
    Join Date
    Oct 2013
    Posts
    3
    -__- yea I got it from a generator I didnt write it the Netscape thing threw me off also although you can still download that browser go figure but it looks like the Firefox Browser. I guess I dont have a choice ill get something newer thnx

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,156
    You can simply set height and width to resize images, the problem is that you would need to have higher definition images to resize because enlarging an image with too little DPI will cause pixelation and loss of image definition.

    Why do people push JQuery for simple things? Best avoid JQuery until you are familiar with JavaScript.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles