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 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    slideshow/image swap

    Hi! I have a script that swaps one picture for another to create a slide show on a page. However, I'd like to put three different categories of items on a page; such as, a bear, a lion, and a zebra. Then for each category I'd like to make a slideshow of three different pics of each animal running at the same time. Does anyone know of a script that can do that and will run in all popular browsers? Thanks for your help!

  • #2
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    I'm a newbie myself. I found a neat little scrip to act as a slider + text. Prob. not what you want but good anyway.

    Only other way I know to get a slideshow is PP. of course no good as uses entire screen. Other way to create animated gif can have multiple gifs in page.

    Slider + Text
    =========

    <table border="0" cellpadding="0">
    <caption><strong>Kevin's pet dog</strong></caption>
    <tr>
    <td width="100%"><img src="http://www.javascriptsolutions.com/imagesOLD/Img002.jpg" width="400" height="264" name="photoslider"></td>
    </tr>
    <tr>
    <td width="100%"><form method="POST" name="rotater">
    <div align="center"><center><p>

    <script language="JavaScript1.1">

    /*
    Photo Slider II- By Kevin Adams (kadams@kyk.net)
    For this script and more
    Visit http://www.javascriptkit.com
    */

    var photos=new Array()
    var text=new Array()
    var which=0
    var what=0

    //Change the below variables to reference your own images. You may have as many images in the slider as you wish
    photos[0]="http://www.javascriptsolutions.com/imagesOLD/Img002.jpg"
    photos[1]="http://www.javascriptsolutions.com/imagesOLD/Img003.jpg"
    photos[2]="http://www.javascriptsolutions.com/imagesOLD/Img004.jpg"
    photos[3]="http://www.javascriptsolutions.com/imagesOLD/Img005.jpg"
    photos[4]="http://www.javascriptsolutions.com/imagesOLD/ministix4.jpg"
    photos[5]="http://www.javascriptsolutions.com/imagesOLD/ministix5.jpg"
    photos[6]="http://www.javascriptsolutions.com/imagesOLD/ministix6.jpg"

    //change coresponding description
    text[0]="Libby watching another dog from the front porch"
    text[1]="A calm moment. EXTREMELY RARE!"
    text[2]="Curious as to what that flash was all about"
    text[3]="Mad at Momma for taking pictures."
    text[4]="Libby striking back!"
    text[5]="They make messes and they lay in them."
    text[6]="Libby catching a frisbee, Ministix following."

    window.onload=new Function("document.rotater.description.value=text[0]")

    function backward(){
    if (which>0){
    window.status=''
    which--
    document.images.photoslider.src=photos[which];
    what--
    document.rotater.description.value=text[what];
    }
    }

    function forward(){
    if (which<photos.length-1){
    which++
    document.images.photoslider.src=photos[which]
    what++
    document.rotater.description.value=text[what];
    }
    else window.status='End of gallery'
    }

    function type()
    {
    alert("This textbox will only display default comments")
    }


    </script>
    <p><input type=text name="description" style="width:400px" size=50>

    <p><input type="button" value="<<Back" name="B2"
    onClick="backward()"> <input type="button" value="Next>>" name="B1"
    onClick="forward()"><br>
    <a href="#" onClick="which=1;what=1;backward();return false"><small>Start Over</small></a></p>
    </center></div>
    </form>
    </td>
    </tr>
    </table>

    <p align="center"><font face="arial" size="-2">This free script provided by</font><br>
    <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
    Kit</a></font></p>

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>47274</title>
    	</head>
    	<body>
    		<ul name="slideshow">
    			<li><img src="images/1.jpg" alt=""></li>
    			<li><img src="images/2.jpg" alt=""></li>
    			<li><img src="images/3.jpg" alt=""></li>
    		</ul>
    		<ul name="slideshow">
    			<li><img src="images/4.jpg" alt=""></li>
    			<li><img src="images/5.jpg" alt=""></li>
    			<li><img src="images/6.jpg" alt=""></li>
    		</ul>
    		<ul name="slideshow">
    			<li><img src="images/7.jpg" alt=""></li>
    			<li><img src="images/8.jpg" alt=""></li>
    			<li><img src="images/1.jpg" alt=""></li>
    		</ul>
    		<script type="text/javascript">
    			var slideshows = document.getElementsByName("slideshow");
    			var list = new Array();
    
    			for(var i = 0; i < slideshows.length; i++)
    			{
    				list[i] = slideshows[i].getElementsByTagName("li");
    				for(var j = 1; j < list[i].length; j++)
    				{
    					list[i][j].style.display = 'none';
    				}
    			}
    
    			function next()
    			{
    				for(i = 0; i < slideshows.length; i++)
    				{
    					j = 0;
    					while(j < list[i].length && list[i][j].style.display == 'none')
    					{
    						j++;
    					}
    
    					list[i][j].style.display = 'none';
    					j++;
    					if(j == list[i].length)
    					{
    						j = 0;
    					}
    					list[i][j].style.display = '';
    				}
    
    				setTimeout("next()",1000);
    			}
    
    			next();
    		</script>
    	</body>
    </html>
    If you want to support Internet Explorer you'll need to find another way to fill the slideshows array. IE does not support the getElementsByName method.

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    however it does support getElementById... a small modification but that might solve the problem.

    you could even do an "if i.e (getElementById)" thing to maintain current compatibility, and add i.e compatibility
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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