Hello, everyone!
I'm newbie in jQuery. Tried to make a gallery with thumbnails and "next/prev" buttons navigation.
Then I've get lost in all the functions, so I stuck.
For now, the buttons just move the slider with a thumbs, but they don't select them. Here comes a code:
- var x=1;
$(document).ready(function(){
$(".tmb_slider img").click(function(){
$("#pic").attr({"src":"gallery/big_thumbs/"+$(this).attr('ct')})
$(".tmb_slider img").css({
"border":"2px solid #FFFFFF"
})
$(this).css({
"border":"2px solid #FD7600"
})
})
- function picSlider(){
- var slideWrap = jQuery('.tmb_slider');
var nextLink = jQuery('.right_arr');
var prevLink = jQuery('.left_arr');
var slideWidth = jQuery('.tumbnail').outerWidth();
var newLeftPos = slideWrap.position().left - slideWidth;
nextLink.click(function(){
if( nextLink.attr('name') == 'next' ) {
nextLink.removeAttr('name');
-
- slideWrap.animate({left: newLeftPos}, 500, function(){
slideWrap
.find('.thumbnail:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0,
'margin-left':'10px'});
});
setTimeout(function(){ nextLink.attr('name','next') }, 600);
- }
});
prevLink.click(function(){
if( prevLink.attr('name') == 'prev' ) {
prevLink.removeAttr('name');
slideWrap
.css({'left': newLeftPos})
.find('.thumbnail:last')
.prependTo(slideWrap)
.parent()
.animate({left: 0}, 500);
- setTimeout(function(){ prevLink.attr('name','prev') }, 600);
}
});
- }
picSlider();
})
And that's the gallery itself:
- <div class="gallery">
<div class="b_photo">
<img src="gallery/big_thumbs/<?=$gallery[0]['gallery_src'];?>" id="pic" />
</div><!-- b_photo -->
- <div class="thumb_box">
<div class="left_arr" name="prev"></div>
<div class="tmb_slidearea">
<div class="tmb_slider">
- <?
foreach($gallery as $gkey=>$gval)
{
if($gkey == 0)
echo '<img ct="'.$gval['gallery_src'].'" src="gallery/small_thumbs/'.$gval['gallery_src'].'" id="pic'.$gval['gallery_id'].'" class="thumbnail" style="border-color:#FD7600;" />';
else
echo '<img ct="'.$gval['gallery_src'].'" src="gallery/small_thumbs/'.$gval['gallery_src'].'" id="pic'.$gval['gallery_id'].'"class="thumbnail" />';
}
?>
</div><!-- tmb_slider -->
</div><!-- tmb_slidearea -->
<div class="right_arr" name="next"></div>
<div style="clear:both;"></div>
</div><!-- thumb_box -->
</div><!-- gallery -->
<?}?>
Could someone help me to fix that?
Thanks a lot.