I want to make fancybox gallery with img without using links (a href)? How i can do that?
HTML:
<div id="foo2">
<img src="/images/banners/001.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/002.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/003.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/004.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/005.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/006.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/007.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/008.jpg" rel="downslider" alt="" width="80" height="80" />
.....
</div>
JS (now it works with single images, without gallery effect):
$("#foo2 img").click(function(e) {
var url = $(this).attr('src');
var rel = $(this).attr('rel');
var content = '<img src="' + url + '" rel="'+ rel + '" />';
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
'content' : content
});
});
You cannot have a gallery using the manual method .click()
unless you set all the elements of the gallery inside the fancybox script itself like:
$("#foo2 img").click(function(e) {
$.fancybox([
'images/01.jpg',
'images/02.jpg', // etc
],{
// fancybox options
'type': 'image' // etc.
}); // fancybox
}); // click
However, to make it work the way you want and simulate a regular fancybox gallery without using links (<a>
tags with a href
attributes ), you would need to create your own function with your own custom navigation methods.
Without changing your HTML
, try this JS
:
<script type="text/javascript">
function fancyBoxMe(index){
var gallerySize = $("#foo2 img").size();
if((index+1) == gallerySize){ nexT = 0 } else { nexT = index+1}
if(index == 0){ preV = (gallerySize-1) } else { preV = index-1}
var tarGet = $('#foo2 img').eq(index).attr('src');
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
'href': tarGet,
'titlePosition': 'inside',
'titleFormat' : function(){
return 'Image '+(index+1)+' of '+gallerySize+'<a id="preV" href="javascript:;" onclick="fancyBoxMe('+preV+')">prev</a> <a id="nexT" href="javascript:;" onclick="fancyBoxMe('+nexT+')">next</a>';
}
}); // fancybox
} // fancyBoxMe
$(document).ready(function() {
$("#foo2 img").each(function(i){
$(this).bind('click', function(){
fancyBoxMe(i);
}); //bind
}); //each
}); // ready
</script>
That creates a fancybox gallery from the <img>
tags, with a nice cycling effect. Also, with a little of CSS
we can have the navigation controls using the fancybox arrow icons. See a working example here.
Since the navigation control is totally manual, you don't actually need the rel
attribute on the <img>
tag.
Please notice that the code above is for Fancybox v1.3.x (I assumed you are using v1.3.x because the API options).
This worked for me:
$(".CLASSNAME").each(function(){
$(this).fancybox({
href : $(this).attr('src')
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With