Results 1 to 3 of 3

Thread: Image Gallery

  1. #1
    Join Date
    Mar 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Gallery

    Hi guys. I wanted to show you a gallery that I am doing. I'm stuck here with some issue. I've made the gallery with the buttons but now I wanted to add a previous and next button but I not being able to do. all the rest is working.

    the javascript code is this:

    Code:
    $(function () {
    var imgContainers = $('div.tabs > div');
    imgContainers.hide().filter(':first').show();
    			
    $('div.tabs ul.number_nav a').click(function () {
    imgContainers.hide();
    imgContainers.filter(this.hash).show();
    $('div.tabs ul.number_nav a').removeClass('selected');
    $(this).addClass('selected');
    return false;
    }).filter(':first').click();
    });
    the html file is this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>gallery</title>
    
    <!--CSS-->
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    <!--JavaScript-->
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    
    <script type="text/javascript" src="code.js"></script>
    
    </head>
    <body>
    <div id="gallery"><!--IMG CONTAINER START -->
    <div class="tabs">
    
    <div id="image_01">
    <div class="image">
    <img src="image_one.png" width="795" height="395" />
    </div>
    </div>
    
    <div id="image_02" >
    <div class="image">
    <img src="image_two.png" width="795" height="395" />
    </div>
    </div>
    
    <div id="image_03">
    <div class="image">
    <img src="and_so_on.png" width="795" height="395" />
    </div>
    </div>
    
    
    <ul class="number_nav">
    <li><a href="#image_01">01</a></li>
    <li><a href="#image_02">02</a></li>
    <li><a href="#image_03">03</a></li>
    </ul>
    
    <ul class="prev_next_nav">
    <li><a href="#">Previous</a></li> 
    / <li><a href="#">Next</a></li>
    </ul>
    </div>
    </div>
    
    </body>
    </html>
    here is the zip file:
    Attachment 3175

    can someone help me to make the code to the previous / next code please? I'm not very good ( nothing at all ) with javascript...
    thanks in advance

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Javascript:
    Code:
    // JavaScript Document
    // Previous Next Navigation
    
    
    // Number Navigation
    $(function () {
    var imgContainers = $('div.tabs > div');
    var cur;
    var cur_d;
    imgContainers.hide().filter(':first').show();
    			
    $('div.tabs ul.number_nav a').click(function () {
    imgContainers.hide();
    imgContainers.removeClass("sel");
    imgContainers.filter(this.hash).show();
    imgContainers.filter(this.hash).addClass("sel");
    $('div.tabs ul.number_nav a').removeClass('selected');
    $(this).addClass('selected');
    return false;
    }).filter(':first').click();
    $('div.tabs ul.prev_next_nav a').click(function () {
      if(this.hash == "#next"){
        cur = $('div.tabs').find('div.sel').hide();
    	cur.removeClass("sel");
    	cur.next().addClass('sel');
        cur_d = $('div.tabs ul.number_nav a.selected').removeClass('selected');
    	cur_d.parent().next().find("a").addClass('selected');
      } else {
        cur = $('div.tabs').find('div.sel').hide();
    	cur.removeClass("sel");
    	cur.prev().addClass('sel');
        cur_d = $('div.tabs ul.number_nav a.selected').removeClass('selected');
    	cur_d.parent().prev().find("a").addClass('selected');
      }
    });
    
    })
    Add this to the bottom of the css:
    Code:
    div.img_a {
      display: block;
    }
    div.sel {
      display: block !important; 
    }
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>gallery</title>
    
    <!--CSS-->
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    <!--JavaScript-->
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    
    <script type="text/javascript" src="code.js"></script>
    
    </head>
    <body>
    <div id="gallery"><!--IMG CONTAINER START -->
    <div class="tabs">
    
    <div class="img_a" id="image_01">
    <div class="image">
    <img src="image_one.png" width="795" height="395" />
    </div>
    </div>
    
    <div class="img_a" id="image_02" >
    <div class="image">
    <img src="image_two.png" width="795" height="395" />
    </div>
    </div>
    
    <div class="img_a" id="image_03">
    <div class="image">
    <img src="and_so_on.png" width="795" height="395" />
    </div>
    </div>
    
    
    <ul class="number_nav">
    <li><a href="#image_01">01</a></li>
    <li><a href="#image_02">02</a></li>
    <li><a href="#image_03">03</a></li>
    </ul>
    
    <ul class="prev_next_nav">
    <a href="#prev">Previous</a>
    / <a href="#next">Next</a>
    </ul>
    </div>
    </div>
    
    
    </body>
    
    </html>
    Good luck!
    Jeremy | jfein.net

  3. #3
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    With your current HTML-code, a simple change with your script as:
    Code:
    $(function () {
    var imgContainers = $('div.tabs > div');
    imgContainers.hide().filter(':first').show();
    			
    $('div.tabs ul.number_nav a').click(function () {
    imgContainers.hide();
    imgContainers.filter(this.hash).show();
    $('div.tabs ul.number_nav a').removeClass('selected');
    $(this).addClass('selected');
    return false;
    }).filter(':first').click();
    
    // Previous Next Navigation
    $('ul.prev_next_nav a').click(function () {
    		var num = Number($('div.tabs > div:visible').attr('id').split('_')[1]);
    		
    		if($(this).text() == 'Next') {
    			if (num < ($('div.tabs > div').size())) {
    				imgContainers.hide().eq(num).animate({width:'toggle'},'slow');
    				$('div.tabs ul.number_nav a').eq(num).addClass('selected');
    				$('div.tabs ul.number_nav a').eq(num-1).removeClass('selected');
    			}
    		}
    		else {
    			if (num > 1 ) {
    				imgContainers.hide().eq(num-2).animate({width:'toggle'},'slow');
    				$('div.tabs ul.number_nav a').eq(num-2).addClass('selected');
    				$('div.tabs ul.number_nav a').eq(num-1).removeClass('selected');
    			}
    		}
    	});
    	
    	});
    ...should be enough.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

Bookmarks

Posting Permissions

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