Hello,
I was wondering if someone could help me with adding an image counter to this
gallery. http://tympanus.net/Tutorials/ResponsiveImageGallery/
something like image 2 of 16
Thanks
Hi landguy. Welcome to the forums. 
Did you read the article on this gallery? It explains the setup. http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/
Read through that, give it a go and let us know if you get stuck. If you do, post a live link so we can check your work.
EDIT: O, I misread your post. Presumably you have it working but want to add to it. Although it’s doable, it might be better to find a gallery that already has numbers. I’ve seen people try to extend galleries like this, but it can cost a bit and doesn’t seem worth it to me. Better to find a gallery that does what you need out of the box. There are hundreds of them.
For example, check out Exposure: http://exposure.blogocracy.org/demos/demo3.html?v=0.9.1
Ralph,
Thanks for the reply. Yes i did have it working. But i was looking to add the counter to the current one.
The example you gave me is a great alternative. Except my galleries have about 50 photos each so the numbers would run all the way across the screen. Something like this one but with thumbnail carousel http://exposure.blogocracy.org/demos/demo5.html?v=1.0.1
Do you have any other examples. I’ve spent 2 days searching and have not found 1 that was responsive with a counter.
Thank you very much.
I still think Exposure is worth checking into further. It has various versions, and allows you, say, to have five or ten thumbnails appearing at once, with arrows to scroll to the next set. I’ve used it a few times and found it to work really well for galleries with hundreds of images.
I was able to combine demo 5 with demo 3 by adding this to demo3
// Update image counter.
var imageSrc = image.attr(‘src’);
var imageNumber = gallery.indexOfImage(imageSrc)+1;
var counterText = imageNumber + ‘/’ + gallery.numberOfImages();
var counter = $(‘#counter’).text(counterText);
and then added <p>Showing image: <span id=“counter”></span></p>
Very Cool Thanks again
You’re welcome. Glad you got a solution.