How to open big image and overlay in a div, not on the whole screen

20 views
Skip to first unread message

Igor Laszlo

unread,
Oct 22, 2017, 7:32:18 PM10/22/17
to FancyBox

Hello,

I have a grid, its size is the half of the body) and thumbnails are in it. When I click on a thumbnail, it opens the big image and the overlay on the top of the whole screen (body). Is there an option to open it in the grid div ?

HTML :

<div class="grid">
<a href="img/portfolio/1thumb.jpg" class="grid-item fancybox-thumbs" data-fancybox-group="galery-name" title=""><img src="img/portfolio/1big.jpg" alt="" /></a>
<a href="img/portfolio/1thumb.jpg" class="grid-item fancybox-thumbs" data-fancybox-group="galery-name" title=""><img src="img/portfolio/1big.jpg" alt="" /></a>
..
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/masonry.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/easing.js"></script>
<script src="js/mousewheel.js"></script>

<script src="js/fancybox.js"></script>
<script src="js/fancybox-thumbs.js"></script>
<script src="js/fancybox-media.js"></script>

<script src="js/index.js"></script>

In my index.js :

    $(".fancybox-thumbs").fancybox({
        padding
: 0,
        openEffect
: 'elastic',
        openSpeed  
: 150,
        closeEffect
: 'elastic',
        closeSpeed  
: 150,
        closeClick
: true,    
        prevEffect
: 'elastic',
        nextEffect
: 'elastic',
        closeBtn  
: true,
        arrows    
: true,
        nextClick
: true,
        afterLoad
: function () {
           
var title = this.title ? this.title : " ";
           
var alt = $(this.element).find('img').attr('alt') ? $(this.element).find('img').attr('alt') : " ";
           
this.title = '<h3>' + title + '</h3>' + alt + '<br />';
       
},        
        helpers
: {title : {type:'inside'}}
   
});

Thanks for your help in advance !
Reply all
Reply to author
Forward
0 new messages