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

[Igor Laszlo]

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 !