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/

Fancy box looks responsive to me. Please elaborate on specific issue you are facing. — Aditya Singh, Oct 14 '15 at 05:47
You have added a bounty to this question when adding clarity on your problem would be more beneficial. The problem isn't that nobody can solve this, it's that nobody knows what they're trying to help you solve. — leigero, Oct 14 '15 at 13:19
Do you want the fancybox to have the same width as the images showing in this box? As I see now, the box creates some (black) padding left and right of the image. Am I right that you want to have this gone? — Tirzono, Oct 16 '15 at 07:11

score 11 · Accepted Answer · edited May 23 '17 at 10:29

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.

score 2 · Answer 2 · answered Oct 14 '15 at 13:13

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;

    }

score 1 · Answer 3 · answered Oct 18 '15 at 10:21

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

score 0 · Answer 4 · answered Oct 19 '15 at 15:38

0

you can do this with a simple css trick .

in the responsive media screen you have to set the css as

.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img { background-size: 100% auto !important; }

answered Oct 19 '15 at 15:38

Dyuthi Chandran

44
6

Content inside fancy box need to be responsive

4 Answers4