How to make GalleryView Responsive?

[georgemichaelis]

Hi,

an, first of all, thanks for this Gallery. I have tried out many galleries, but this one is great to customize and fast loading.

Setting up a new Gallery I was wondering if it is possible to make it something like "responsive", so the big images are shrinking when the browser window is smaller, say, 600 px. I have already implemented the Gallery in the new responsive YAML framework (which I recommend). But the GalleryView is not responding. I guess it has to be done in the the javascript, but I am not that good in that. So any help would be great.

Regards George

[joeletherton]

Since the GalleryView is going to need to have its properties set explicitly (dynamic sizing will already happen relative to the initial settings), the only real way to do this would be to have an invisible element that is styled by your yaml. You could then get the properties of that object to determine what it's doing. Such as:

    $('#id_of_list').galleryView({
    panel_width: $('#id_of_invisible_sample_panel').css('width'),
    panel_height: $('#id_of_invisible_sample_panel').css('height'),
    frame_width: $('#id_of_invisible_sample_frame').css('width'),
    frame_height: $('#id_of_invisible_sample_frame').css('height')
});

Then somewhere on the page you just need to have corresponding elements:

    <div id="id_of_invisible_sample_panel" style="visibility: hidden;"></div>
    <div id="id_of_invisible_sample_frame" style="visibility: hidden;"></div>

Then, if your YAML produced the properly scaled CSS for those id's the javascript would be able to grab it when it loads.

[jeroenpx]

Hello,

My forked version of GalleryView does exactly that: making the GalleryView responsive. You can find it at: https://github.com/jeroenpx/GalleryView

See the example "demos/responsive_gallery_demo.html" for more information on how to set it up.

Have fun with it! Jeroen

[ghost]

I am curious on the current status of this fork? I looked at GalleryView2 (https://wordpress.org/plugins/nextgen-galleryview2/) which was updated 2/2014. It says that the responsiveness is now integrated, which suggests to me that the fork was integrated back into the original software.

However, I still dont see a responsive gallery out of this version. I followed the readme and installed the plugin, activated it and then created the gallery-galleryview.php in my Wordpress theme (so I can make any changes without overwriting GalleryView's original code). Nothing seems to make it responsive though.

[jeroenpx]

Hello @WebmistressM,

This fork is still up to date. (Demo: http://jeroenp.awardspace.com/responsivegalleryview/demo.html)

The Nextgen-galleryview2 is not the original software. It is a wordpress plugin around the GalleryView code. (And since the "responsive update"(2/2014) it uses the code from my fork in the back-end instead of the original code)

My fork makes it possible to make a GalleryView responsive. However, this does not happen automatically(!). In fact, if you just replace the original code with my fork, it will look exactly the same. So, you will still need to write a little bit of code to make it work (even for the wordpress plugin).

For information about how to make a GalleryView responsive: http://jeroenp.awardspace.com/?page=blog:responsivegalleryview#content

Jeroen

[ghost]

@jeroenpx Thanks for getting back to me. I was lead to this entry when I first was looking up info on the nextgen gallery version of galleryview. However, this blog seemed to only get me halfway there before confusing me:

http://jeroenp.awardspace.com/?page=blog:responsivegalleryview#content

However, your clarification on the nextgen version of galleryview not being as connected to your software does shed light on why I might not be having success in getting my nextgen galleryview gallery to become responsive. Im still lost on how to get functions.php (of my Wordpress theme) to take to the responsive aspects of this fork.

[jeroenpx]

@WebmistressM To answer your question I (finally) took the time to install the Wordpress plugin myself and try it out.

You can find the results on my blog: "Making the NextGEN-Galleryview responsive" http://jeroenp.awardspace.com/?page=blog:responsivegalleryviewwordpress#content

Jeroen

[ghost]

Oh, this is immensely helpful. I think it might of been a few discrepancies in variables for the stand-alone vs the nextgen based one that threw me off. I figured that there was just a parameter that I wasnt calculating correctly but the documentation.php wasnt linking. Thats where I was before this reply, and thinking myself a real dunce.

Now that I have this article to look at, comparing the code I was trying to work with, I have a better idea on what may have been the issue. Thanks for this update.