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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery "next" button for photo gallery

    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:
    Code:
    <!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>
    The CSS code is:
    Code:
    /* ------------------------------------------------*/
    /* ----------------->>> 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;
    }
    The jQuery code is:
    Code:
    $(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();
    
    
    });
    Any help on how to make the next and previous arrows work would be really appreciated.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    if it hits the last image , it will then go back to the start, and vice versa. number of images wont matter.

    Code:
    $("#next").click(function () {
        // see if same thumb is being clicked
        var firstImage = $("#items img:first")
        var nextImage = $("#items img.active").next();
        var imageIndex = nextImage.index();
        var url;
    
        if (imageIndex === -1) {
            url = firstImage.attr("src").replace("_t", "");
    
            // activate item
            $("#items img").removeClass("active");
            firstImage.addClass("active");
        } else {
            // calclulate large image's URL based on the thumbnail URL (flickr specific)
            url = nextImage.attr("src").replace("_t", "");
    
            // activate item
            $("#items img").removeClass("active");
            nextImage.addClass("active");
        }
        // 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
            $("#image_wrap").find("img").attr("src", url);
    
        };
    
        // begin loading the image from www.flickr.com
        img.src = url;
    })
    $("#prev").click(function () {
        // see if same thumb is being clicked
        var prevImage = $("#items img.active").prev()
        var lastImage = $("#items img:last")
        var imageIndex = prevImage.index();
        var url;
    
        if (imageIndex === -1) {
            url = lastImage.attr("src").replace("_t", "");
    
            // activate item
            $("#items img").removeClass("active");
            lastImage.addClass("active");
        } else {
            // calclulate large image's URL based on the thumbnail URL (flickr specific)
            url = prevImage.attr("src").replace("_t", "");
    
            // activate item
            $("#items img").removeClass("active");
            prevImage.addClass("active");
        }
        // 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
            $("#image_wrap").find("img").attr("src", url);
    
        };
    
        // begin loading the image from www.flickr.com
        img.src = url;
    })
    Last edited by DanInMa; 09-11-2013 at 10:12 PM. Reason: removed console.log()'s

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect, thanks!

    Also, do you know how I can make the gallery start on a certain image when it first opens ... for example, image #5, instead of image #1 every time?

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    well you are currently setting it in the html, jsut give the desired image the active class

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I figured it out, woohoo! Thanks!


  •  

    Posting Permissions

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