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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Gallery buttons not working ( previous and next )

    Solved the first issue.

    Now a different issue came up:

    As of now the images stop at image 3; if i press next it doesn't loop. How can I make it continuously go round and round when I press next/previous?

    Hi guys,

    I'm new to JavaScript and I found this script online ( might be old ) and I just need to use it for a simple gallery where images switch as i press the navigation.

    My problem is that when I preview the design in my browser ( Safari & Firefox ) is doesn't work. Nothing happens, they are marked as links, but I just can't click them.

    The images are placed right and all that, but I'm sure there is some kind of silly thing I've overlooked. Please help me, the whole site is done, just missing this last piece.

    Thanks,
    Mats

    (ps, code might look a bit messy)
    [I]
    <head>

    <script type="text/javascript">

    /***********************************************
    * DHTML slideshow script- *© Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice must stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var photos=new Array()
    var photoslink=new Array()
    var which=0

    //define images. You can have as many as you want:
    photos[0]="SW4_1.jpg"
    photos[1]="SW4_2.jpg"
    photos[2]="SW4_3.jpg"

    //Specify whether images should be linked or not (1=linked)
    var linkornot=0

    //Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
    photoslink[0]=""
    photoslink[1]=""
    photoslink[2]=""

    //do NOT edit pass this line

    var preloadedimages=new Array()
    for (i=0;i<photos.length;i++){
    preloadedimages[i]=new Image()
    preloadedimages[i].src=photos
    }


    function applyeffect(){
    if (document.all && photoslider.filters){
    photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
    photoslider.filters.revealTrans.stop()
    photoslider.filters.revealTrans.apply()
    }
    }



    function playeffect(){
    if (document.all && photoslider.filters)
    photoslider.filters.revealTrans.play()
    }

    function keeptrack(){
    window.status="Image "+(which+1)+" of "+photos.length
    }


    function backward(){
    if (which>0){
    which--
    applyeffect()
    document.images.photoslider.src=photos[which]
    playeffect()
    keeptrack()
    }
    }

    function forward(){
    if (which<photos.length-1){
    which++
    applyeffect()
    document.images.photoslider.src=photos[which]
    playeffect()
    keeptrack()
    }
    }

    function transport(){
    window.location=photoslink[which]
    }

    </script>
    </head>

    <body>

    <table border="0" cellspacing="0" cellpadding="0">
    *<tr>
    * *<td width="100%" colspan="1" height="21"><left>
    <script>
    if (linkornot==1)
    document.write('<a href="javascript:transport()">')
    document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
    if (linkornot==1)
    document.write('</a>')
    </script>
    </center></td>
    *</tr>
    *<tr>
    * *<td width="100%" height="21">
    * *<p align="left"><a href="#" onClick="backward();return false">Previous</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" onClick="forward();return false">Next</a></td>
    *</tr>
    </table>

    </body>
    Last edited by Mats; 10-21-2010 at 03:28 PM.

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    but I just want it as simple as this:

    Source

    I'd like to have the option to have typography-based buttons

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,516
    Thanks
    3
    Thanked 505 Times in 492 Posts
    the effects are IE only

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    
    /***********************************************
    * DHTML slideshow script- *© Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice must stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var photos=new Array()
    var photoslink=new Array()
    var which=0
    
    //define images. You can have as many as you want:
    photos[0]="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
    photos[1]="http://www.vicsjavascripts.org.uk/StdImages/Two.gif"
    photos[2]="http://www.vicsjavascripts.org.uk/StdImages/Three.gif"
    
    //Specify whether images should be linked or not (1=linked)
    var linkornot=0
    
    //Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
    photoslink[0]=""
    photoslink[1]=""
    photoslink[2]=""
    
    //do NOT edit pass this line
    
    var preloadedimages=new Array()
    for (i=0;i<photos.length;i++){
    preloadedimages[i]=new Image()
    preloadedimages[i].src=photos[i]
    }
    
    
    function applyeffect(){
    if (document.all && photoslider.filters){
    photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
    photoslider.filters.revealTrans.stop()
    photoslider.filters.revealTrans.apply()
    }
    }
    
    
    
    function playeffect(){
    if (document.all && photoslider.filters)
    photoslider.filters.revealTrans.play()
    }
    
    function keeptrack(){
    window.status="Image "+(which+1)+" of "+photos.length
    }
    
    
    function backward(){
    if (which>0){
    which--
    applyeffect()
    document.images.photoslider.src=photos[which]
    playeffect()
    keeptrack()
    }
    }
    
    function forward(){
    if (which<photos.length-1){
    which++
    applyeffect()
    document.images.photoslider.src=photos[which]
    playeffect()
    keeptrack()
    }
    }
    
    function transport(){
    window.location=photoslink[which]
    }
    
    
    /*]]>*/
    </script></head>
    
    <body>
    <table border="0" cellspacing="0" cellpadding="0">
    *<tr>
    * *<td width="100%" colspan="1" height="21"><left>
    <script>
    if (linkornot==1)
    document.write('<a href="javascript:transport()">')
    document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
    if (linkornot==1)
    document.write('</a>')
    </script>
    </center></td>
    *</tr>
    *<tr>
    * *<td width="100%" height="21">
    * *<p align="left"><a href="#" onClick="backward();return false">Previous</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" onClick="forward();return false">Next</a></td>
    *</tr>
    </table>
    
    </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/

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's not the effects I'm after, actually couldn't care less for them, I just can't get the navigation to work. It won't change from the first picture.

  • #6
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Solved the first issue.

    Now a different issue came up:

    As of now the images stop at image 3; if i press next it doesn't loop. How can I make it continuously go round and round when I press next/previous?

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,020
    Thanks
    15
    Thanked 239 Times in 239 Posts
    Very basic round robin slide show. Just put your URLs in the imagelist array. Notice how modulus is used to make it go around.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><!--This page generated Mon Aug 10 20:24:09 PDT 2009-->
    <head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>My Minishow: Click image to change</title>
    <style type='text/css'>
    body{margin:0px;background-color:#000;color:#fff}
    #main{width:100%;height:100%}
    #image_container{text-align:center;vertical-align:middle}
    #text {font-size:18px;font-weight:bold}
    img{border:2px solid white;}
    </style>
    </head><body><table id="main"><tbody><tr><td id="image_container"></td></tr></tbody></table>
    <script type='text/javascript'>
    imagelist = Array;imagelist =[];
    
    function load_image(count){document.getElementById("image_container").innerHTML=("<p id=\"text\" >Image "+(count+1)+" of "+imagelist.length+"</p><a href=\"#\" onclick='increment(count);'><img src=\""+imagelist[count]+"\"></a><p id=\"text\" >"+imagelist[count]+"</p>");}
    var count = 0;
    function increment(){(count=count+1);count=count%imagelist.length;load_image(count)}
    window.onload=load_image(count);
    </script>
      </body>
    </html>


  •  

    LinkBacks (?)


    Tags for this Thread

    Posting Permissions

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