Menu
Im having an issue with the next and previous buttons on my image gallery. do to the design of the image gallery the next and previous buttons have to be outside of the div with the images.
here is the body:
div id=”imageGallery”>
<a class=”next” href=”#”>next</a>
<a class=”previous” href=”#”>prev</a>
<a class=”startover” href=”#”>prev</a>
<div id=”container”>
<ul>
<li><img id=”test” src=”img/img1.png” /></li>
<li><img src=”img/img2.png” /></li>
<li><img src=”img/img3.png”/></li>
<li><img src=”img/img4.png” /></li>
<li><img src=”img/img5.png” /></li>
</ul>
</div>
</div>
here is the jqeury:
$(window).load(function() {
var theImage = $(‘ul li img’);
var theWidth = theImage.width();
//wrap into mother div
$(‘ul’).wrap(‘<div id=”mother” />’);
//assign height width and overflow hidden to mother
$(‘#mother’).css({
width: function() {
return theWidth;
},
height: function() {
return theImage.height();
},
position: ‘relative’,
overflow: ‘hidden’
});
//get total of image sizes and set as width for ul
var totalWidth = theImage.length * theWidth;
$(‘ul’).css({
width: function(){
return totalWidth;
}
});
$(theImage).each(
function(intIndex){
$(this).nextAll()
.bind(“click”, function(){
if($(this).is(“.next”)) {
$(this).find(‘div#container ul li’).animate({
“margin-left”: (-(intIndex + 1) * theWidth)
}, 1000)
} else if($(this).is(“.previous”)){
$(this).find(‘div ul li’).animate({
“margin-left”: (-(intIndex – 1) * theWidth)
}, 1000)
} else if($(this).is(“.startover”)){
$(this).find(‘div ul li’).animate({
“margin-left”: (0)
}, 1000)
}
});//close .bind()
});//close .each()
});//doc ready
and finally the css:
div#container{border:1px solid #666666; -moz-border-radius:6px; -webkit-border-radius:6px; padding:13px; clear:both; overflow:hidden; width:652px; position:relative; top:35px; margin:0 auto; background:#ebebeb no-repeat; -moz-box-shadow: 0px 45px 33px -32px #000; -webkit-box-shadow: 0px 45px 33px -32px #000; box-shadow: 0px 45px 33px -32px #000; display:block;}
div#imageGallery a.next{background:url(img/next.png); width:57px; height:138px; position:absolute; left:6px; top:100px;}
div#imageGallery a.previous{background:url(img/prev.png); width:57px; height:138px; position:absolute; left:6px; top:100px;}
div#imageGallery a.startover{background:url(img/next.png); width:57px; height:138px; position:absolute; left:6px; top:100px;}