CODEWITHSUNDEEP
javascriptjqueryhtmlfancybox
Chris Holstein
Chris Holstein

Reputation: 325

Fancybox 2.1.5 hides my images when clicked on

I have recently build a small page with fancybox and I have a nagging issue where fancybox hides images from my page.

So when I close my gallery(fancybox) all my thumbnails are gone.

This my html

<a class="fancybox" src="/style/images/project1/fullsize/image1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor."><img src="/style/images/project1/thumb/image1.jpg"></a>

and the scripts i am loading.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/style/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript" src="/js/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" type="text/css" href="/style/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />

Upvotes: 0

Views: 406

Answers (1)

JFK
JFK

Reputation: 41143

The issue is created by a syntax error in your HTML code: you are using the src attribute in your anchors like :

<a class="fancybox" src="/style/images/project1/fullsize/image1.jpg" ....

The correct attribute for the <a> element is href like :

<a class="fancybox" href="/style/images/project1/fullsize/image1.jpg" ....

This JSFIDDLE reproduces the issue using the src attribute.

Here is fixed using the correct href attribute

Upvotes: 1

Related Questions