Forum

Thread tagged as: Problem, Third-party

Fancybox thumbnail disappearing

Hi.

I'm using the following template to allow my client to insert an image into a photo frame div;

<div class="photo">
    <a class="fancybox-effects-c" href="<perch:gallery id="image"/>"  title="<perch:content id="text" type="text" label="Text" />"><img src="<perch:content type="image" id="image" label="Image" />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="e.g. Photo of MD John Smith with his best wig on" title="true" />" /></a>
</div>

Fancybox is all setup and working on the static version of the site, but have I set the above template in-correctly as when I now click on the thumbnail the pop-up works correctly, but when I close the photo, the thumbnail disappears, leaving an empty frame.

Is my template in-correct?

Thanks Wayne

Wayne Hooper

Wayne Hooper 6 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Which version of Perch are you running?

I'm using Perch v2

Drew McLellan

Drew McLellan 2638 points
Perch Support

Which version of Perch 2?

I was running 2.4 and just updated to 2.5... same issue.

Hi Drew

Me again. I've noticed that the thumbnail and larger pop-up image are using the same image, rather than a small and large version... which may be the reason its hiding the 'thumbnail' after closing the large one?

How do I specify in my template to use 2 different sizes?

Wayne

Drew McLellan

Drew McLellan 2638 points
Perch Support

Are you using the Gallery app or regular content? I see a mix of <perch:gallery /> and <perch:content /> tags in your template, which shouldn't normally be the case.

I was trying to do it via regular content, but looks like I copied a gallery template tag from another site.

I've updated it to

<div class="photo">
    <a class="fancybox-effects-c" href="<perch:content id="image"/>" title="<perch:content id="text" type="text" label="Text" />"><img src="<perch:content type="image" id="image2" label="Image" />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="e.g. Photo of MD John Smith with his best wig on" title="true" />" /></a>
</div>

Still has the same issue though...

Drew McLellan

Drew McLellan 2638 points
Perch Support

  1. Your tags need both id and type attributes.
  2. To have the same image in different sizes, use two tags, but set the ID to be the same for both. Then set different width and height attributes to resize them differently.

Thanks Drew

I've now as advised above and its all working fine now. For reference, the template is below;

<div class="photo">
    <a class="fancybox-effects-c" href="<perch:content id="image" type="image" width="650"/>" title="<perch:content id="text" type="text" label="Text" />"><img src="<perch:content type="image" id="image" width="250" label="Image" />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="Decription of image here" title="true" />" /></a>
</div>