Im creating a gallery for Fancybox and only wish to show the first image. The rest are hidden in a container and only referenced so that Fancybox can call on these latter. I've tried two approaches: anchor tag with and without the image tag.

I am sure that this is a recent change as I have been using this technique on earlier craft versions and gettting good results.

<div class="hide">
  <a title="{{ image.title }}" href="{{ image.getUrl('wide') }}" class="fb" rel="fb-{{ ind }}">
    <img src="{{ image.getUrl('wide') }}" title="{{ image.title }}" style="display: block!important" />

The image is generated but it looks like in a temporary location "...cpresources/transforms..." to which Fancybox doesn't recognise.


1 Answer 1


Set generateTransformsBeforePageLoad in your config/general.php file.

'generateTransformsBeforePageLoad' => true,

Configures Craft to generate new image transforms right when getUrl() is called, rather than when the browser first requests the image.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.