SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Slideshows

    Hi all,

    Beginner here...having trouble creating two slideshows on a single page. I know that there is a problem of one slideshow overriding the other, but I can't figure out what to change or where in order to make both functional. I've seen other posts related to this, but those I've tried don't work for me. Here's my partial code...I only included the parts I think are necessary. If anyone can help, or provide a better alternative, I am all ears and super appreciative! Thanks millions in advance...



    <script language="JavaScript1.1">


    var slideimages=new Array()
    var slidelinks=new Array()
    function slideshowimages(){
    for (i=0;i<slideshowimages.arguments.length;i++){
    slideimages[i]=new Image()
    slideimages[i].src=slideshowimages.arguments[i]
    }
    }

    function slideshowlinks(){
    for (i=0;i<slideshowlinks.arguments.length;i++)
    slidelinks[i]=slideshowlinks.arguments[i]
    }

    function gotoshow(){
    if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
    else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
    }
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>



    The slideshow code in body:

    <td colspan="2" rowspan="2">
    <a href="javascript:gotoshow()"><img src="images/logo_1.jpg" name="slide" border=0 width=288 height=192></a>
    <script>
    <!--

    //configure the paths of the images, plus corresponding target links
    slideshowimages("images/logo_1.jpg","images/logo_2.jpg","images/logo_3.jpg","images/logo_4.jpg","images/logo_5.jpg","images/logo_6.jpg","images/logo_7.jpg")

    //configure the speed of the slideshow, in miliseconds
    var slideshowspeed=1000

    var whichlink=0
    var whichimage=0
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=slideimages[whichimage].src
    whichlink=whichimage
    if (whichimage<slideimages.length-1)
    whichimage++
    else
    whichimage=0
    setTimeout("slideit()",slideshowspeed)
    }
    slideit()

    //-->
    </script>



    <td colspan="9">
    <a href="javascript:gotoshow()"><img src="images/header_1.jpg" name="slide" border=0 width=784 height=83></a>
    <script>
    <!--

    //configure the paths of the images, plus corresponding target links
    slideshowimages("images/header_1.jpg","images/header_2.jpg","images/header_3.jpg","images/header_4.jpg","images/header_5.jpg","images/header_6.jpg","images/header_7.jpg")

    //configure the speed of the slideshow, in miliseconds
    var slideshowspeed=2000

    var whichlink=0
    var whichimage=0
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=slideimages[whichimage].src
    whichlink=whichimage
    if (whichimage<slideimages.length-1)
    whichimage++
    else
    whichimage=0
    setTimeout("slideit()",slideshowspeed)
    }
    slideit()

    //-->
    </script>

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe the problem here is that the code you are using doesn't look like it is intended to be re-used more than once on a page. It uses variables in the global scope to store the images it intends to use in the slide show. Each time you call the function "slideshowimages" it overrides images (*shudder* Dreamweaver JS). If you aren't comfortable with writing your own I'd look at something using jQuery:

    slideshow | jQuery Plugins

    Some of these slideshows are fairly junky but I'm sure you could sift through and find something that suits your needs.


Tags for this Thread

Bookmarks

Posting Permissions

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