Question

I need to use a slightly different implementation of fancybox in 2 different places on my site.

One utilises a group of images and one just a single image.

I have added some styling to the overlay to achieve the styling I need to with the image group, however I do not need the additional styling with the single image as it pads the bottom of the white “frame” to create space for the navigation to sit. This just appears as empty white space in the single image which I need to remove.

Is there a way to send a class to the overlay via the image link for the single images so I can remove this white space?

<a href="/assets/Uploads/_resampled/croppedimage640480-site.jpg" class="fancybox">
    <img src="/assets/Uploads/_resampled/croppedimage181118-site.jpg" alt="site">
</a>

Answer 1

If using fancybox v2.x add this option

beforeShow : function(){
 $(".fancybox-inner").find("img").addClass("newClass");
}

it will add the newClass to the image (img tag) inside the fancybox

Just in case, if using fancybox v1.3.4 add

"onComplete": function(){
 $("#fancybox-content").find("img").addClass("newClass");
}