• greg
  • Member
  • Offline
  • Registered: 2014-07-15
  • Posts: 4

Topic: embedded gallery tiny on load, normal on refresh

Currently testing juicebox gallery embedded in a jquery mobile page using dreamweaver CC.  When using my iphone, or the computer; if I click on the button “Gallery” on page1, we go to page2 where the juicebox gallery is.  However, on load the images in the gallery are tiny.  If one reloads the page, everything looks great.  This happens both locally and online, I have tested it in firefox, chrome, and safari.  Attached is a screenshot from my Iphone of what the gallery looks like when it loads.
Please help...

Oh, the url is www.gregorylittle.org/pp_jb/button_2.html

Greg



+++++++++++++++++++++++++++++++++++++
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content=""width=device-width, initial-scale=1, maximum-scale=1">-->
<meta name="viewport" content="width=device-width" />
<title>Untitled Document</title>
<link href="../jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="../jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="../jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page"> 
<div data-role="header">   
<h1>Header</h1> 
</div> 
<div data-role="content">   
<div data-role="controlgroup">
<a href="#page2" data-role="button">Button</a>
<a href="#" data-role="button">Button</a>
<a href="#" data-role="button">Button</a>
<a href="#" data-role="button">Button</a>
<a href="#" data-role="button">Button</a>
<a href="#" data-role="button">Button</a>
</div>   
</div> 
<div data-role="footer">   
<h4>Footer</h4> 
</div>
</div>
<div data-role="page" id="page2"> 
<div data-role="header">
<a href="#page" data-role="button" data-icon="home" data-iconpos="notext">Button</a>
<h1>Header</h1> 
</div> 
<div data-role="content"> 
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script> new juicebox({ containerId: "juicebox-container", galleryWidth: "100%", galleryHeight: "100%", backgroundColor: "rgba(34,34,34,.5)" }); </script>
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1>Pigment Prints</h1>
<p></p> <p><img src="images/pp_001.jpg" title="pp_001" alt="" /><br>pp_001 </p> <p><img src="images/pp_002.jpg" title="pp_002" alt="" /><br>pp_002 </p> <p><img src="images/pp_003.jpg" title="pp_003" alt="" /><br>pp_003 </p> <p><img src="images/pp_004.jpg" title="pp_004" alt="" /><br>pp_004 </p> <p><img src="images/pp_005.jpg" title="pp_005" alt="" /><br>pp_005 </p> <p><img src="images/pp_006.jpg" title="pp_006" alt="" /><br>pp_006 </p> <p><img src="images/pp_007.jpg" title="pp_007" alt="" /><br>pp_007 </p> <p><img src="images/pp_008.jpg" title="pp_008" alt="" /><br>pp_008 </p> <p><img src="images/pp_009.jpg" title="pp_009" alt="" /><br>pp_009 </p> <p><img src="images/pp_010.jpg" title="pp_010" alt="" /><br>pp_010 </p> <p><img src="images/pp_011.jpg" title="pp_011" alt="" /><br>pp_011 </p> <p><img src="images/pp_012.jpg" title="pp_012" alt="" /><br>pp_012 </p> <p><img src="images/pp_013.jpg" title="pp_013" alt="" /><br>pp_013 </p> <p><img src="images/pp_014.jpg" title="pp_014" alt="" /><br>pp_014 </p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->   
</div> 
<div data-role="footer">   
<h4>Footer</h4> 
</div>
</div>
</body>
</html>

  • Registered: 2012-04-24
  • Posts: 5,947

Re: embedded gallery tiny on load, normal on refresh

Your Juicebox gallery has dimensions of 100% x 100% and is loaded as soon as the page is loaded.
However, when the page is loaded, the gallery's parent container is not visible on screen so the gallery's dimensions are 100% of a zero-sized container.
Try giving your gallery fixed dimensions such as:

<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "800",
        galleryHeight: "600",
        backgroundColor: "rgba(34,34,34,.5)"
    });
</script>
<div id="juicebox-container">

Otherwise, delay the loading of your gallery until the gallery's parent container is visible on screen (and has dimensions which Juicebox can use to calculate its own size).
Put the Juicebox embedding code in a function and run the function to load the gallery when the HTML element is clicked.
For example:

<script src="jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(34,34,34,.5)"
        });
    }
    $(document).ready(function() {
        $('#page2').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container">

Hopefully one of these two suggestions will help.

  • greg
  • Member
  • Offline
  • Registered: 2014-07-15
  • Posts: 4

Re: embedded gallery tiny on load, normal on refresh

Thanks so much for the explanation!  I get it I think.  However, using % for the gallery dimensions is very desirable, as I am attempting to design a "responsive" website, and even if we just stay with small screened devices, the range of screen sizes in phones is tremendous--it is desirable for the gallery and images to scale with screen dimensions.

I have not come up with a gallery size/image alignment/image size that looks good.  The javascript idea is most elegant, but it is awkward to have people .click or touch the empty screen to get the gallery to load.  I wonder if there is another event, or timer or something that could be used?  I am just learning.
thanks again!

  • greg
  • Member
  • Offline
  • Registered: 2014-07-15
  • Posts: 4

Re: embedded gallery tiny on load, normal on refresh

just tried wrapping the juicebox-container in a juicebox-parent div, and assigning a max height and width, but no luck.

<!--START JUICEBOX EMBED-->
<div id="juicebox-parent" style="max-height:1136px; max-width:640px;">

<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "99%",
galleryHeight: "99%",
backgroundColor: "rgba(34,34,34,.5)"
});
</script>
<div id="juicebox-container">
</div>
</div>

5 Reply by laurentsch (edited by laurentsch 2014-07-16 08:28:49)

  • Registered: 2014-04-19
  • Posts: 48

Re: embedded gallery tiny on load, normal on refresh

The second proposal of Steven seems interesting, but as it uses the JQuery library, I think one has to embed it : 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

(to include in the head part of your file)(To put such a link avoids to embed the library itself on the server)

  • Registered: 2012-04-24
  • Posts: 5,947

Re: embedded gallery tiny on load, normal on refresh

@greg

The javascript idea is most elegant, but it is awkward to have people .click or touch the empty screen to get the gallery to load.

This is not necessary. You would attach the click handler to the button that the user would click to reveal the gallery so that it all happens automatically (without a further click required once the container is visible on screen).
Just give the button a unique id and use this as the jQuery selector to which you attach the click handler.
In your web page, change:

<a href="#page2" data-role="button">Gallery</a>

... to:

<a href="#page2" id="gallery" data-role="button">Gallery</a>

... and replace your current embedding code with the following:

<script src="jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(34,34,34,.5)"
        });
    }
    $(document).ready(function() {
        $('#gallery').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container">


@laurentsch

Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if a web page uses any jQuery code at all, I would certainly recommend including a separate jQuery JavaScript file as you suggest (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).
The original poster's web page already includes a separate jQuery JavaScript file so there should be no problem in this respect.

  • Registered: 2014-04-19
  • Posts: 48

Re: embedded gallery tiny on load, normal on refresh

Juicebox comes with its own bundled version of jQuery

OK...

  • greg
  • Member
  • Offline
  • Registered: 2014-07-15
  • Posts: 4

Re: embedded gallery tiny on load, normal on refresh

laurentsch and Steven, thanks for the help.  Again Steven, makes perfect sense, I will give it a shot and get back to you!