Image Gallery

**garret** · 03-02-2010, 10:39 PM

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

**Nile** · 03-02-2010, 11:48 PM

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!

**rangana** · 03-03-2010, 01:42 AM

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.

Thread: Image Gallery

Thread Tools

Search Thread

Image Gallery

Bookmarks

Bookmarks

Posting Permissions