www.webdeveloper.com
Results 1 to 9 of 9

Thread: image sequence skips first image

  1. #1
    Join Date
    Dec 2011
    Posts
    5

    image sequence skips first image

    I made an image gallery, and I used a script to put them in an array, so people can browse through them using previous/next buttons.
    I think it may be a very oldfashioned script, but I don't know anything about javascript, and this one seemed simpler than others to modify.

    With some help I added a function that shows how many images there are and the number of the image you are seeing (photo 1/6 for example)

    The problem is that the script seems to skip counting the first image, it calls the second one 'photo 1/6', doesn't allow you to go back to the first and stops at the fifth. I tried to add a window.onload function, but I think I did it wrong, or it doesnt work because of other scripts that are also loaded on the page (JqueryBeforeAfter).
    Could anyone help me to fix this? I would really appreciate it.
    Also don't hessitate to tell me what I am doing wrong, I really want to learn!


    Here is the script I used:
    Code:
    <!-- script created by : THeMaRTy     -->
     <!-- website: http://marty.excudo.net -->
    var count=0;
     var link_array = new Array();
     link_array[0] = '#container1';
     link_array[1] = '#container2';
     link_array[2] = '#container3';
     link_array[3] = '#container4';
     link_array[4] = '#container5';
     link_array[5] = '#container6';
      // skip fwd
        
     function next()
     {
    	 
     
            if ((count + 1) >= link_array.length)
    		
            {
            }
            else
            {
                    count = count + 1;
                    document.location.href = link_array[count];
    				document.getElementById("thecounter").innerHTML= "foto " + count + "/" +  link_array.length
            }
     }
      // skip back
     function previous()
     {
    	 
     
            if ((count - 1) <= 0)
    		
            {
            }
            else
            {
                    count = count - 1;
                    document.location.href = link_array[count];
    				document.getElementById("thecounter").innerHTML= "foto " + count + "/" +  link_array.length
            }
    
     }
    Thank you for reading my message.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443

    Lightbulb See if this makes any sense to you ...

    Two things to change.

    1. You increment the 'count' variable before you display the picture.
    Since you initialize count to 0, when next() is called the first time you increment it to 1
    and therefore skip the first image display.

    2. You do nothing when you increment or decrement the count value after testing
    if count is >= link_array.length or <=0.

    Fix for problems #1 and #2 is...
    Code:
        
    function next() {
      document.location.href = link_array[count];
      document.getElementById("thecounter").innerHTML
        = "foto " + count + "/" +  link_array.length;
      count += 1;
      if (count >= link_array.length) { count = 0; } // rotates to start of array
    }
      // skip back
    function previous() {
      document.location.href = link_array[count];
      document.getElementById("thecounter").innerHTML
        = "foto " + count + "/" +  link_array.length
      count -= 1;
      if (count < 0) { count = link_array.length-1; } // rotate to end of array list
    }
    Untested, but logic should work better than original.

  3. #3
    Join Date
    Mar 2011
    Posts
    65
    Quote Originally Posted by tadum View Post
    Could anyone help me to fix this? I would really appreciate it.
    Also don't hessitate to tell me what I am doing wrong, I really want to learn!
    I think you're "over scienceing" the code by having a separate function for the previous and next buttons.

    You can use just one function to swap the images and pass the direction of the image swap (next or previous) to the function.

    This is a simple plain vanilla demo of what I mean:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var picPaths = ['num1.jpg','num2.jpg','num3.jpg','num4.jpg'];
                //preload the images to ensure they are available after page finishes loading
                var picsO = [];
                for(i=0; i<picPaths.length; i++){
                    picsO[i] = new Image();
                    picsO[i].src = picPaths[i];
                }
                var curPic = -1;
                function swapImage(dirn){
                    curPic += dirn;
                    if(curPic < 0) {curPic = 0;}
                    if(curPic > picsO.length-1) {curPic = picsO.length-1;}
                    imgGalleryO.src = picsO[curPic].src;
                    imgCounterO.innerHTML = (curPic+1) + ' of ' + picsO.length;
                }
                window.onload=function(){
                    imgGalleryO = document.getElementById('imgGallery');
                    imgCounterO = document.getElementById('imgCounter');
                    swapImage(1);
                }
            </script>
        </head>
        <body>
            <div>
                <img id="imgGallery" src="" alt="" />
                <p id="imgCounter"></p>
            </div>
            <div>
                <a href="" onclick="swapImage(-1); return false;">Previous</a>
                <a href="" onclick="swapImage(1); return false;">Next</a>
            </div>
        </body>
    </html>
    Last edited by webdev1958; 12-19-2011 at 02:52 AM.

  4. #4
    Join Date
    Dec 2011
    Posts
    5
    Thank you both for your quick reply.
    I tried the fix JMRKER gave me, and it did actually help me, but it presented a new problem. The "counter" shows only after the "next" button is clicked, but then you stay at image one and the script calls this one 0/6.
    After that it works perfectly (and great how you can skip from the first to the last image immediately and further in a circle), but I would like it to count as humans do, instead of from zero as computers do.

    I am going to try the script webdev1958 gave me as well, but since I put all the images in divs (this was necessary because I'm also using the JqueryBeforeAfter plugin, which requires using divs) I'm not sure how to get it working together, but I'll try and get back to you with the results.

    Any further tips or advice are still welcome, and I'll post here when I find a solution myself/elsewhere.

  5. #5
    Join Date
    Mar 2011
    Posts
    65
    I'm not following how your gallery works.

    The code I posted rotates the images in the array through a single <img> with the next/previous links. Perhaps if you post your html and/or describe why you have the images in divs and what, if anything, you want to happen when an image is clicked more clearly, things might be clearer.

    You referred to jquery. You shouldn't need jquery at all for this.

  6. #6
    Join Date
    Dec 2011
    Posts
    5
    I'll post the full html here:

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="portfoliostyle.css" />
    <script type="text/javascript" src="../js/jquery.min.js">
    </script>
    <script type="text/javascript" src="../js/jquery-ui.min.js">
    </script>
    <script type="text/javascript" src="../js/jquery.beforeafter.js">
    </script>
    
    <title>Untitled Document</title>
    
    <script language="javascript" type="text/javascript">
    //<![CDATA[	   
    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];}}
    }		   
    		   
     var count=0;
     var link_array = new Array();
     link_array[0] = '#container1';
     link_array[1] = '#container2';
     link_array[2] = '#container3';
     link_array[3] = '#container4';
     link_array[4] = '#container5';
     link_array[5] = '#container6';
     
     function next() {
      document.location.href = link_array[count];
      document.getElementById("teller").innerHTML
        = "foto " + count + "/" +  link_array.length;
      count += 1;
      if (count >= link_array.length) { count = 0; } // rotates to start of array
    }
      // skip back
    function previous() {
      document.location.href = link_array[count];
      document.getElementById("teller").innerHTML
        = "foto " + count + "/" +  link_array.length
      count -= 1;
      if (count < 0) { count = link_array.length-1; } // rotate to end of array list
    } 
    window.onload=function() {
    	document.getElementById("teller").innerHTML;
    	MM_preloadImages('photos/landelijkekeuken/lk1v.JPG','photos/landelijkekeuken/lk1n.JPG','photos/landelijkekeuken/lk2v.JPG','photos/landelijkekeuken/lk2n.JPG','photos/landelijkekeuken/lk3v.JPG','photos/landelijkekeuken/lk3n.JPG','photos/landelijkekeuken/lk4v.JPG','photos/landelijkekeuken/lk4n.JPG','photos/landelijkekeuken/lk5.JPG','photos/landelijkekeuken/lk6.JPG','photos/landelijkekeuken/lk7.JPG');
    }
    
    $(function(){
            $('#container1').beforeAfter({
                    showFullLinks: true,
                    });
            $('#container2').beforeAfter({
                    showFullLinks: true,
                    });
            $('#container3').beforeAfter({
                    showFullLinks: true,
                    });
            $('#container4').beforeAfter({
                    showFullLinks: true,
                    });
            $('#container5').beforeAfter({
                    showFullLinks: true,
                    });
            $('#container6').beforeAfter({
                    showFullLinks: true,
                    });
            $('#container7').beforeAfter({
                    showFullLinks: true,
                    });
    });
    //]]>
    
    </script>
    </head>
    <body>
    <div id="container1" class="center">
    <div><img src="photos/landelijkekeuken/lk1v.JPG" width="600" height="400" alt="foto" /></div>
    <div><img src="photos/landelijkekeuken/lk1n.JPG" width="600" height="400" alt="foto" /></div>
    </div>
    <br />
    <div id="container2" class="center">
    <div><img src="photos/landelijkekeuken/lk2v.JPG" width="600" height="400" alt="foto" /></div>
    <div><img src="photos/landelijkekeuken/lk2n.JPG" width="600" height="400" alt="foto" /></div>
    </div>
    <br />
    <div id="container3" class="center">
    <div><img src="photos/landelijkekeuken/lk3v.JPG" width="267" height="400" alt="foto" /></div>
    <div><img src="photos/landelijkekeuken/lk3n.JPG" width="267" height="400" alt="foto" /></div>
    </div>
    <br />
    <div id="container4" class="center">
    <div><img src="photos/landelijkekeuken/lk1v.JPG" width="600" height="400" alt="foto" /></div>
    <div><img src="photos/landelijkekeuken/lk5.JPG" width="600" height="400" alt="foto" /></div>
    </div>
    <br />
    <div id="container5" class="center">
    <div><img src="photos/landelijkekeuken/lk2v.JPG" width="600" height="400" alt="foto" /></div>
    <div><img src="photos/landelijkekeuken/lk6.JPG" width="600" height="400" alt="foto" /></div>
    </div>
    <br />
    <div id="container6" class="center">
    <div><img src="photos/landelijkekeuken/lk3v.JPG" width="267" height="400" alt="foto" /></div>
    <div><img src="photos/landelijkekeuken/lk7.JPG" width="267" height="400" alt="foto" /></div>
    </div>
    <span id="teller" class="tel"></span>
    <input onclick="previous();" type="image" src="../images/buttonprev.png" value="previous" class="c1" /><input onclick="next();" type="image" src="../images/buttonnext.png" value="next" class="c2" />
    </body>
    </html>
    I downloaded the Jquery plugin here: http://www.catchmyfame.com/2009/06/2...eafter-plugin/

    The image gallery is a sequence of before/after images, so by clicking next or previous you skip through sets of images (two at a time). These image-duo's are placed overlapping each other.
    I hope this explanation is more clear.
    I think I should also mention that this page is loaded in an i-frame, which has the same size as one image div, so you see one image div at a time. It works, but I think it could be done in a better way. But since I'm no superman who can learn scripting overnight, it's better to take it step by step, for now.

  7. #7
    Join Date
    Mar 2011
    Posts
    65
    It's clearer but I still don't see why you are trying to do it this way

    1) You are still using 2 separate functions for the next/previous functions when I showed you can easily do it with just 1 function to swap images in both directions.

    2) You have all the images in separate divs but only showing 1 div at a time. So why not cycle all the images through 1 <img> as in the code I posted.

    3) Why on earth are you using jquery? If you want to learn javascript, you really should be learning at least the basics of javascript before playing with jquery. In case you are not aware, all jquery is, is a bunch of javascript functions written by someone else to perform certain tasks. There is absolutely nothing you can do with jquery that cannot be done with plain javascript because jquery is javascript. Jquery is not a new or different language to javascript.

    My recommendation, since you said

    Also don't hessitate to tell me what I am doing wrong, I really want to learn!
    , would be to ditch the jquery you have and do this using just plain javascript. For starters, it will run less code than what jQuery will run.
    Last edited by webdev1958; 12-19-2011 at 06:36 AM.

  8. #8
    Join Date
    Dec 2011
    Posts
    5
    Thank you for the advice, but I think I'm explaining it wrong.
    I'm using the jquery to show two images at a time. (there is an example on the webpage I linked in my last message)
    This worked perfectly, and skipping through the images/divs also worked.
    The problem I needed solved was the counting of the images.

    Do you think it would be better to start all over again?
    I mean by this: first build a new image gallery and after that, try to get it working with the jquery plugin?

  9. #9
    Join Date
    Dec 2011
    Posts
    5
    I found a great javascript tutorial online and I'll come back to this forum once I finished the whole tutorial.
    Thank you very much for your help so far!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles