I am trying to display several multiple, manually called image galleries using fancybox. I can get one gallery working, but the second will not open. Here is the code :
JAVASCRIPT
$(document).ready(function() {
$('.fancybox').fancybox();
/* MANUAL OPEN */
$("#fancybox-manual-c").click(function(){
$.fancybox.open([
{
href : 'image1.jpg',
rel : 'set01',
title : 'My title'
}, {
href : 'image2.jpg',
rel : 'set01',
title : '2nd title'
}, {
href : 'image3.jpg',
rel : 'set02',
title : '3rd title'
}, {
href : 'image4.jpg',
rel : 'set02',
title : '4th title'
}
]);
});
/* END OF MANUAL OPEN */
});
HTML
<div>
<a id="fancybox-manual-c" rel="set01" href="javascript:;"><img src="thumbnail01.jpg"></a>
</div><!-- END OF PICTURE THUMBS -->
<div><hr /></div>
<div>
<a id="fancybox-manual-c" rel="set02" href="javascript:;"><img src="thumbnail02.jpg"></a>
</div><!-- END OF PICTURE THUMBS -->
I eventually want to somehow call the images so that I’m not having to add lines of code to the file every time I want to upload a picture, but so far I’m struggling to even get two instances working correctly.
Note that I am using fancybox with other links on the page that are working as is, and on the same page I am also calling YouTube videos with no issues, and I have also tried some of the more popular questions with answers on here with no success.
Also, I’m pretty sure I made a mistake copying over sections of that JS code – so any errors with regards to the closing brackets at the end are typos.
You should try to change the id values. Group them with an outer div or with the same class name.
How do I open fancybox via manual call for a gallery in the html not via the jquery options?
The link might help you.