Fancybox, make slideshow with images and divs that are not a gallery
I am using jQuery fancybox plugin to create an image gallery. The user clicks on the image and then a modal image appears to move through all images. Up to this point, everything is done with the following code.
But the change I want to make is in the modal slideshow. In the slideshow, you need to specify the specific image that was clicked plus other images that are not in the gallery, plus additional div
s. These are additional images and divs
can remain anywhere in the code.
HTML:
<a class="fancybox" href="img/a_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/a_big.jpg" alt="image project"/>
</a>
<a class="fancybox" href="img/b_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/b_big.jpg" alt="image project"/>
</a>
<a class="fancybox" href="img/c_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/c_big.jpg" alt="image project"/>
</a>
JS:
$('.fancybox').fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
'autoSize': false,
'autoWidth' : 600,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'swf',
'autoCenter ' :true,
'aspectRatio':true
});
1) How to achieve this?
2) If fancybox doesn't work, is there any other script that can help achieve the goal with responsive design?
EDIT: Demo is here .
source to share
I have looked and I can see that if you add data-fancybox-group
to other items that you want to add to the gallery fancybox gets them and works as expected.
Check this jsFiddle as an example (images are not loaded in the jsFiddle, but if you copy the code to file you can tell how it works).
PS. You have some wrong attributes in your images. Find width11=""
and height11=""
.
source to share