/    Sign up×
Community /Pin to ProfileBookmark

Current image count. jQuery slideshow

Copy linkTweet thisAlerts:
May 27.2011

Hello, I write simple slideshow on jQuery but I can’t understand how to change current image count. Help me please.

Here is my current code:

[code=html]<script type=”text/javascript”>
$(document).ready(function(){
$(‘#slideshow img’).hide();
$(‘#slideshow img:first’).show();

function slide(){
var $top = $(‘#slideshow img:visible’);
var $next;

if ($top.next().length > 0)
$next = $top.next();

else
$next = $(‘#slideshow img:first’);
$top.hide();
$next.show();
}
var $imgCount = $(‘#slideshow img’);
var $iCount = $imgCount.length;

$(‘#slideshow img’).click(slide);
$(‘#totalImages’).text($iCount);

});
</script> [/code]

I’m trying make like this 2/45, where 2 – is current image number.
Thank you.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@3NexMay 27.2011 — I'm gonna give you a general idea, i didn't try to run the code so i'm not sure it works. The changes i've made are marked red, the code that i don't understand is grey because i'm not sure if it's supposed to go in the "else" block or not.

[CODE]<script type="text/javascript">
$(document).ready(function(){
$('#slideshow img').hide();
$('#slideshow img:first').show();

function slide(){
var $top = $('#slideshow img:visible');
var $next;
[COLOR="Red"]var $current = 1;[/COLOR]

if ($top.next().length > 0) {
$next = $top.next();
[COLOR="Red"]$current++;[/COLOR]
} else {
$next = $('#slideshow img:first');
[COLOR="Red"]$current = 1;[/COLOR]
}
[COLOR="DimGray"]$top.hide();
$next.show();[/COLOR]

[COLOR="Red"]$('#currentImage').text($current + "/" + $iCount);[/COLOR]
}
var $imgCount = $('#slideshow img');
var $iCount = $imgCount.length;

$('#slideshow img').click(slide);
$('#totalImages').text($iCount);

});
</script> [/CODE]
Copy linkTweet thisAlerts:
@ijsauthorMay 27.2011 — Thank you, but this is work only once, i.e. 1 changing to 2 and stop.

This is very strange, because every time when click(slide) they must $current++

Hm&#8230;
Copy linkTweet thisAlerts:
@ijsauthorMay 27.2011 — I found a solution:

Counter should be under function:
[code=html]
var $current = 1;
function slide(){
var $top = $('#slideshow img:visible');
var $next;
[/code]
×

Success!

Help @ijs spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...