Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Alberta, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need slideshow to accomodate images of different sizes

    Ok. I have been looking and looking and I haven't found anything. I'll be upfront and honest. I'm really new to all this. I am great at copy & paste ~lol~ I'm learning, but it's a slow process for me.

    Anyway, What I am looking for which I haven't found is a good slideshow script that will accommodate images of different sizes. I have numerous galleries I will want to place on a slideshow. as an example:

    http://www.healinggardenofgrace.net/alberta.html

    the only problem with the current slide show is that not all my pictures are the same height and width, but it crams them or expands them to the desired size.

    Thank you for your assistance. Also any ideas to better my site will be appreciated too. ~lol~

    whitedove

  • #2
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    whitedove:

    Does your host support PHP? I have a PHP version that reads your image folder and uses all the files in it, automatically, for an "actual size" slide show.

    If not, I have another version that requires the images file names to be consecutive numbers, e.g., 1.jpg, 2.jpg, etc.

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Alberta, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ancora:

    Yes my host supports php, though I'm even less sure of PHP than I am of javascript ~lol~ but will try both if you don't mind.

    thank you

    white dove

  • #4
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    -- EDITED-- to correct an error
    whitedove:

    You will first probably need to open Folders | Options and create the new file type, php Otherwise, if you attempt to copy and save the following code, it will save as, slideshow.php.txt

    Set Notepad as the editor for php files.

    Once you add the new file type, copy the code AS IS, then save it as, say, slideshow.php

    Before you upload it to your server, there are two places where you must specify your image folder name. The code assumes that when you are looking at the file on your ftp, your image folder is visible.

    Find this line:

    $imagePath = "./images";

    and if the name of your images folder, isn't images, then change it.

    Then find this line, and do the same:

    var imgPath = "images/";

    Then upload it to your server, log out from you ftp accont, and open the slideshow.php file in your browser.

    I can't put both of them in this post, it exceeds the maximum characters. Let me know if you still want it after you try this one.

    Code:
    <?php 
    
    	$imagePath = "./images";
    	$pattern = "(\.jpg$)|(\.jpeg$)";
    	$images = "";
    	if($imgDir = opendir($imagePath))
    		{
            	 while(false !== ($file = readdir($imgDir)))
    			{
                   		 if(eregi($pattern, $file))
    				{
    				 $images = $images . $file . ",";
                  			}
    			}
    		}
    	closedir($imgDir);
    	$images = substr($images, 0, -1);
    	
    ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <script type="text/javascript">
    
    //--------- Begin Slideshow, Actual Size ------------
    
    // --- Customization ------ 
    	var textColor = "Blue";  
    	var backColor = "#F0F8FF"; 
    	var btnColor = "lightblue"
    	var imgPath = "images/"; // use "" if the images are in the current directory
    // --- End Customization -------
    
    // --- Do not edit below this line -------
    	var images = [];
    	var imgCount = 0;
    	var useWidth = screen.width*.85;
    	var prevActive = "i5";
    	var leftStr = Math.round((screen.width-useWidth-36)/2)+"px";
    	var absStr = "Position:Absolute;Bottom:10px;Left:"+leftStr+"";
    	var userDelay = 0;
    	var tick = 0;
    	var count = -1;
    	var wStr = 0;
    	var hStr = 0;
    	var tStr = 0;
    	var lStr = 0;
    	var IMGStr = "";
           	var miscFlag = false;
    	var cancelFlag = false;
    	var pauseFlag = false;
    	var complete = false;
    	var slideWindow = "";
    	var timeOut = "";
    	
    	function manageBtns(n){
    
    		if (n == 1)  //start
    			{
    			 document.getElementById('startBtn').disabled = true;
    			 document.getElementById('pauseBtn').disabled = false;
    			 document.getElementById('cancelBtn').disabled = false;
    			 document.getElementById('startBtn').value = "Start Slideshow"
    			}
    		if (n == 2)  //paused
    			{
    			 document.getElementById('startBtn').disabled = false;
    			 document.getElementById('pauseBtn').disabled = true;
    			 document.getElementById('cancelBtn').disable = false;
    			 document.getElementById('startBtn').value = "Resume Slideshow"
    			}
    		if (n == 3)  //canceled
    			{
    			 document.getElementById('startBtn').disabled = false;
    			 document.getElementById('pauseBtn').disabled = true;
    			 document.getElementById('cancelBtn').disabled = true;
    			 document.getElementById('startBtn').value = "Start Slideshow"
    			}
    		if (n == 4)  // done
    			{
    			 document.getElementById('startBtn').disabled = false;
    			 document.getElementById('pauseBtn').disabled = true;
    			 document.getElementById('cancelBtn').disabled = true;
    			 document.getElementById('startBtn').value = "Start Slideshow"
    			}
    	}
    
    	function cancelShow(){
    
    		count = imgCount;
    		cancelFlag = true;
    		slideWindow.focus();
    		self.status = "One Moment...";
    		tick = 0;
    		if (miscFlag == true){runShow()}
    	}
    
    	function pauseShow(){
    	
    		slideWindow.focus();
    		tick = 0;
    		pauseFlag = true;
    		miscFlag = true;
    	}
    
    	function waitLoadImage(){
    		
    		if (slideWindow.document.images[0].complete)  
    			{
    			 if (count < imgCount){countDown()}
    			 else if (cancelFlag == true){runShow()}
    			}
    		else  {setTimeout("waitLoadImage()",500)}
    	}
            
    	function displayIt(){
    
    		wStr = document.getElementById('nullIMG').width;
    		offsetW = wStr;
    		wStr = wStr+20;
    		wStr = "width="+wStr;	
    		hStr = document.getElementById('nullIMG').height;
    		offsetH = hStr;
    		hStr = hStr+20;
    		hStr = "height="+hStr;
    		lStr = (screen.width-50-offsetW)/2;
    		lStr = "left="+lStr;
    		tStr = (screen.availHeight-15-offsetH)/2;
    		tStr = "top="+tStr;
    		IMGStr = document.getElementById('dispIMG').innerHTML;
    		if (slideWindow != ""){slideWindow.close();slideWindow = ""}
    		if(slideWindow == ""){slideWindow = window.open("","SlideShow","toolbar=0,status=1,"+tStr+","+lStr+","+wStr+","+hStr+"")};	
    		slideWindow.document.open();
    		slideWindow.document.write(IMGStr);
    		slideWindow.document.close();
    		slideWindow.status = "This is " + (count+1) + " of " +(imgCount+1);
    		slideWindow.focus();
    		IMGStr = "";
    		waitLoadImage();
         	}
    
    	function getNextimage(){	
    		
    		document.getElementById('nullIMG').src = imgPath + images[count];
    		setTimeout("displayIt()",100);
    	}
    
    	function closeLastImage(){
    		
    		if (slideWindow.document.images[0].complete)
    			{
    			 if (cancelFlag == true){isDelay = 1000}
    			 else {isDelay = userDelay*1000; count = -1; clearTimeout(timeOut)}
    			 setTimeout("slideWindow.close();slideWindow=''",isDelay);
    			}
    		else {setTimeout("closeLastImage()",800)}
    	}
    
    	function countDown(){
    	
    		if (complete){complete = false; return}
    		if (tick > 0){self.status = tick} 
    		if (tick == 0 && (pauseFlag == false && cancelFlag == false)){self.status = 			"Loading Next Image...";}
    		if (tick >= 0)	
    			{
    			 timeOut = setTimeout("countDown()", 1000);
    			 tick--;
    	     		}
    		else {runShow()}
      	}
    			
    	function runShow(){
    
    		manageBtns(1);
    		tick = userDelay-1;
    		if (count < imgCount && pauseFlag == false)
    			{
    			 count++;
    			 getNextimage();
    			 miscFlag = false;
    			}
    		if (pauseFlag == true)
    			{
    			 self.status="Slideshow Paused at Image " 
    				+(count+1) + " of " +(imgCount+1) + "."
    			 pauseFlag = false;
    			 manageBtns(2);
    			}	
    		if (count == imgCount && cancelFlag == false)
    			{
    			 self.status = "Slideshow Is Complete."
    			 complete = true;
    			 manageBtns(4);
    			 closeLastImage();
    			}
    		if (count == imgCount && cancelFlag == true)
    			{
    			 self.status = "Slideshow is Canceled."
    			 closeLastImage();
    			 count = -1;
    			 cancelFlag = false;
    			 pauseFlag = false;
    			 miscFlag = false;
    			 manageBtns(3);
    			}	
    	}
    
    	function updateInterval(Active){
    
    		var next = "i"+Active;
    		document.getElementById(prevActive).bgColor="#F0F8FF";
    		document.getElementById(next).bgColor="darkorange";
    		prevActive = next;
    		userDelay = Active;
    		shutDownDelay = Active*1000;
    		tick = userDelay-1;
    		if (slideWindow != ""){slideWindow.focus()}
    	}
    
    	function buildSupport(){	
    
    		var divStr = "<Div style='Position:Absolute;Top:-2000px' id='dispIMG'><IMG Src='"+imgPath+"1.jpg' ID='nullIMG'></Div>";
    		document.write(divStr);
    	}
    
    	function buildBox(){
    
    		var styleStr = "<Style type='text/css'>.cDiv {"+absStr+";Height:54pt;Padding-Left:0px; Padding-Right:0px;Padding-Top:6px;Padding-Bottom:6px;Margin-Right:4px;Margin-Left:6px;Margin-Top:0px;Margin-Bottom:0px;Text-Indent:0px;width:"+useWidth+"px;Border-Top:#C0C0C0 1px solid;Border-Left:#C0C0C0 1px solid;Border-Bottom:Black 1px solid;Border-Right:Black 1px solid;background-color:"+backColor+";}.iBox {Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Border-Top:Black 1px Solid;Border-Bottom:Black 1px Solid;Border-Left:Black 1px Solid;Text-Transform:none;Padding-Left:5px;Padding-Right:3px;Padding-Top:2px;Padding-Bottom:2px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;} .nBox {Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Border-Top:Black 1px Solid;Border-Bottom:Black 1px Solid;Border-Left:Black 1px Solid;Text-Transform:none;Padding-Left:0px;Padding-Right:5px;Padding-Top:2px;Padding-Bottom:2px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;}.nxBox {Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Border-Top:Black 1px Solid;Border-Bottom:Black 1px Solid;Border-Left:Black 1px Solid;Border-Right:Black 1px Solid;Text-Transform:none;Padding-Left:0px;Padding-Right:5px;Padding-Top:2px;Padding-Bottom:2px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;} .cBtns{Line-Height:Normal;Font-Style:Normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:Center;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Background-Color:"+btnColor+";Border-Right:Black 1px solid;Border-Top:White 1px Solid;Border-Left:White 1px Solid;Border-Bottom:Black 1px Solid;Cursor:Pointer;}</Style>";
    
    		var controlStr = "<Table cellspacing='0'><TD class='iBox' bgColor='moccasin'>SlideShow Interval:<TD class=nBox id =i2><input type='radio'name='interval' onclick='updateInterval(2)'>2</TD><TD class=nBox id =i3><input type='radio'name='interval' onclick='updateInterval(3)'>3</TD><TD class=nBox id =i4><input type='radio'name='interval' onclick='updateInterval(4)'>4</TD><TD class=nBox id =i5 bgcolor='darkorange'><input type='radio' name='interval' checked onclick='updateInterval(5)'>5</TD><TD class=nBox id =i6><input type='radio'name='interval' onclick='updateInterval(6)'>6</TD><TD class=nBox id =i7><input type='radio' name='interval' onclick='updateInterval(7)'>7</TD><TD class=nBox id =i8><input type='radio'name='interval' onclick='updateInterval(8)'>8</TD><TD class=nBox id =i9><input type='radio' name='interval' onclick='updateInterval(9)'>9</TD><TD class=nxBox id =i10><input type='radio'name='interval' onclick='updateInterval(10)'>10</TD></Table><Table><TD><input type='button' id='startBtn' class='cBtns' value='Start Slideshow' onClick='runShow()'></TD><TD><input type='button' id='pauseBtn' class='cBtns' value='Pause Slideshow' onClick='pauseShow()'></TD><TD><input type='button' id='cancelBtn' class='cBtns' value='Cancel Slideshow' onClick='cancelShow()'></TD></Table>"
    
    		var tblStr = "<DIV id='isFloat' class='cDiv' align='center'>"+controlStr+"</DIV>"
    
    		document.write(styleStr);
    		document.write(tblStr);
    	}
    
    	function initControls(){
    
    		buildBox();
    		buildSupport();
    		updateInterval(5);
    		document.getElementById('pauseBtn').disabled = true;
    		document.getElementById('cancelBtn').disabled = true;
    	}	
    
    	function initImages(){
    
    		var tmp  = document.getElementById('imgNames').value;
    		tmp = tmp.split(',');
    		for (i=0; i<tmp.length; i++)
    			{
    			 images[i] = tmp[i];
    			}
    		imgCount = images.length-1;
    		document.getElementById('nullIMG').src = imgPath+images[0];
    	}
    
    	onload=initImages;
    
    // ---- End Slideshow, Actual Size---------
    
    </script>
    </head>
    <body>
    <h3 align='center'>Actual Size Image Slideshow</h3>
    <input type="hidden" id="imgNames" value="<?php echo $images; ?>">
    
    
    <!-- Keep the following line as the LAST line in the Body -->
    <script type="text/javascript"> initControls() </script>
    </body>
    </html>
    Last edited by Ancora; 02-02-2007 at 02:12 PM.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var zxcImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var zxcImages=['Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif','Six.gif','Seven.gif','Eight.gif','Nine.gif'];
    
    var zxcSSAry=[];
    for (var zxc0=0;zxc0<zxcImages.length;zxc0++){
     zxcSSAry.push([zxcImgPath+zxcImages[zxc0]]);
    }
    
    var zxcCnt=0;
    
    function SlideShow(zxcdir){
     zxcCnt+=zxcdir;
     zxcCnt=(zxcCnt>=zxcSSAry.length)?0:(zxcCnt<0)?zxcSSAry.length-1:zxcCnt;
     if (!zxcSSAry[zxcCnt][1]){
      zxcSSAry[zxcCnt][1]=new Image();
      zxcSSAry[zxcCnt][1].src=zxcSSAry[zxcCnt][0];
     }
     if (zxcSSAry[zxcCnt][1].complete){
      document.getElementById('Text').innerHTML='';
      var ssimg=document.getElementById('SS');
      ssimg.width=zxcSSAry[zxcCnt][1].width;
      ssimg.height=zxcSSAry[zxcCnt][1].height;
      ssimg.src=zxcSSAry[zxcCnt][1].src;
     }
     else {
      document.getElementById('Text').innerHTML='Loading';
      setTimeout('SlideShow(0)',100);
     }
    }
    
    
    //-->
    </script></head>
    
    <body>
    <INPUT type="button" value="Next" onclick="SlideShow(1);" >
    <INPUT type="button" value="Back" onclick="SlideShow(-1);" >
    <img id="SS" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100" >
    <div id="Text" ></div>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    the above is the natural image size

    the same effect as above can be achieved by leving the width and height attributes out on the image tag

    if you want to force the image size
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var zxcImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var zxcImages=[['Zero.gif',100,150],['One.gif',50,150],['Two.gif',150,50],['Three.gif',40,40],['Four.gif',140,140],['Five.gif',120,120],['Six.gif',90,80],['Seven.gif',80,90],['Eight.gif',200,300],['Nine.gif',100,100]];
    
    
    var zxcCnt=0;
    
    function SlideShow(zxcdir){
     zxcCnt+=zxcdir;
     zxcCnt=(zxcCnt>=zxcImages.length)?0:(zxcCnt<0)?zxcImages.length-1:zxcCnt;
     var ssimg=document.getElementById('SS');
     ssimg.width=zxcImages[zxcCnt][1];
     ssimg.height=zxcImages[zxcCnt][2];
     ssimg.src=zxcImgPath+zxcImages[zxcCnt][0];
    }
    
    
    //-->
    </script></head>
    
    <body>
    <select name="Uip1" id="Uip1" onchange="f()" title="Units">
    <option >111111</option>
    </select>
    <INPUT type="button" value="Next" onclick="SlideShow(1);" >
    <INPUT type="button" value="Back" onclick="SlideShow(-1);" >
    <img id="SS" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100" >
    <div id="Text" ></div>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Alberta, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ancora:

    Thank you. I will give that one a shot as well. Now can that php slideshow be shown in the miniwindow I have on that page?


    VWPhillips:

    Thank you too. I have two pages of slides right now so will try that one also. I did notice you have it set up with gif files. I'm guessing that they can be either jpg or gif and doesn't matter..


    thanks

    Lori-Kim

  • #8
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Lori-Kim:

    The code I posted creates its own, centered, window for the slide image, the exact size of the image. Sorry, but I didn't visit your site.

  • #9
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Alberta, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good to know. Thank you very much.

  • #10
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Lori-Kim:

    It's been a long time since I've dealt with that code. I should have tested it before I posted it. I'm sorry, but there's a slight error. I forgot a simple "px" on one line.

    I'm editing my previous post with tested code.

  • #11
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Lori-Kim:

    By now you probably realize that the amended code I posted is also in error.

    I apolgize for my mistake.

    I have edited the code, once again, and tested it, once again.

  • #12
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Alberta, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ancora:

    No worries. Thank you for your help.


  •  

    Posting Permissions

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