Fancybox2 does not work

Question

I've been trying to get fancybox 2 to work for ages.

Eventually I've gotten to the point of just trying a basic example on jsfiddle.

I call fancybox via:

$(document).ready(function() { $(".fancybox").fancybox(); });​

and the html looks like:

<a class="fancybox" rel="group" href="http://lorempixel.com/1000/500/"><img src="http://lorempixel.com/500/250/" alt="" /></a>​

The code is taken from fancybox's own site, just grabbing some placeholder images from lorempixel.

I've attached the to the fiddle the required fancybox css and js, and told it to use jquery 1.7.2

Could someone please take a look and let me know where I'm going wrong? It's driving me crazy that I can't even get the basic example to work.

You can find the fiddle here.

Thanks!

Answer 1

I have to disagree with @DavidMuller ... the problem is not the lorempixel.com service. The real problem is that fancybox cannot figure out the type of content from the url

<a class="fancybox" rel="group" href="http://lorempixel.com/1000/500/"><img src="http://lorempixel.com/500/250/" alt="" /></a>​

... because it doesn't have an image extension (either jpg , png or gif ) so you have to tell that is an image .

You have different options to set the type of content

1). Use the type API option

$(document).ready(function() {
    $(".fancybox").fancybox({
        type: "image"
    });
});​

JSFIDDLE

2). use the data-fancybox-type (HTML5) attribute

<a class="fancybox" data-fancybox-type="image" rel="group" href="http://lorempixel.com/1000/500/"><img src="http://lorempixel.com/500/250/" alt="" /></a>​

JSFIDDLE

For more information, check http://fancyapps.com/fancybox/#support FAQ tab, No. 5

Answer 2

<Update>

As JFK stated in his answer, the problem is that fancybox could not determine the content type because there is no extension on the lorempixel-url.

</Update>

Phew, took me quite a long time to figure this out. The problem is indeed the "lorempixel.com" service. I have updated the fiddle to a "real" image and voilà ;).

<a class="fancybox" rel="group" href="http://farm9.staticflickr.com/8434/7786420744_8a1f692248_c.jpg"><img src="http://lorempixel.com/500/250/" alt="" /></a>
<a class="fancybox" rel="group" href="http://farm9.staticflickr.com/8434/7786420744_8a1f692248_c.jpg"><img src="http://lorempixel.com/500/250/" alt="" /></a>

​

http://jsfiddle.net/mnuRw/3/