Image counter in viewer

[Brintaman]

Hi!
First of all, gamma gallery is awesome!
I'm trying to add a counter in the photo viewer that shows "current image / total images"
To accomplish this i put a variable for Gamma.itemsCount; in the gamma-single-view. But I don't think a function exists to grab the id of the current image.
I tried writing a function that grabs it from the url hash but because the page doesn't reload when sliding trough the photo's this only works after refreshing. It also won't work if i bind the function on a hashchange event.
Does anyone have any ideas?

Thanks in advance!

[danyx23]

I tried something similar and got it to work - I don't have time to clean the code and push it to github right now, but if you want to try: Insite the _layout = function($item) {} method there is a part where it iterates over the items and sets the image sources and source. There, you can set the description like this:

description = $picEl.data( 'description' ) + " " + (itemIndex+1) + " of " + Gamma.itemsCount;

HTH!

[Brintaman]

Thanks for the reply! I found an alternative way to solve this but your method is way better. I'll implement your example instead of my solution :)

For reference I'll post my method as well.

In gamma.js I added:

$(".gamma-gallery li").each(function(i,el){

// increment item numbering
var current_item = i + 1;

// total length
var listItems = $(".gamma-gallery").children();
var totaal_foto = listItems.length;

// put div and data attribute to variables
var div = el.firstElementChild;
var tekst = div.dataset.description;
delete div.dataset.description;


// add the counter to the variable with data attribute, and add it to the div
var counter = tekst.concat("<div class='counter'><p>" + current_item + " / " + totaal_foto +"</p></div>");
div.dataset.description = counter;

});