Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Dec 2011
    Posts
    3
    Member #
    30260
    I'm fairly new to javascript and I made an image slideshow, using the JqueryBeforeAfter plugin.
    Since there is a sequence of before/after images I put them in div containers and added them to an array, so the viewer can navigate through them using next/prev buttons. (the page is visible in an i-frame that has the same size as the images, so it shows only 1 div at a time)

    What I would like is a simple "counter" underneath or on top of the images, that tells you where you are: 'photo 1/4' for example.

    I tried to add the following to the script:
    document.getElementById("my_id").innerHTML= count + "van" + link_array.length

    and a div or span in the body with the same id, but it didn't work.
    I'll paste the code 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 name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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>
    <script type="text/javascript">
    //<![CDATA[
    $(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>
    <title>Untitled Document</title>
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
            margin-top: 0px;
            margin-left: 0px;
            overflow:hidden;
            font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #fff;
            background-image:url(../images/portfoliobg.png);
            background-attachment:fixed;
    }
    
    img {
            border:0px;
    }
    
    .center {
            margin:auto;
            width:600px;
    }
    
    .tel {
        position:fixed;
        top:2px;
        left:250px;
        z-index:2000;
    }
    input.c2  {
        position:fixed;
        top:0px;
        right:170px;
        z-index:2000;
    }
    
    input.c1 {
        position:fixed;
        top:0px;
        left:162px;
        z-index:2000;
    
    }
    p {
            position:fixed;
            font-size:12px;
            font-style:normal;
            top:-12px;
            left:265px;
    }
    a:link {
            color:#000000;
            text-decoration:none;
    }
    a:visited {
            color:#000000;
            text-decoration:none;
    }
    a:hover {
            color:#000000;
            text-decoration:underline;
    }
    a:active {
            color:#000000;
            text-decoration:none;
    }
    /*]]>*/
    </style>
    
    <script language="javascript" type="text/javascript">
    //<![CDATA[
    var count=1;
    var link_array = new Array();
    link_array[1] = '#container1';
    link_array[2] = '#container2';
    link_array[3] = '#container3';
    link_array[4] = '#container4';
    link_array[5] = '#container5';
    link_array[6] = '#container6';
      // skip fwd
      
    function next()
    {
        document.getElementById("teller").innerHTML= count + "van" +  link_array.length
    
            if ((count + 1) >= link_array.length)
            {
            }
            else
            {
                    count = count + 1;
                    document.location.href = link_array[count];
    
            }
    }
      // skip back
    function previous()
    {
        document.getElementById("teller").innerHTML= count + "van" +  link_array.length
    
            if ((count - 1) <= 0)
            {
            }
            else
            {
                    count = count - 1;
                    document.location.href = link_array[count];
    
            }
    
    }
    //-->
    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];}}
    }
    //]]>
      
    </script>
    </head>
    <body onload="MM_preloadImages('photos/lk1v.JPG','photos/lk1n.JPG','photos/lk2v.JPG','photos/lk2n.JPG','photos/lk3v.JPG','photos/lk3n.JPG','photos/lk4v.JPG','photos/lk4n.JPG','photos/lk5.JPG','photos/lk6.JPG','photos/lk7.JPG')">
    <div id="container1" class="center">
    <div><img src="photos/lk1v.JPG" width="600" height="400" alt="foto" /></div>
    <div><img src="photos/lk1n.JPG" width="600" height="400" alt="foto" /></div>
    </div>
    <div id="teller" class="tel"></div>
    <br />
    <div id="container2" class="center">
    <div><img src="photos/lk2v.JPG" width="600" height="400" alt="foto" /></div>
    <div><img src="photos/lk2n.JPG" width="600" height="400" alt="foto" /></div>
    </div>
    <div id="teller" class="tel"></div>
    <br />
    <div id="container3" class="center">
    <div><img src="photos/lk3v.JPG" width="267" height="400" alt="foto" /></div>
    <div><img src="photos/lk3n.JPG" width="267" height="400" alt="foto" /></div>
    </div>
    <div id="teller" class="tel"></div>
    <br />
    <div id="container4" class="center">
    <div><img src="photos/lk1v.JPG" width="600" height="400" alt="foto" /></div>
    <div><img src="photos/lk5.JPG" width="600" height="400" alt="foto" /></div>
    </div>
    <div id="teller" class="tel"></div>
    <br />
    <div id="container5" class="center">
    <div><img src="photos/lk2v.JPG" width="600" height="400" alt="foto" /></div>
    <div><img src="photos/lk6.JPG" width="600" height="400" alt="foto" /></div>
    </div>
    <div id="teller" class="tel"></div>
    <br />
    <div id="container6" class="center">
    <div><img src="photos/lk3v.JPG" width="267" height="400" alt="foto" /></div>
    <div><img src="photos/lk7.JPG" width="267" height="400" alt="foto" /></div>
    </div>
    <div id="teller" class="tel"></div>
    <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>
    Hopefully someone can tell me what I am doing wrong.

  2.  

  3. #2
    Junior Member
    Join Date
    Dec 2011
    Posts
    3
    Member #
    30260
    Oops, I found the mistake!
    the code should be underneath the count, instead of above.
    But now there is another problem, the "counter" shows only after I've clicked the next-button, I would like it to show immediately when the site loads.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com