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 10 of 10
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Arrow adding back forward buttons in gallery

    I have an image gallery and wish to add previous and next buttons to work alongside the numbered links

    here is the page with the javascript and html.
    ------------------------------------------------------------------
    <!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">

    <link rel="stylesheet" type="text/css" href="../css/gallery.css">
    <script type="text/javascript">
    // Gallery script.
    // With image cross fade effect for those browsers that support it.
    // Script copyright (C) 2004 www.cryer.co.uk.
    // Script is free to use provided this copyright header is included.
    function LoadGallery(pictureName,imageFile,titleCaption,captionText)
    {
    var picture = document.getElementById(pictureName);
    if (picture.filters)
    {
    picture.style.filter="blendTrans(duration=1)";
    picture.filters.blendTrans.Apply();
    }
    picture.src = imageFile;
    if (picture.filters)
    {
    picture.filters.blendTrans.Play();
    }
    document.getElementById(titleCaption).innerHTML=captionText;
    }
    </script>


    <script type="text/JavaScript">
    function activate(link){
    if(document.getElementById)
    document.getElementById(link).focus();
    else if (document.all)
    document.all(link).focus();
    }
    </script>





    </head>




    <body onload="activate('act');">

    <!-- Begin Wrapper -->
    <div id="wrapper">



    <!-- Begin Left Column -->
    <div id="topbar" class="center"><a href="1.jpg">Pop Music Quiz - Esquire (UK)
    </a> </div>



    <div id="content_holder">


    <div id="content_box2"><img src="../images/Portraits/1.jpg" alt="Photo gallery" name="portraits1" width="666" height="450" id="portraits1"> </div>


    <div id="footer" align="center">&lt;&nbsp;

    <a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/1.jpg','topbar','Pop Music Quiz - Esquire (UK)')">1</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/2.jpg','topbar','Ronnie Wood - Personal')">2</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/3.jpg','topbar','Denys Lasdun - Guardian Review')">3</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/4.jpg','topbar','Sam West - Guardian Review')">4</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/5.jpg','topbar','Alan Lamb - Brown Shipley Bank ')">5</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/6.jpg','topbar','Tony Blair V’s Gordon Brown - FT ')">6</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/7.jpg','topbar','Bruce Willis - Times Eye')">7</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/8.jpg','topbar','The Thick Of It - Guardian Guide')">8</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/9.jpg','topbar','President Mugabe - Personal')">9</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/10.jpg','topbar','Conrad Black - FT')">10</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/11.jpg','topbar','Ricardo Mutti - Independent')">11</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/12.jpg','topbar','Gordon Brown and Alistair Darling - GQ')">12</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/13.jpg','topbar','Mickey Rourke - Jack')">13</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/14.jpg','topbar','Brits and Germans - Legal Business')">14</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/15.jpg','topbar','Orphan Pamuk - Guardian Guide')">15</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/16.jpg','topbar','Jude Law - Independent ')">16</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/17.jpg','topbar','Yasser Arafat - Personal')">17</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/18.jpg','topbar','Graham Greene - Guardian Review ')">18</a
    > - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/19.jpg','topbar','Russian Presidents - FT')">19</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/20.jpg','topbar','Wacko Jacko - Personal')">20</a> &nbsp;&gt;&nbsp;&nbsp;<a href="../../index.html" target="_parent">[ home ]</a> </div>


    </div>



    </div>
    <!-- End Wrapper -->

    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have you checked the lightbox gallery?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    cscwebmaster (04-11-2009)

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi thanks for the quick reply i actually wanted to keep the script i have and work around it, i believe the lightbox gallery is something else. but thanks......

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Well, the whole thing seems *WAY* overcomplicated. I'd rather see you rewrite it in about half the space.

    But...

    Yeah, I think I see a way to do it.

    First, change your JS code to this:
    Code:
    <script type="text/javascript">
    var currentImage = 1;
    
    function LoadGallery(pictureName,imageFile,titleCaption,captionText)
    {
        // extract the picture number from the imageFile name
        var fname = imageFile.substring( imageFile.lastIndexOf("/") + 1 );
        currentImage = parseInt(fname); // will ignore the ".jpg"
    
        // rest the same
        var picture = document.getElementById(pictureName);
        if (picture.filters)
        {
            picture.style.filter="blendTrans(duration=1)";
            picture.filters.blendTrans.Apply();
        }
        picture.src = imageFile;
        if (picture.filters)
        {
            picture.filters.blendTrans.Play();
        }
        document.getElementById(titleCaption).innerHTML = captionText;
    }
    
    function moveBy(what)
    {
        // where is user asking us to move to??
        var moveTo = currentImage + what;
        if ( moveTo < 1 || moveTo > 20 ) return; // can't move too far left or right
        // move is okay...so save where we moved to
        currentImage = moveTo;
    
        var footer = document.getElementById("footer");
        // get the array of all <a> elements in the footer:
        var links = footer.getElementsByTagName("a");
        // and then click on that link:
        links[currentImage].click( ); 
    }
    </script>
    Then add the Previous and Next links in your HTML, thus:
    Code:
    <div id="footer" align="center">&lt;&nbsp;
    <a href="#_self" onclick="moveBy(-1)">Previous</a>
    - <a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/1.jpg','topbar','Pop Music Quiz - Esquire (UK)')">1</a>
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/2.jpg','topbar','Ronnie Wood - Personal')">2</a>
    ...
    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/20.jpg','topbar','Wacko Jacko - Personal')">20</a>
     - <a href="#_self" onclick="moveBy(1)">Next</a>
    &nbsp;&gt;&nbsp;&nbsp;<a href="../../index.html" target="_parent">[ home ]</a> </div>
    </div>
    I think that will do it, but 100% NOT TESTED.

    NOTE: I put the PREVIOUS and NEXT links *inside* the <DIV id="footer"> and if you change them to outside that div the code will need to change.

    As it is, the PREVIOUS link becomes links[0] and the NEXT becomes links[21] and so the image links are numbered 1 through 20 and correspond to their image numbers. If you move PREVIOUS and NEXT outside the footer, then your image links will be numbers 0 through 19. Minor adjustment to make.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    If you don't mind a suggestion for simplifying all that...
    Code:
    <script type="text/javascript">
    var currentImage = 1;
    
    function LoadGallery(picNum, captionText)
    {
        currentImage = picNum; // save current picture number
    
        // rest the same
        var picture = document.getElementById("portraits1");
        if (picture.filters)
        {
            picture.style.filter="blendTrans(duration=1)";
            picture.filters.blendTrans.Apply();
        }
        picture.src = "../images/Portraits/" + picNum + ".jpg";
        if (picture.filters)
        {
            picture.filters.blendTrans.Play();
        }
        document.getElementById("topbar").innerHTML = captionText;
    
        return false; // cancel the click
    }
    
    function moveBy(what)
    {
        // where is user asking us to move to??
        var moveTo = currentImage + what;
        if ( moveTo < 1 || moveTo > 20 ) return; // can't move too far left or right
        // move is okay...so save where we moved to
        currentImage = moveTo;
    
        var footer = document.getElementById("footer");
        // get the array of all <a> elements in the footer:
        var links = footer.getElementsByTagName("a");
        // and then click on that link:
        links[currentImage].click( ); 
       
        return false; // cancel the click
    }
    </script>
    And then simplify the HTML:
    Code:
    <div id="footer" align="center">&lt;&nbsp;
    <a onclick="return moveBy(-1)">Previous</a>
    - <a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" 
         onclick="return LoadGallery(1,'Pop Music Quiz - Esquire (UK)')">1</a>
    - <a onclick="return LoadGallery(2,'Ronnie Wood - Personal')">2</a>
    - <a onclick="return LoadGallery(3,'Denys Lasdun - Guardian Review')">3</a>
    - <a onclick="return LoadGallery(4,'Sam West - Guardian Review')">4</a>
    - <a onclick="return LoadGallery(5,'Alan Lamb - Brown Shipley Bank ')">5</a>
    - <a onclick="return LoadGallery(6,'Tony Blair V’s Gordon Brown - FT ')">6</a>
    - <a onclick="return LoadGallery(7,'Bruce Willis - Times Eye')">7</a>
    - <a onclick="return LoadGallery(8,'The Thick Of It - Guardian Guide')">8</a>
    - <a onclick="return LoadGallery(9,'President Mugabe - Personal')">9</a>
    - <a onclick="return LoadGallery(10,'Conrad Black - FT')">10</a>
    - <a onclick="return LoadGallery(11,'Ricardo Mutti - Independent')">11</a>
    - <a onclick="return LoadGallery(12,'Gordon Brown and Alistair Darling - GQ')">12</a>
    - <a onclick="return LoadGallery(13,'Mickey Rourke - Jack')">13</a>
    - <a onclick="return LoadGallery(14,'Brits and Germans - Legal Business')">14</a>
    - <a onclick="return LoadGallery(15,'Orphan Pamuk - Guardian Guide')">15</a>
    - <a onclick="return LoadGallery(16,'Jude Law - Independent ')">16</a>
    - <a onclick="return LoadGallery(17,'Yasser Arafat - Personal')">17</a>
    - <a onclick="return LoadGallery(18,'Graham Greene - Guardian Review ')">18</a>
    - <a onclick="return LoadGallery(19,'Russian Presidents - FT')">19</a>
    - <a onclick="return LoadGallery(20,'Wacko Jacko - Personal')">20</a>
    - <a onclick="return moveBy(1)">Next</a>
    &nbsp;&gt;&nbsp;&nbsp;<a href="../../index.html" target="_parent">[ home ]</a> </div>
    </div>

  • Users who have thanked Old Pedant for this post:

    cscwebmaster (04-12-2009)

  • #6
    New Coder
    Join Date
    Apr 2009
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thank you old pedant

    Hi thanks for your help it all works great, It does everything I wanted it to do. once again many thanks. you are great.

  • #7
    New Coder
    Join Date
    Apr 2009
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi I just noticed that the image number link
    doesnt turn orange when its selected using the next and previous button is there a way of doing this????

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    I don't see anything in the original code that did that.

    The only color changing in the original was here:
    Code:
    - <a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" 
         onclick="return LoadGallery(1,'Pop Music Quiz - Esquire (UK)')">1</a>
    But that was just for onfocus/onblur AND just for that first link. If you clicked on the link and then clicked anywhere else on the page, the color would change back. (That is, you wouldn't have to click on another link to make it go away.) AND it was just for that ONE link.

    I didn't change any of the functionality of LoadGallery when it comes to filters, etc. So dunno why any action on that would have changed.

    If you really mean you want the orange when the mouse is *OVER* any of those links, then let's fix it right:

    Change that first link to:
    Code:
    - <a id="act"  
         onclick="return LoadGallery(1,'Pop Music Quiz - Esquire (UK)')">1</a>
    That is, get rid of the focus/blur stuff.

    And then add this to your <style> section (or create a style section of you don't have one):
    Code:
    <style>
    #footer a:hover { color: #ff9900; }
    </style>
    But if you want to change the clicked on link to orange and you do *NOT* want clicking just anywhere on the page to change it back, then...

    ONCE AGAIN UNTESTED!
    Code:
    <script type="text/javascript">
    var currentImage = 1;
    
    function LoadGallery(picNum, captionText)
    {
        var footer = document.getElementById("footer");
        // get the array of all <a> elements in the footer:
        var links = footer.getElementsByTagName("a");
        // and unclick (change color back to normal) of the current link:
        links[currentImage].style.color = "transparent";
    
        // then change which is current image
        currentImage = picNum; // save current picture number
        // and change color of new current link:
        links[currentImage].style.color = "#ff9900";
    
        // rest the same
        var picture = document.getElementById("portraits1");
        if (picture.filters)
        {
            picture.style.filter="blendTrans(duration=1)";
            picture.filters.blendTrans.Apply();
        }
        picture.src = "../images/Portraits/" + picNum + ".jpg";
        if (picture.filters)
        {
            picture.filters.blendTrans.Play();
        }
        document.getElementById("topbar").innerHTML = captionText;
    
        return false; // cancel the click
    }
    
    function moveBy(what)
    {
        // where is user asking us to move to??
        var moveTo = currentImage + what;
        if ( moveTo < 1 || moveTo > 20 ) return; // can't move too far left or right
    
        var footer = document.getElementById("footer");
        // get the array of all <a> elements in the footer:
        var links = footer.getElementsByTagName("a");
        // and then click on that link:
        links[moveTo].click( ); 
       
        return false; // cancel the click
    }
    </script>
    You probably want to set the color of the first link to orange just to get things started.

    So:
    Code:
    - <a id="act" style="color: #ff9900;"
         onclick="return LoadGallery(1,'Pop Music Quiz - Esquire (UK)')">1</a>

  • Users who have thanked Old Pedant for this post:

    cscwebmaster (04-12-2009)

  • #9
    New Coder
    Join Date
    Apr 2009
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    thanks once again old penant

    That script worked a treat....i only had to add alter link style color from transparency to #ffffff as it was coming up black which i guess is the default,
    but once again thanks. you are a star: thumbsup:

  • #10
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Code:
    var links = footer.getElementsByTagName("a");
     // and then click on that link:
     links[moveTo].click( ); 
    Calling the click() method from an anchor tag works only in IE.

    The click() method is cross-browser when associated with a button object.

    See, w3schools.


  •  

    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
    •