Topic: Alternate Gallery - Mobile and Desktop

Toying around with Simpleviewer for a photo gallery archive and was running into an issue.

I have a responsive menu that reacts to a certain screen size for mobile users. The menu is in the header and works when my container is 100% (SV.simpleviewer.load('sv-container', '100%', '100%', 'transparent', true);)

However, I don't want those dimensions of the gallery when viewing on desktop. It takes up too much screen size.
(SV.simpleviewer.load('sv-container', '100%', '700', 'transparent', true);)

I tried to incorporate javascript into my html, although I'm not well versed in it. I wanted to see if there's a way to change the container based on the screen size? I attempted the following code with no luck.

<script type="text/javascript">
        $(document).ready(function () {
       
        if ( $(window).width() > 600) {     
        SV.simpleviewer.load('sv-container', '100%', '700', 'transparent', true);
           
  //Add your javascript for large screens here
}
else {
    SV.simpleviewer.load('sv-container', '100%', '100&', 'transparent', true);
  //Add your javascript for small screens here
}
    });
</script>


My other route is re-sizing the galleries to have a max 700 width, so 100% container equals 700px.

Thanks for any help and/or assistance.

Re: Alternate Gallery - Mobile and Desktop

You could certainly change the gallery's height (or any of the other Embed Code Parameters) depending on the width of the user's browser window (or any other factor) using JavaScript.
Try something like the following:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
    var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width());

    var galleryHeight = '100%';

    if (windowWidth > 600) {
        galleryHeight = '700px';
    }

    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', galleryHeight, '222222', true);
    });
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

I hope this points you in the right direction.

Please note that the embedding code I use above is the current version.
The embedding code you posted is an older syntax for earlier versions of SimpleViewer.
If you are not already using the current version of SimpleViewer-Pro (v2.3.2), I would recommend upgrading.
Full instructions can be found here.

Steven Speirs
SimpleViewer Support Team.

Re: Alternate Gallery - Mobile and Desktop

Thank you so much Steven. Although the javascript still did render out the right gallery on mobile. I did update to 2.3.2.

Using the javascript you provided still rendering the gallery at 700px on mobile. Screenshot is provided.
http://i.imgur.com/p3ibMNB.png


This is the 100% value I was aiming to have on mobile.
http://i.imgur.com/0kVC8Xl.png

I don't believe it's something that is caused by and CSS I have, because using only the embed gave the same results. Any thoughts? Thanks again for all your help so far.

Re: Alternate Gallery - Mobile and Desktop

You can scale the web page for mobile devices through use of the viewport meta tag. Please see here for further information.
Try using the following code in the <head> section of your gallery's web page:

<meta name="viewport" content="width=device-width, initial-scale=1" />
Steven Speirs
SimpleViewer Support Team.

Re: Alternate Gallery - Mobile and Desktop

I had a line of code in my that called out the 'viewport.' I can always post the code I'm working with.

Have you run into anyone else requesting variable heights for galleries on mobile vs. desktop? Searching through the forums I wasn't able to find additional threads.

Re: Alternate Gallery - Mobile and Desktop

Have you run into anyone else requesting variable heights for galleries on mobile vs. desktop?

No, not that I can remember. Rather than changing the gallery's height depending on browser or screen dimensions, you might have better results with a device detection check using navigator.userAgent.
For example, to detect an iOS device, you could use a check such as:

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    // Device is iOS
}

(You could combine this with browser or screen dimension checks if you wish.)

The problem with the small vs large thumbnails in your two screenshots certainly looks like it might be due to a viewport meta tag setting so if you have not already done so, please try using the line of code from my previous post and clear your browser's cache before reloading your gallery's web page.

I can always post the code I'm working with.

Yes, please. It might be easier to figure out the problems that you are encountering if I could see the code you are using.
Just post the URL to your web page. (That should save you copying and pasting code into a post.)

Steven Speirs
SimpleViewer Support Team.