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.
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