I read some thread in here, but I haven't found a good solution for gallery item. I am not expery in jQuery so please bear with me here. I have code to display one image outside iframe. But my goal is to add left/right arrow to scroll through my gallery.
I have this script
<script type="text/javascript">
$(document).ready(function () {
$('.fancybox').click(function (e) {
e.preventDefault();
parent.$.fancybox({
type : "image", // force type of content to image
href: this.href,
title: this.title,
helpers: {
title: { type: 'inside' },
overlay: {
opacity: 0.3
} // overlay
//, buttons: {}
} // helpers
}); // fancybox
}); // click
});
</script>
and my HTML code is
<a rel="gallery" class="fancybox" href="images/01.jpg" title="aaasdasdasd"><img alt="" src="thumbnails/01.jpg"/></a>
<a rel="gallery" class="fancybox" href="images/02.jpg" title="bbsdfsdfsdfdsf"><img alt="" src="thumbnails/02.jpg"/></a>
FancyBox pop up works. But I would like to add arrows to scroll along my "gallery item". I tried adding gallery code .attr('rel', 'gallery') right above parent.$.fancybox({
but the popup just disappear.
Adding openEffect : 'none', closeEffect : 'none', nextEffect : 'none', prevEffect : 'none', padding : 0, margin : [20, 60, 20, 60] // Increase left/right margin
also make the popup disappear.
Is it possible to do that?
Here is the code for FancyBox showing Gallery image outside iframe
and the html code is like
this works on IE, firefox, safari, but not Chrome.
You may need to create your gallery elements manually first so try