javascript - Fancybox2が機能しない

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>

​</p>

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