Advanced Search

Results 1 to 7 of 7

Thread: Blending image slideshow script

  1. #1
    Join Date
    Dec 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Blending image slideshow script

    Warning- there is a lot of the code in here


    I am attempting to use the blending image slideshow script:
    http://www.dynamicdrive.com/dynamicindex14/image4.htm

    to load 3 changing pictures on the same line:

    i changed the variable names to corespond to a left center or right location on the script for my convience when looking at it:



    this is the header information i have:


    <!-- -->
    <!-- -->
    <!-- -->
    <script language="JavaScript1.1">
    <!--

    //*****************************************
    // Blending Image Slide Show Script-
    // Dynamic Drive (www.dynamicdrive.com)
    // For full source code, visit http://www.dynamicdrive.com/
    //*****************************************

    //specify interval between slide (in mili seconds)
    var leftslidespeed=3000

    //specify images
    var leftslideimages=new Array("image001.jpg","image002.jpg")

    //specify corresponding links
    var leftslidelinks=new Array("","")

    var leftnewwindow=1 //open links in new window? 1=yes, 0=no

    var leftimageholder=new Array()
    var leftie=document.all
    for (i=0;i<leftslideimages.length;i++){
    leftimageholder[i]=new Image()
    leftimageholder[i].src=leftslideimages[i]
    }

    function leftgotoshow(){
    if (newwindow)
    window.open(leftslidelinks[leftwhichlink])
    else
    window.location=leftslidelinks[leftwhichlink]
    }

    //-->
    </script>
    <!-- -->
    <script language="JavaScript1.1">
    <!--

    //*****************************************
    // Blending Image Slide Show Script-
    // Dynamic Drive (www.dynamicdrive.com)
    // For full source code, visit http://www.dynamicdrive.com/
    //*****************************************

    //specify interval between slide (in mili seconds)
    var centerslidespeed=3000

    //specify images
    var centerslideimages=new Array("image007.jpg","image008.jpg")

    //specify corresponding links
    var centerslidelinks=new Array("","")

    var centernewwindow=1 //open links in new window? 1=yes, 0=no

    var centerimageholder=new Array()
    var centerie=document.all
    for (i=0;i<centerslideimages.length;i++){
    centerimageholder[i]=new Image()
    centerimageholder[i].src=centerslideimages[i]
    }

    function centergotoshow(){
    if (newwindow)
    window.open(centerslidelinks[centerwhichlink])
    else
    window.location=centerslidelinks[centerwhichlink]
    }

    //-->
    </script>

    <!-- -->
    <script language="JavaScript1.1">
    <!--

    //*****************************************
    // Blending Image Slide Show Script-
    // Dynamic Drive (www.dynamicdrive.com)
    // For full source code, visit http://www.dynamicdrive.com/
    //*****************************************

    //specify interval between slide (in mili seconds)
    var rightslidespeed=3000

    //specify images
    var rightslideimages=new Array("image005.jpg","image006.jpg")

    //specify corresponding links
    var rightslidelinks=new Array("","")

    var rightnewwindow=1 //open links in new window? 1=yes, 0=no

    var rightimageholder=new Array()
    var rightie=document.all
    for (i=0;i<rightslideimages.length;i++){
    rightimageholder[i]=new Image()
    rightimageholder[i].src=rightslideimages[i]
    }

    function rightgotoshow(){
    if (newwindow)
    window.open(rightslidelinks[rightwhichlink])
    else
    window.location=rightslidelinks[rightwhichlink]
    }

    //-->
    </script>

    <!-- ************************************************************************ -->
    <!-- ** ** -->
    <!-- ** End of Web Page Header Section ** -->
    <!-- ** ** -->
    <!-- ************************************************************************ -->
    <!-- -->
    </HEAD>
    <!-- -->

    this is the body section


    <body>

    <!-- ************************************************************************** -->
    <!-- ** ** -->
    <!-- ** Web Page Body Section ** -->
    <!-- ** ** -->
    <!-- ************************************************************************** -->

    <!-- -->
    <!-- -->
    <!-- -->
    <!-- -->
    <!-- -->
    <!-- ************************************************************************** -->
    <!-- ** ** -->
    <!-- ** Blended image script ** -->
    <!-- ** ** -->
    <!-- ************************************************************************** -->
    <P align=left>


    <a href="javascript:leftgotoshow()"><img src="image001.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100>

    <script language="JavaScript1.1">
    <!--

    var leftwhichlink=0
    var leftwhichimage=0
    var leftblenddelay=(leftie)? document.images.slide.filters[0].duration*1000 : 0
    function leftslideit(){
    if (!document.images) return
    if (leftie) document.images.slide.filters[0].apply()
    document.images.slide.src=leftimageholder[leftwhichimage].src
    if (leftie) document.images.slide.filters[0].play()
    leftwhichlink=leftwhichimage
    leftwhichimage=(leftwhichimage<leftslideimages.length-1)? leftwhichimage+1 : 0
    setTimeout("leftslideit()",leftslidespeed+leftblenddelay)
    }
    leftslideit()

    //-->
    </script>
    </p>
    <!-- -->

    <!-- -->
    <!-- -->
    <!-- -->
    <!-- -->
    <!-- -->
    <!-- ************************************************************************** -->
    <!-- ** ** -->
    <!-- ** Blended image script ** -->
    <!-- ** ** -->
    <!-- ************************************************************************** -->
    <P align=center>


    <a href="javascript:centergotoshow()"><img src="image007.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" position=right width=97 height=100>

    <script language="JavaScript1.1">
    <!--

    var centerwhichlink=0
    var centerwhichimage=0
    var centerblenddelay=(centerie)? document.images.slide.filters[0].duration*1000 : 0
    function centerslideit(){
    if (!document.images) return
    if (centerie) document.images.slide.filters[0].apply()
    document.images.slide.src=centerimageholder[centerwhichimage].src
    if (centerie) document.images.slide.filters[0].play()
    centerwhichlink=centerwhichimage
    centerwhichimage=(centerwhichimage<centerslideimages.length-1)? centerwhichimage+1 : 0
    setTimeout("centerslideit()",centerslidespeed+centerblenddelay)
    }
    centerslideit()

    //-->
    </script>
    </p>
    <!-- -->

    <!-- -->
    <!-- -->
    <!-- -->
    <!-- -->
    <!-- -->
    <!-- ************************************************************************** -->
    <!-- ** ** -->
    <!-- ** Blended image script ** -->
    <!-- ** ** -->
    <!-- ************************************************************************** -->
    <P align=right>


    <a href="javascript:rightgotoshow()"><img src="image005.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

    <script language="JavaScript1.1">
    <!--

    var rightwhichlink=0
    var rightwhichimage=0
    var rightblenddelay=(rightie)? document.images.slide.filters[0].duration*1000 : 0
    function rightslideit(){
    if (!document.images) return
    if (rightie) document.images.slide.filters[0].apply()
    document.images.slide.src=rightimageholder[rightwhichimage].src
    if (rightie) document.images.slide.filters[0].play()
    rightwhichlink=rightwhichimage
    rightwhichimage=(rightwhichimage<rightslideimages.length-1)? rightwhichimage+1 : 0
    setTimeout("rightslideit()",rightslidespeed+rightblenddelay)
    }
    rightslideit()

    //-->
    </script>
    </p>





    when i run it i receive the initial 3 pictures but ONLY the right picture changes
    and that appears to occasionally load one of the other sets of pictures. (i think)

    any idea what i might need to correct or change to fix it?

  2. #2
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry, but you can only use one script per page. Using more than one is a "script customization" which takes a lot of time.

    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  3. #3
    Join Date
    Dec 2004
    Posts
    177
    Thanks
    0
    Thanked 18 Times in 17 Posts

    Default

    well, to start with...the idea of six nearly identical javascripts in the same page is a little messy, and I might help clean it up a bit. For now, though, the only thing I've noticed is that your images are all called 'slide', as long as you're doing it this way, change the center and the right names, and it 'might' work...

    *nods towards creative's post*

  4. #4
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Forgot to mention, there's a link in my signature "Management of 2+ scripts" which will help you undertake the process.

    It's just very time consuming..

    Happy new year.
    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  5. #5
    Join Date
    Dec 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Minos ,

    the tip about slide was the fix and i do appreciate it. now if i could just find out whats turnign on the underline in the middle i would have it made lol

  6. #6
    Join Date
    Dec 2004
    Posts
    177
    Thanks
    0
    Thanked 18 Times in 17 Posts

    Default

    **FINAL**

    Code:
    <html>
    <head>
    <title>Untitled</title>
    <script language="javascript">
    <!--
    
    //specify interval between slide (in mili seconds)
    var slidespeed=1000
    
    //specify images
    var slideimages=new Array()
        slideimages[0]=new Array("DSCF0075.JPG","DSCF0076.JPG")
        slideimages[1]=new Array("DSCF0077.JPG","DSCF0078.JPG")
        slideimages[2]=new Array("DSCF0078.JPG","DSCF0079.JPG")
    
    //specify corresponding links
    var slidelinks=new Array()
        slidelinks[0]=new Array("","")
        slidelinks[1]=new Array("","")
        slidelinks[2]=new Array("","")
    
    var newwindow=new Array()
        newwindow[0]=1
        newwindow[1]=1
        newwindow[2]=1
    
    var imageholder=new Array()
    var ie=document.all
    for (i=0;i<slideimages.length;i++)
        imageholder[i]=new Array(slideimages[i].length)
    
    for (i=0;i<slideimages.length;i++)
        for (e=0; e<slideimages[i].length; e++){
          imageholder[i][e]=new Image()
          imageholder[i][e].src=slideimages[i][e]
        }
    
    
    function gotoshow(num){
    if (newwindow[num])
    window.open(slidelinks[num][whichlink[num]])
    else
    window.location=slidelinks[num][whichlink[num]]
    }
    
    //-->
    </script>
    
    </HEAD>
    
    
    this is the body section
    
    
    <body>
    
    <P align=left>
    <a href="javascript:gotoshow(0)"><img src="DSCF0075.JPG" name="slide0" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
    </p>
    
    <P align=center>
    <a href="javascript:gotoshow(1)"><img src="DSCF0076.JPG" name="slide1" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
    </p>
    
    <P align=right>
    <a href="javascript:gotoshow(2)"><img src="DSCF0077.JPG" name="slide2" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
    </p>
    
    <script language="JavaScript">
    
    var whichlink=new Array(slideimages.length)
    
    var whichimage=new Array(slideimages.length)
    
    var name="slide"
    
    for (i=0; i<slideimages.length;i++){
      whichlink[i]=0
      name="slide" + i
      whichimage[i]=0
      blenddelay=(ie)? document.images[name].filters[0].duration*1000 : 0 
    }
    
    var delay=slidespeed+blenddelay 
    
    function slideit(){
     for (i=0;i<slideimages.length;i++){ 
      name="slide" + i
      if (!document.images) return
      if (ie) document.images[name].filters[0].apply()
      document.images[name].src=imageholder[i][whichimage[i]].src
      if (ie) document.images[name].filters[0].play()
      whichlink[i]=whichimage[i]
      whichimage[i]=(whichimage[i]<slideimages[i].length-1)? whichimage[i]+1 : 0
     }
     setTimeout("slideit()",delay)
    }
    
    slideit();
    
    </script>
    
    </body>
    </html>
    oh, threw in my own links and images so I could work on it...
    Please remember to get the copyright information back, I deleted it to save space while I was messing.
    Last edited by Minos; 01-03-2005 at 08:06 AM.

  7. #7
    Join Date
    Dec 2004
    Posts
    177
    Thanks
    0
    Thanked 18 Times in 17 Posts

    Default

    Now the above code works, didn't notice I had the setTimeout in a loop. If you have any questions on how to get your stuff in, just ask, and I'll help.

    The only thing is, the delay has to be the same for all three as is. If you need otherwise, I can see what I can do. But enjoy, nonetheless.
    Last edited by Minos; 01-03-2005 at 07:29 AM.

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
  •