Content inside fancy box need to be responsive

Question

I would like to create a gallery that is inside a fancy box , so firstly I downloaded all the content of the gallery and appended to the html container.

<div id="popup" style="display:none;"><div class="galleria"></div></div>

The jquery part

$("#hidden_content").instagram({
        clientId: blockInstaSettings.clientId
        , hash: hash
        , userId: blockInstaSettings.userId
        , next_url: insta_next_url
        , show: 10
        , image_size: image_size
        , onComplete: function (photos, data) {
            var album_html = "";

            $.each(photos, function( index, val ) {
                album_html += "<img src='" + val.images.standard_resolution.url + "' data-title='' data-description='" + val.caption.text.replace("'","&rsquo;") + "' longdesc='" + val.link + "'>";
            });

            $(".galleria").html(album_html);

                $('#block_instagram').on('click', function () {
                    openPop();
                    return false;
                });
        }
    });

Notice that I set up the listener in the button that show the fancybox

function openPop(){
    $.fancybox({
         'autoScale': true,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'speedIn': 500,
         'speedOut': 300,
         'autoDimensions': true,
         'centerOnScroll': true,
         'href' : '#popup'
    });

    Galleria.run('.galleria', {
        transition: 'fade',
        popupLinks: true,
        show: no,
        extend: function(options) {
            Galleria.get(0).$('info-link').click();
        }
    });
}

Attempted to call galleria.run when fancybox's afterShow event; but it is still the same.

Also for CSS, it need to be :

.galleria{
    width:700px;
    height:500px;
}

Otherwise ,it can not generate the gallery

How to fix that?

Reference

My site: http://internal001.zizsoft.com/be_pure/

(When you scroll to bottom, there is a slider showing instagram photos, click on the photo and you will see the gallery)

The plugin used:

http://galleria.io/

http://fancyapps.com/fancybox/

Answer 1

As others mentioned in the commants all those plugins you are using are responsive already. When i visit your site if i resize the window after opening the fancybox its not resized as defined as "responsive". I thought this is what you are worrying about. You can invoke this by resize galleria on window resize event. Please refer this resize script for galleria to achieve. Thanks

Update: (Essential code blocks from the referred link)
to re-initialize the galleria while window resize.

First, set up the resize function:

function ResizeGallery() {
     gWidth = $(window).width();
     gHeight = $(window).height();
     gWidth = gWidth - ((gWidth > 200) ? 100 : 0);
     gHeight = gHeight - ((gHeight > 100) ? 50 : 0);
     $("#gallerycontainer").width(gWidth);
     $("#gallery").width(gWidth);
     $("#gallery").height(gHeight);
     // Reload theme
     Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.js', { show: curIdx });
}

Then bind it to the window resize event:

var TO = false;
$(window).resize(function () {
    if (TO !== false)
        clearTimeout(TO);
    TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
});

This will essentially re-initialize by reloading the default theme. In this example, I am using the second parameter to specify which image to show- otherwise it will display the first image. Be aware that this may cause another instance of Galleria. I believe this to be a bug, and posted on their forums. You can remove the older instances as follows:

var gcount = Galleria.get().length;

if (gcount > 1) {
   Galleria.get().splice(0, gcount - 1);
}

Run it after the loadTheme method. Use settimeout to delay it, because loadTheme takes some time to complete. I use 200ms. Ugly, but I need some of the features in Galleria. Hope this helps.

Answer 2

every thing is responsive and works good. Elaborate your problem .

if you want your popup thumbnails appear in middle of your popup use the following code

.galleria-thumbnails {
text-align: center;
width: 100% !important;

    }



.galleria-image {

    display: inline-block;

    float: none !important;

    }

Answer 3

I found that using the javascript to handle that worked best for me you could have your script calculate height and then do something like this where you initialized fancybox

fitToView : true,
autoSize  : true,
width     : 100%,
height    : 'auto',

you can play with fitToView and autoSize till you get the desired effect much like pinterest