Duplicates in slideshow (zpBootstrap)

kyrd

Hello, after upgrading and changing theme I have many images that show 2 and/or 3 times in the slideshow. I don't know if it's something relate to ZP or to the theme zpBootstrap+ZenPage.

However, after some tests I've seen that it depends from the image description, where I have some html, i.e.:

<div class="img_text" style="margin: 0.3em;">Photo by <a href="http://www.flickr.com/photos/XXXX/12345678/in/set-randomnumbers" target="_blank">author's name > author's website</a></div>

I can say that <div> is escaped as expected, but <a href ... > causes the image to be repeated 3 times (one x language, maybe?) in the slideshow only - pagination otherwise works correctly.
Moreover: in case I remove only the <a href ... > I get the photo duplicated 2 times instead of 3 times!

After removing html completely I get correctly the single image & the description appearing in the slideshow.
Of course I could cancel the html - but, hey! removing one by one :-P - if no other way to solve this, but also I'd really like to keep some links live in the description.

kyrd

sorry, forgot to add a link where the above happens:
https://www.indirizzofantasma.net/autori/Hyuro/
there are 16 images, most with description, but if you open the slideshow you get 46 images!

fretzl

I added "zpBootstrap" to the title of this topic so the theme author may spot this easier and can possibly help.

fretzl

It must be something in your theme and/or FancyBox config. Official Zenphoto themes and slideshow display HTML descriptions just fine.

acrylian

I am not familar with the theme and its settings. It seems to be that the fancybox triggers on three image urls (the image link, the thumb and a full image for the fancybox. Probably because of that three times the same instead of only one.

Check if there is any theme option for the fancybox to trigger on specific attributes onle. I see a link with data-fancybox="images" in the source it probably should trigger on only.

kyrd

Thank you guys, I'll see what I can do.
Hopefully Vincent - the theme author - could have some other advice.

@acrylian - I'll follow the fancybox path that you suggest, but in this case why the fancybox should trigger 3 times only when <a href ... > is there? ... as now is too much for my understanding!

acrylian

I have no idea either but there are at least two <a href>with an image: https://www.zenphoto.org/test/fancyboxissue.jpg.html Although one is not a direct image link…

Offhand I don't know fancybox's settings but if nothing is specificed theses "lightbox" all trigger on links to images. Thus my idea. The 3rd would be an <img> but why that would trigger I don't know… Hopefully Vincent will have any idea.

fretzl

This works for me:
Find /js/zpBootstrap.js (or /js/zpB_fancybox_config.js) and add

$('.caption a.thumb').removeAttr('data-fancybox');

This only removes the FancyBox trigger (the data-fancybox="image" attribute) in your image description links.
It does not fix the extra links created by FancyBox.

kyrd

Thanks a lot, I'm travelling now but I'll give it a try asap! :-)

kyrd

After much struggling I've solved the duplicates issue - but not yet the unescaped caption + html

The problem is caused by an <a href> tag which wraps both the thumb and the description in inc_print_image_thumb.php.

Nothing wrong happens if there is no html in the title/description - as in most of Vincent's website - but when I have another <a href> tag in the description, of course some nesting problem occurs.

That's the original code, lines 28 to 35:

    if ($isImagePhoto) { ?>
        <a class="thumb" href="<?php echo html_encode(pathurlencode($fullimage)); ?>" title="<?php echo html_encode(getBareImageTitle()); ?>" data-fancybox="images">
            <?php printImageThumb(getBareImageTitle(), 'remove-attributes img-responsive'); ?>
            <div class="hidden caption">
                <h4><?php printBareImageTitle(); ?></h4>
                <?php echo printImageDesc(); ?>
            </div>
        </a>

so, what I did was simply to remove the closure </a> tag from line 35 and close the link just after the thumb image:

    <a class="thumb" href="<?php echo html_encode(pathurlencode($fullimage)); ?>" title="<?php echo html_encode(getBareImageTitle()); ?>" data-fancybox="images">
        <?php printImageThumb(getBareImageTitle(), 'remove-attributes img-responsive'); ?></a>

Obviously there is the same problem along the code, being those lines only related to if ($isImagePhoto) and not to the subsequent else if , which need to be corrected as well if the user deals with other file types.

Next step: I'm going to investigate the reason why the description doesn't work whith html (wich means the capability to include links in it). Any idea is greatly appreciated!

Meanwhile: should I contact directly the theme author about the above or what do you suggest?

acrylian

The description certainly allows links and other HTML. Why the fancybox overlay triggers on those links as well is certainly a matter of the theme's configuration for it.

Regarding lines lines 28 to 35 of the theme. It is valid in HTML5 to enclose all sorts of HTML with a <a>element, but not other links. Which is partly because it obviously creates a problem which link is meant if you click the one within since everything is already a link. Not sure why the theme does it that way. Vincent could probably answer but seems a bit inactive here these days sadly (his own site is even still on ZP 1.5.6).