Hi
I recently create a Simple JQuery code with captions with some help from other Daniweb members:
I got a better understanding how it works. So I decide to add a image count with this code. The past few hours I been trying to modify this code, kinda play around with it. The issue is that I picture this formula works but I am having issue plugin the right words into those spots into order for it to work:
This is the code I been working on:
//show next image
var $next = $('.slideshow');
var $current = 1;
//starting count images
if ($nextSlide().length > 0) {
$next = $nextSlide();
$current++;
} else {
$next = $('img:first');
$current = 1
}
$next.show();
//show all images
$('.currentImage').text($current + "/" + $iCount);
var $imgCount = $('.slideshow img');
var $iCount = $imgCount.length;
//show image with count with total images
$('.slideshow img').click($slides);
$('#totalImages').text($iCount);
}
This is the whole code plus div container I also put comments so you have a better understanding what I'm trying to do:
<script type="text/javascript">
jQuery(function($){
//clicking prev button goes to previous slide
$('.slideshow .prev').click(function() {
prevSlide($(this).parents('.slideshow').find('.slides'));
});
//clicking next button or image goes to next slide
$('.slideshow .next, .slideshow img,').click(function() {
nextSlide($(this).parents('.slideshow').find('.slides'));
});
//initialize show
iniShow();
function iniShow() {
// show first slide with caption
$('.slideshow').each(function() {
showSlide($(this).find('.slides'));
});
}
// move previous slide to top of stack and call showSlide
function prevSlide($slides) {
$slides.find('img:last').prependTo($slides);
showSlide($slides);
}
// move next slide to top of stack and call showSlide
function nextSlide($slides) {
$slides.find('img:first').appendTo($slides);
showSlide($slides);
}
// show slide with caption
function showSlide($slides) {
var $nextSlide = $slides.find('img:first');
//hide (reset) all slides
$slides.find('img').hide();
//fade in next slide
$nextSlide.fadeIn(500);
//show caption
$('#caption').text($nextSlide[0].alt);
//show next image
var $next = $('.slideshow');
var $current = 1;
//starting count images
if ($nextSlide().length > 0) {
$next = $nextSlide();
$current++;
} else {
$next = $('img:first');
$current = 1
}
$next.show();
//show all images
$('.currentImage').text($current + "/" + $iCount);
var $imgCount = $('.slideshow img');
var $iCount = $imgCount.length;
//show image with count with total images
$('.slideshow img').click($slides);
$('#totalImages').text($iCount);
}
});
</script>
<div class="slideshow">
<div class="slides">
<img src="images/01.jpg" width="300" height="500" alt="Caption 1 Image is ..." />
<img src="images/02.jpg" width="200" height="500" alt="Caption 2 Image is ..." />
<img src="images/03.jpg" width="500" height="500" alt="Caption 3 Image is ..." />
<img src="images/04.jpg" width="500" height="500" alt="Caption 4 Image is ..." />
</div>
<p id="caption"></p>
<p id="currentImage" </p>
<div class="controls">
<a class="prev" href="javascript:void(0);">Previous</a> |
<a class="next" href="javascript:void(0);">Next</a>
</div>
</div>
Any suggestions and explanation would be appreciated!
I also want to know am I close to plug in the correct words for this to work? Thanks!