Forums

8.4.2 magnificPopup: the image #1 could not be loaded

Permalink
I'm trying to make a gallery with a magnificPopup:
<div class="popup-gallery">
    <?php 
    if (is_object($images[0])) {
        $thumb = $app->make('helper/image')->getThumbnail($images[0], $secondary_image_width, null, false);
        ?>
        <a href=""><img src="<?php echo $thumb->src; ?>" alt="<?php echo h(t($property->getProperty())); ?>" /></a>
    <?php } ?>
    <div class="hidden">
        <?php 
        foreach ($images as $image) {
            if (is_object($image)) {
                $thumb = $app->make('helper/image')->getThumbnail($image, $secondary_image_width, null, false);
                ?>
                <a href="<?php echo $image->getRelativePath(); ?>" title="<?php echo h(t($property->getProperty())); ?>"><img src="<?php echo $thumb->src; ?>" /></a>
            <?php
Viewing 15 lines of 20 lines. View entire code block.

$(document).ready(function() {
   $('.popup-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
         enabled: true,
         navigateByImgClick: true,
         preload: [0,1], // Will preload 0 - before current, and 1 after the current image
            tPrev: 'Previous',
            tNext: 'Next',
            arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>', // markup of an arrow button
      },
      image: {
Viewing 15 lines of 22 lines. View entire code block.

When I click on the image, it says "the image #1 could not be loaded". On clicking next, it shows all the images fine. Just not the first one. But the 1st one in the popup is not the 1st in the array of my images. What's it trying to load as the 1st image? Becauase the 2nd shown is my 1st!

I only have 5 images, but the popup shows 6. I've checked in code - there are 5 indeed.

I tried option preload: 0, - no change, still loads an empty thing at the start
linuxoid
 
linuxoid replied on at Permalink Reply
linuxoid
A-ha, I got it. It was loading the 1st image twice. This fixed it:
<div class="popup-gallery">
    <?php 
    foreach ($images as $k => $image) {
        if (is_object($image)) {
            $thumb = $app->make('helper/image')->getThumbnail($image, $secondary_image_width, null, false);
            ?>
            <a class="<?php echo $k > 0 ? 'hidden' : ''; ?>" href="<?php echo $image->getRelativePath(); ?>" title="<?php echo h(t($property->getProperty())); ?>"><img src="<?php echo $thumb->src; ?>" /></a>
        <?php 
        }
    }
    ?>
</div>