Results 1 to 6 of 6

Thread: editing a simple script

  1. #1
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question editing a simple script

    1) Script Title:
    FF1+ IE5+ Opr7+
    DHTML Slide Show Script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...dhtmlslide.htm

    3) Describe problem:
    ive used this script loads but im wondering is there a way that when you reach the last photo there is no longer a 'next' option??

    ps im a beginner!!

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,625
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    It can be done. You need to change two JS functions in the following manner:
    Code:
    function backward(){
    if (which>0){
    which--
    if(which != photos.length - 1) document.getElementById('next').style.display = 'inline';
    if(which == 0) document.getElementById('prev').style.display = 'none';
    applyeffect()
    document.images.photoslider.src=photos[which]
    playeffect()
    keeptrack()
    }
    }
    
    function forward(){
    if (which<photos.length-1){
    which++
    if(which == photos.length -1)document.getElementById('next').style.display = 'none';
    if(which > 0) document.getElementById('prev').style.display = 'inline';
    applyeffect()
    document.images.photoslider.src=photos[which]
    playeffect()
    keeptrack()
    }
    }
    After that you need to assign unique IDs to the hyperlinks - Previous Slide and Next Slide in the following manner:
    Code:
    <tr>
        <td height="21" width="50%"><p align="left"><a href="#" onclick="backward(this);return false" id="prev">Previous Slide</a></p></td>
        <td height="21" width="50%"><p align="right"><a href="#" onclick="forward(this);return false" id="next">Next Slide</a></p></td>
    </tr>
    If you use any IDs other than 'prev' and 'next' then you have to make the necessary changes in the highlighted area of the JS code.

  3. #3
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    try this. change the value in red to the id of your next link.
    Code:
    <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]="photo1.jpg"
    photos[1]="photo2.jpg"
    photos[2]="photo3.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[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()
    }
    if((which+1)==photos.length-1) {
    var nextb=document.getElementById("next");
    nextb.style.opacity=0;
    nextb.style.filter="alpha(opacity=0)";
    nextb.onclick="forward();return false";
    }
    }
    
    function forward(){
    if (which<photos.length-1){
    which++
    applyeffect()
    document.images.photoslider.src=photos[which]
    playeffect()
    keeptrack()
    } 
    if(which==photos.length-1) {
    var nexta=document.getElementById("next");
    nexta.style.opacity=1;
    nexta.style.filter="alpha(opacity=100)";
    nexta.onclick=false;
    } 
    }
    
    function transport(){
    window.location=photoslink[which]
    }
    
    </script>
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,625
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    I wonder what is the real advantage of removing/resetting the onclick event of the anchor element.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It is better to use style visibility than display. This will preserve the layout of the page. Also, since we cannot rely cross browser on this effect in the same way that we can with document.images, it is best to test for getElementByID before doing any of these things. Use this version:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <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]="photo1.jpg"
    photos[1]="photo2.jpg"
    photos[2]="photo3.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
    
    if(document.getElementById)
    document.write('<style type="text/css">#prev {visibility:hidden;}<\/style>');
    
    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){
    if(document.getElementById)
    document.getElementById('next').style.visibility='visible';
    which--
    applyeffect()
    document.images.photoslider.src=photos[which]
    playeffect()
    keeptrack()
    }
    if(which==0&&document.getElementById)
    document.getElementById('prev').style.visibility='hidden';
    }
    
    function forward(){
    if (which<photos.length-1){
    if(document.getElementById)
    document.getElementById('prev').style.visibility='visible';
    which++
    applyeffect()
    document.images.photoslider.src=photos[which]
    playeffect()
    keeptrack()
    }
    if(which==photos.length-1&&document.getElementById)
    document.getElementById('next').style.visibility='hidden';
    }
    
    function transport(){
    window.location=photoslink[which]
    }
    
    </script>
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%" colspan="2" height="22"><center>
    <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="50%" height="21"><p align="left"><a id="prev" href="#" onClick="backward();return false">Previous Slide</a></td>
        <td width="50%" height="21"><p align="right"><a id="next" href="#" onClick="forward();return false">Next Slide</a></td>
      </tr>
    </table>
    
    <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
    <a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,625
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Yes John it is better to use visibility than display. Was changing the code a bit quicker and haven't thought about the layout distortion.

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
  •