1 Reply by greg

(7 replies, posted in Juicebox-Pro Support)

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

Go to forum: Juicebox-Pro Support

2 Reply by greg

(7 replies, posted in Juicebox-Pro Support)

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>

Go to forum: Juicebox-Pro Support

3 Reply by greg

(7 replies, posted in Juicebox-Pro Support)

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!

Go to forum: Juicebox-Pro Support

4 Topic by greg

(7 replies, posted in Juicebox-Pro Support)

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>

Go to forum: Juicebox-Pro Support