Fancybox Image Gallery doesn't work. Can anyone help, please?

Question

I'm trying now for hours to get the FancyBox Image Gallery working but the image file instead opens in the browser and not the FancyBox layer. I'm using another Fancybox element on the site and that's working perfectly. Can anyone help?

Header Code:

<link media="screen" href="jquery.fancybox.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.8.2.js">
<script type="text/javascript" src="jquery.hcsticky-min.js">
<script type="text/javascript" src="superfish.js">
<script type="text/javascript" src="jquery.flexslider-min.js">
<script src="jquery.fancybox.pack.js" type="text/javascript">

Only some things I tried:

$(document).ready(function() {
         // Photo Gallery
         $('a.photogallery').fancybox({
                   padding: 0,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no',
                   helpers : {
                        title : { type : 'inside' }
                   }
         });

});

$(document).ready(function() {
         // Photo Gallery
         $('photogallery').fancybox({
                   padding: 0,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no',
                   helpers : {
                        title : { type : 'inside' }
                   }
         });

});

$(document).ready(function() {
         // Photo Gallery
         $('a.photogallery').fancybox();

});

$(document).ready(function() {
         // Photo Gallery
         $('.photogallery').click(function() {
         $('photogallery').fancybox({
                   padding: 0,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no',
                   helpers : {
                        title : { type : 'inside' }
                   }
         });
         }
});

HTML Gallery (I also tried class="fancybox photogallery" and different values for class and rel tag):

<div class="photos">
            <a title="" href="/files/thumb/f66cf2bba997313/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/f66cf2bba997313/180/180/fit"></a>
            <a title="" href="/files/thumb/36d8b240686ea33/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/36d8b240686ea33/180/180/fit"></a>
            <a title="" href="/files/thumb/e0986f42bd03cf4/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/e0986f42bd03cf4/180/180/fit"></a>
            <a title="" href="/files/thumb/1160ee763726480/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/1160ee763726480/180/180/fit"></a>
</div>

The other element works perfectly:

         // Brochure Request Overlay
         $('.brochure-request').fancybox({
                   padding: 0,
                   width: 800,
                   height: 400,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no'
         });

<a class="brochure-request fancybox.iframe btn orange-btn" href="/en/brochures">Brochure</a>

Any ideas? Thanks in advance!

Philip

possible duplicate of [Fancybox links don't show in lightbox - what am i missing?](http://stackoverflow.com/questions/17554068/fancybox-links-dont-show-in-lightbox-what-am-i-missing) — JFK, Jul 19 '13 at 07:30
http://stackoverflow.com/a/17554660/1055987 shows different ways to tackle the issue. — JFK, Jul 19 '13 at 07:30

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

I see a few problems with your tries but the $('a.photogallery').fancybox(); should have worked.

Here is what I did that worked:

$(function() {
    $('a.photogallery').fancybox({
                   type: 'image',
                   padding: 0,
                   scrolling: 'no',
                   helpers : {
                        overlay: {
                           css: {'background-color': '#000'},
                           opacity: 0.3
                        },
                        title : { type : 'inside' }
                   }
         });
});

And a fiddle: http://jsfiddle.net/fstreamz/2qcUs/1/

Note: I'm using 2.0.4 as the resource in fiddle.

I would check your js/css paths and make sure everything is being included that you assume is as well as the console for errors. Then make sure the image paths you have in the href's aren't doing a redirect to the real image.

Update

It just hit me those href's don't have image extensions. You can pass type: 'image' so it knows they are images. Fancybox probably doesn't know what to do with them since they are extensionless. Updated the config/fiddle with type:'image'

Hi Luke Skywalker, It's working with type:'image'! I'm so glad after so much testing. How should I ever find that without any JS knowledge? Thank you, thank you and again thanks! Philip — flip, Jul 19 '13 at 22:29

Fancybox Image Gallery doesn't work. Can anyone help, please?

1 Answers1

Update