Member Avatar for LastMitch

Hi

I recently create a Simple JQuery code with captions with some help from other Daniweb members:

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/434987/havent-issue-with-seeing-alt-with-image-in-jquery

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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.