Photoswipe: Incorrect image numbering on initial open

[scrumpyj4ck]

Hi there.

I am loading images dynamically into photoswipe and most is working amazingly well! Thanks for the great work!

One issue is on initial open (I have a list of images inside a thumbnail carousel) the image count is off. This is fixed on scroll through next/prev.

My JS:

$('#gallery_list').each( function() {
var $galleryImage     = $(this),
getItems = function() {
var items = [];
$galleryImage.find('a').each(function() {
var $href   = $(this).attr('href'),
$size   = $(this).data('size').split('x'),
$width  = $size[0],
$height = $size[1];

var item = {
src : $href,
w   : $width,
h   : $height
}

items.push(item);
});
return items;
}
var items = getItems();
});

My loop (laravel)

@for ($i = 0; $i <= count($elementImageData)-1; $i++)
<li id="gallery_list" class="count-{{ $i }}">
<figure class="image" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="{{ $elementImageData[$i]['original_image'] }}" data="{{ $i }}" alt="image-{{ $i }}" class="gallery-item" itemprop="contentUrl" data-size="">
<img src="{{ $elementImageData[$i]['style_600x383'] }}" itemprop="thumbnail" alt="Image description">
<span class="full-screen-icon"></span>
</a>
<figcaption itemprop="caption description">
@if($elementImageData[$i]['overide_caption'] !== "")
{{ $elementImageData[$i]['overide_caption'] }}
@else
{{ $elementImageData[$i]['caption'] }}
@endif

@if($elementImageData[$i]['source'] !== "")
Photo: {{ $elementImageData[$i]['source'] }}
@endif
</figcaption>
</figure>
</li>
@endfor

Thanks in advance

Reference image of incorrect numbering

[dimsemenov]

Can you link to the page that you're working on? Or provide isolated example based on one of codepen's in documentation?

[scrumpyj4ck]

@dimsemenov Unfortunately I cannot link as it's on my development environment... Will create codepen and link here

[brendo234]

I'm having the same issue while dynamically working with images.

For instance, I've got a gallery of 6 images (indexed as 0 through 5). When I click on the 6th/final image (#5 in the index), 5 gets pre-pended in front of the image listing for some reason (see screenshot) and reads as 51 / 6. The same thing happens if I click on the first image (#0 in the index) - the photoswipe counter reads as 01 / 6.

I am initializing my gallery as such:

$(".zoom").click(function(){
    var $index = $(this).attr("index");
    var options = {
        index: $index,
        bgOpacity: 0.7
    };

    var gallery = new PhotoSwipe( $pswp, PhotoSwipeUI_Default, items, options);
    gallery.init();
});

https://snag.gy/vBn1Nj.jpg

[chesio]

@brendo234 I guess the problem is that you're passing index as a string, not an integer ;)

You get: "0" + 1 = "01"
You want: 0 + 1 = 1

Fix is easy:

var $index = parseInt($(this).attr("index"), 10);

Cheers,
Česlav

[brendo234]

@chesio - Thanks.... completely overlooked that. Appreciate the 2nd set of eyes!

[ghost]

@scrumpyj4ck can this be closed?