PDA

View Full Version : 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:


$(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:



<!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:
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:


// 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:


div.img_a {
display: block;
}
div.sel {
display: block !important;
}

HTML:


<!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:


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