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

7 years ago

Which version of Perch are you running?
Wayne Hooper

Wayne Hooper 6 points

7 years ago

I'm using Perch v2
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Which version of Perch 2?
Wayne Hooper

Wayne Hooper 6 points

7 years ago

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

Wayne Hooper 6 points

7 years ago

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

7 years ago

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.
Wayne Hooper

Wayne Hooper 6 points

7 years ago

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

7 years ago
  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.
Wayne Hooper

Wayne Hooper 6 points

7 years ago

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>