1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

jQuery "next" button for photo gallery

Discussion in 'jQuery' started by icydash, Sep 11, 2013.

0
  1. #1
    Hi guys.

    I'm working on creating an extremely basic jQuery photo gallery. Everything works for the most part, but now I've tried to add in "next" and "previous" arrows to go to the next or previous image. Nothing I've tried seems to work. The code can be found live at http://quickid.net/gallery/gallery.html.

    The HTML code is:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Trail</title>

    <script type="text/javascript" src="js/jquery_gallery.js"></script>
    <link type="text/css" href="css/style_gallery.css" rel="stylesheet" media="screen" />
    <script type="text/javascript" src="js/scripts_gallery.js"></script>

</head>
<body>

    <div id="header">
        <center>Bedford, MA</center>
    </div>

    <!-- wrapper element for the large image -->
    <div id="image_wrap">
        <div id="prev"></div>
        <div id="next"></div>

        <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
        <img src="images/blank.gif" width="1" height="1" />

    </div>

    <div id="desc">This is a short description.
        <div id="edit_description"><a href="#"><img src='images/edit.png' border=0></a></div>
    </div>

    <div style="margin:0 auto; width: 100%;">

              <div id="items">
                      <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
                      <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
                      <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
                      <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
                      <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
                      <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
                      <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
                      <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
                      <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
                      <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
                      <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
                      <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
              </div>

    </div>

</body>
</html>
    HTML:
    The CSS code is:
    
/* ------------------------------------------------*/
/* ----------------->>> HEADER <<<-----------------*/
/* ------------------------------------------------*/
#header {
    width: 100%;
    height: 30px;
    font-family: sans-serif;
    font-size: 15px;
}

/* ------------------------------------------------*/
/* --------------->>> MAIN IMAGE <<<---------------*/
/* ------------------------------------------------*/
#image_wrap {
    /* dimensions */
    width: 860;
    height: 455px;
    margin-bottom: 15px;


    /* centered */
    text-align:center;

    /* some "skinning" */
    background-color:#efefef;
    border:2px solid #fff;
    outline:1px solid #ddd;
    -moz-ouline-radius:4px;
}

#image_wrap img {
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------*/
/* --------------->>> PREV/NEXT <<<----------------*/
/* ------------------------------------------------*/
#prev {
    position: absolute;

    height: 66px;
    width: 26px;
    left: 13px;
    top: 40%;

    background:url('../images/prev.png');
}

#next {
    position: absolute;

    height: 66px;
    width: 26px;
    right: 13px;
    top: 40%;

    background:url('../images/next.png');

}

/* ------------------------------------------------*/
/* ------------->>> DESCRIPTION <<<----------------*/
/* ------------------------------------------------*/
#desc {
    position: absolute;

    height: 50px;
    width: 860px;
    top: 450px;

    background-color: white;

    text-align: left;
    padding: 4px;

      opacity:0.7;
      filter:alpha(opacity=70); /* For IE8 and earlier */

}

/* ------------------------------------------------*/
/* ---------------->>> THUMBS <<<------------------*/
/* ------------------------------------------------*/
#items {
    width: 100%;
}

#items img {
    padding: 1px;
    height: 80px;
    width: 81px;
}


/* ------------------------------------------------*/
/* ------------->>> ACTIVE IMAGE <<<---------------*/
/* ------------------------------------------------*/
.active {
    border:1px solid yellow;
    position:relative;
    cursor:default;
}

/* ------------------------------------------------*/
/* ------------>>>EDIT DESCRIPTION <<<-------------*/
/* ------------------------------------------------*/
#edit_description {
    display: none;
    padding-left: 5px;
}
    HTML:
    The jQuery code is:
    $(document).ready(function() {

    //-------------------------EDIT BUTTON on HOVER--------------------------
    $('#desc').mouseenter(function() {
          $('#edit_description').css('display','inline');
    });

    $('#desc').mouseleave(function() {
          $('#edit_description').css('display','none');
    });

    //-------------------------GALLERY CODE--------------------------
    $("#items img").click(function() {

        // see if same thumb is being clicked
        if ($(this).hasClass("active")) { return; }

        // calclulate large image's URL based on the thumbnail URL (flickr specific)
        var url = $(this).attr("src").replace("_t", "");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap").fadeTo("medium", 0.5);

        // the large image from www.flickr.com
        var img = new Image();


        // call this function after it's loaded
        img.onload = function() {

            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", url);

        };

        // begin loading the image from www.flickr.com
        img.src = url;

        // activate item
        $("#items img").removeClass("active");
        $(this).addClass("active");

    // when page loads simulate a "click" on the first image
    }).filter(":first").click();


});
    HTML:
    Any help on how to make the next and previous arrows work would be really appreciated.
     
    icydash, Sep 11, 2013 IP
  2. Basti

    Basti Active Member

    Messages:
    625
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    90
    #2
    First of all, why reinvent the wheel? there exist so many gallery plugins already which do exactly what you want and even more.

    Now to the issue
    something along this lines should work. Can be further trimmed down to take a few codes into its own function, but it should work and tell you what to do
    $(document).ready(function() {

    //-------------------------EDIT BUTTON on HOVER--------------------------
    $('#desc').mouseenter(function() {
          $('#edit_description').css('display','inline');
    });

    $('#desc').mouseleave(function() {
          $('#edit_description').css('display','none');
    });

    //-------------------------GALLERY CODE-------------------------
    $("#items img").click(function() {

        // see if same thumb is being clicked
        if ($(this).hasClass("active")) { return; }

        // calclulate large image's URL based on the thumbnail URL (flickr specific)
        var url = $(this).attr("src").replace("_t", "");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap").fadeTo("medium", 0.5);

        // the large image from www.flickr.com
        var img = new Image();

        // call this function after it's loaded
        img.onload = function() {
            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", url);
        };

        // begin loading the image from www.flickr.com
        img.src = url;

        // activate item
        $("#items img").removeClass("active");
        $(this).addClass("active");

    // when page loads simulate a "click" on the first image
    }).filter(":first").click();

    $("#prev, #next").click(function() {

        var current = $("#items img.active"); // Current active thumbnail

        var direction = $(this).attr('id'); // Get the direction
        if(direction == 'next') {
            var show_img = current.next();
            if(current.is(':last-child')) {
                show_img = current.siblings(':first'); // If last img show first
            }
        }
        else if(direction == 'prev') {
             var show_img = current.prev();
             if(current.is(':first-child')) {
                show_img = current.siblings(':last'); // If first img show last
            }
        }

        // calclulate large image's URL based on the thumbnail URL (flickr specific) of "show_img"
        var url = show_img.attr("src").replace("_t", "");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap").fadeTo("medium", 0.5);

        // the large image from www.flickr.com
        var img = new Image();

        // call this function after it's loaded
        img.onload = function() {
            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", url);
        };

        // begin loading the image from www.flickr.com
        img.src = url;

        // activate item
        current.removeClass("active");
        show_img.addClass("active");

    });

});
    HTML:
    This code also starts from first item if you reached the last and click next.
    And start from last if you click previous while being the first
    If you dont want that, you should change
                    if(current.is(':last-child')) {
                    show_img = current.siblings(':first'); // If last img show first
                }
    HTML:
    and hide the next button instead
     
    Basti, Sep 12, 2013 IP