Topic: full.html on Mobile [SOLVED]

This has been addressed before but I still have no idea why it isn't working for me. Everything (I think) is where it should be and the gallery is working fine on a non-mobile browser.

http://thalleindustries.com/2016/galleries.php

Re: full.html on Mobile [SOLVED]

I notice that you have two Juicebox galleries embedded in your web page.
When embedding multiple Juicebox galleries, the 'juicebox.js' file should be loaded only once per page rather than once per gallery (and your page currently loads the 'juicebox.js' file twice).

Try removing the following line of code from your page (and clear your browser's cache before reloading your web page) to see if this helps:

<script src="img/fishkill/jbcore/juicebox.js"></script>

Re: full.html on Mobile [SOLVED]

Hi Steven, thanks for checking in!

I removed one of them and cleared the cache but still no luck...

Re: full.html on Mobile [SOLVED]

I think I've just noticed the root of your problem.
Your gallery's embedding code is inside the gallery's own container.
Move the gallery's embedding code outside its container and hopefully all will be well.

For example, for your first gallery, you currently have this:

<div class="column margin10Bottom" id="juicebox-container1">
    <!--START JUICEBOX EMBED-->
    <script src="img/elmsford/jbcore/juicebox.js"></script>
    <script>
        new juicebox({
            baseUrl : 'img/elmsford/',
            containerId : 'juicebox-container1',
            galleryWidth : '100%',
            galleryHeight : '300',
            backgroundColor: '#222222'
        });
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</div>

Change the above to this:

<div class="column margin10Bottom" id="juicebox-container1"></div>
<!--START JUICEBOX EMBED-->
<script src="img/elmsford/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl : 'img/elmsford/',
        containerId : 'juicebox-container1',
        galleryWidth : '100%',
        galleryHeight : '300',
        backgroundColor: '#222222'
    });
</script>
<!--END JUICEBOX EMBED-->

Incidentally, you embed your galleries into containers named 'juicebox-container1' and 'juicebox-container2'.
Therefore, the following two lines (one per gallery) are redundant (and a web page should not contain containers with duplicate ids) so can be removed:

<div id="juicebox-container"></div>
<div id="juicebox-container"></div>

If the above does not work, then if you are using an .htaccess file, check to see if there are any rewrite rules that might be affecting the path to the 'full.html' file.

Re: full.html on Mobile [SOLVED]

That did it! Steven, you're the man. Thank you. Will be upgrading to the full version once the client approves the site.

Thanks!

Re: full.html on Mobile [SOLVED]

You're welcome! I'm glad it worked.
Thank you for letting me know.