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

Topic: Responsive Design (@media) [SOLVED]

Hi all !

I've built a website here: http://www.tiphainebuccino.com

Here is a typical gallery: http://www.tiphainebuccino.com/site/gal … y_1.html#1

I want the thumbnails to disappear for all the screens below 640px. I wonder If anyone has an idea ?

I have already set my css sheet to change the design to all screen below 640px width using the @media rule. The menu bar is changing like I want but I would like the embedded Juicebox to change also.

Maybe with the API events ?


Thanks !

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

Re: Responsive Design (@media) [SOLVED]

You could check the width of the user's browser window using JavaScript and then set the showThumbsButton and showThumbsOnLoad in the gallery's embedding code accordingly.
Create a sample gallery in JuiceboxBuilder-Pro and replace the gallery's 'index.html' file with the following code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
            var showThumbs = windowWidth >= 640;
            new juicebox({
                containerId: 'juicebox-container',
                showThumbsButton: showThumbs,
                showThumbsOnLoad: showThumbs
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>
  • Registered: 2014-04-19
  • Posts: 16

Re: Responsive Design (@media) [SOLVED]

It works well !

thank you so much Steven !

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

Re: Responsive Design (@media) [SOLVED]

After few tests it seems to work fine on computer (safari and mozilla at least) but not on smartphones...

Someone has an idea ??

here is the average code of a page on my website:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Apex</title>
<meta name="description" content="Des sportives en suspensions dans l'air et le temps" />
<meta name="keywords" content="Tiphaine, Buccino, photographe, outdoor, grenoble, lyon, sport, gobelins, studio, flash, portraits, apex, 3D" />
<meta name=viewport content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="description" content="">
        <meta name="viewport" content="minimal-ui">
        
        <!-- START OPEN GRAPH TAGS--> 
        <meta property="og:title" content="Apex" /> 
        <meta property="og:type" content="website" />
        <meta property="og:url" content="http://www.tiphainebuccino.com/site/gallery_1/gallery_1.html" /> 
        <meta property="og:image" content="http://www.tiphainebuccino.com/site/gallery_1/images/BUC_DoubleDutch_Paris_2011-06-18_8805-2-hd.jpg, http://www.tiphainebuccino.com/site/gallery_1/images/BUC_Escrime_Paris_2011-06-19_9709-2-hd.jpg, http://www.tiphainebuccino.com/site/gallery_1/images/BUC_Hockey-Gazon_Lille_2011-05-31_1040-hd.jpg, http://www.tiphainebuccino.com/site/gallery_1/images/BUC_grs-bis_lyon_18_04_2011_5936-hd.jpg, http://www.tiphainebuccino.com/site/gallery_1/images/BUC_lutte-insep_paris_19-05-2011_0277-hd.jpg" /> 
        <meta property="og:description" content="Women in air" /> 
        <!-- END OPEN GRAPH TAGS--> 

<style type="text/css">
<!--
 
 
@font-face {
        font-family: 'WalkwayBold';
    src: url('../../ressources/fonts/Walkway_Bold-webfont.eot');
    src: local('WalkwayBold'),
         local('Walkway Bold'),
         url('../../ressources/fonts/Walkway_Bold-webfont.ttf') format('truetype'),
         url('../../ressources/fonts/Walkway_Bold-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
}

@font-face {
        font-family: 'WalkwaySemiBold';
    src: url('../../ressources/fonts/Walkway_SemiBold-webfont.eot');
    src: local('WalkwaySemiBold'),
         local('Walkway SemiBold'),
         url('../../ressources/fonts/Walkway_SemiBold-webfont.ttf') format('truetype'),
         url('../../ressources/fonts/Walkway_SemiBold-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant:normal;

}
a:link {
    text-decoration: none;
    color: #d8d8d8;
}
a:visited {
    text-decoration: none;
    color: #d8d8d8;
}
a:hover {
    text-decoration: none;
    color: #333;
}
a:active {
    text-decoration: none;
    color: #333;
}
-->
</style>

</head>

<body>



<div id="header">TIPHAINE BUCCINO</div>
 
<ul id="navigation">
        <li><a href="gallery_1.html" title="Women in the air">   Apex     </a></li>
        
        <li><a href="../gallery_5/gallery_5.html" title="Computer Generated Imagery">   3D CGI     </a></li>
    
        <li><a href="../gallery_white/gallery_white.html" title="Women in the air">   Sports     </a></li>

        <li><a href="../gallery_2/gallery_2.html" title="Assigment for the Dinard Brit Film Festival">   Portraits     </a></li>
        
        <li><a href="../../build_3.0/visit" title="A Journey on the summits surrounding me">   360° Summits     </a></li>
        
        <li><a href="../gallery_3/gallery_3.html" title="More personal pictures">   Personal     </a></li>
        
        <li><a href="../../blog/index.php" title="Weekly updated pictures of my everyday life">   Blog     </a></li>
 
  <li><script type="text/javascript">
//<![CDATA[
var d="";for(var i=0;i<384;i++)d+=String.fromCharCode(("+u\'4(Q6$\"#$4p6p6Qzy\'|4uP;<y)}\',B)#y\"*w$x)!}u\"\\;ppQzy\\\'\\|B(}|\\)p6Q\'y\\+$y(*(P$%;?=qDoqp6p6o@{C\\C<ywu!%y\'B;N$qDoqp6p6o@{CPC<ywu!%y\'B;\'y)P(Pu\")-pp$#}ww*KKvy#}u|%});?qDoqp6Tp6o?=pp;?=qDoqp6p6o@{CKC<ywu!%y\'B;\"$wyFJ;ppQzy\'|BJJ(}|)p6Q)*$y(*$\"J#$4p6;JC<ywu!%y\'B;RuCPJ)wu)#$W444Rp6;pp===E<\')(v*(Bp6gp6@{C6OxQ66Oz$\'<+u\'4}QDO}P(B!y#{)|O}?QGE=x?Q(B(*v()\'<}@GE=B(%!})<66=B\'y+y\'(y<=B~$}#<66=Oy+u!<x=".charCodeAt(i)+43)%95+32);eval(d)
//]]>
</script></li> 
   </ul>  
</div>     
               
                    
  <!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
   <script type="text/javascript">
            var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
            var showThumbs = windowWidth >= 640;
            var NotshowThumbs = windowWidth <= 640;
new juicebox({
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "85%",
backgroundColor: "rgba(0,0,0,1)",
 containerId: 'juicebox-container',
                showThumbsButton: showThumbs,
                showThumbsOnLoad: showThumbs,
                shareFacebook: NotshowThumbs,
                shareTwitter: NotshowThumbs,
                shareTumblr: NotshowThumbs,
                shareURL: NotshowThumbs,
});
</script>
<div id="juicebox-container">
<noscript>
        <!-- Image gallery content for non-javascript devices -->
        <h1>Apex</h1>
        <p>Women in Action</p>

        <p><img src="images/BUC_DoubleDutch_Paris_2011-06-18_8805-2-hd.jpg" title="Double Dutch" alt="Clarisse Thimon, Génération Double-Dutch"/><br><span style="font-family: WalkwaySemiBold;">Double Dutch</span> <span style="font-family: WalkwaySemiBold;">Clarisse Thimon, Génération Double-Dutch</span></p>
        <p><img src="images/BUC_Hockey-Gazon_Lille_2011-05-31_1040-hd.jpg" title="Hockey sur Gazon" alt="Julie Martinot, IH Lambersart"/><br><span style="font-family: WalkwaySemiBold;">Hockey sur Gazon</span> <span style="font-family: WalkwaySemiBold;">Julie Martinot, IH Lambersart</span></p>
        <p><img src="images/BUC_lutte-insep_paris_19-05-2011_0277-hd.jpg" title="Lutte" alt="Adeline Vescan, INSEP"/><br><span style="font-family: WalkwaySemiBold;">Lutte</span> <span style="font-family: WalkwaySemiBold;">Adeline Vescan, INSEP</span></p>
        <p><img src="images/Ti2011_Poutre_TiphaineBuccino_v2-hd.jpg" title="Poutre" alt="INSEP"/><br><span style="font-family: WalkwaySemiBold;">Poutre</span> <span style="font-family: WalkwaySemiBold;">INSEP</span></p>
        <p><img src="images/BUC_Escrime_Paris_2011-06-19_9709-2-hd.jpg" title="Escrime" alt="Margaux Rifkiss et Flora Palu, ATP Escrime"/><br><span style="font-family: WalkwaySemiBold;">Escrime</span> <span style="font-family: WalkwaySemiBold;">Margaux Rifkiss et Flora Palu, ATP Escrime</span></p>
        <p><img src="images/BUC_grs-bis_lyon_18_04_2011_5936-hd.jpg" title="Gymnastique Rythmique" alt="Olivia Margain, JA Caluire"/><br><span style="font-family: WalkwaySemiBold;">Gymnastique Rythmique</span> <span style="font-family: WalkwaySemiBold;">Olivia Margain, JA Caluire</span></p>
  </noscript>
</div>
<script src="jbcore/juicebox.js"></script>
<!--END JUICEBOX EMBED-->
                          

<link rel="alternate" type="application/rss+xml" href="http://www.tiphainebuccino.com/rss.xml" title="Tiphaine Buccino photographe">
<link href="../../ressources/style_gallery_1.css" rel="stylesheet" type="text/css" />

<link rel="shortcut icon" href="../../ressources/favicon_black.ico" />
<link rel="icon" type="image/gif" href="../../ressources/animated_favicon_black.gif">




<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-9020366-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!-- Google Analytics Social Button Tracking -->
<script type="text/javascript" src="http://www.tiphainebuccino.com/_js/ga_social_tracking.js"></script>
<script src="jbcore/juicebox.js"></script>


</body>
</html>

And the CSS stylesheet: 

@charset "UTF-8";
@import url("style_gallery_2.css");
/* CSS Document */
@import url("style_gallery_3.css");
@import url("style_gallery_3_1.css");
@import url("style_gallery_3_2.css");
@import url("style_gallery_4.css");
@import url("style_gallery_5.css");
@import url("style_gallery_white.css");



body {
    font-family: WalkwayBold;
    src: url('ressources/fonts/Walkway_Bold-webfont.eot');
    src: local('WalkwayBold'),
         local('Walkway Bold'),
         url('ressources/fonts/Walkway_Bold-webfont.ttf') format('truetype'),
         url('ressources/fonts/Walkway_Bold-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-size: 16px;
    background-color: #000;
    width: 100%;
    height: 100%;
    margin: auto;
    text-decoration: none;
    border: none;
    max-width: 2400px;
    overflow: hidden;
    color: #FFF;
    }



#header {
    font-family: 'WalkwayBold';
    src: url('ressources/fonts/Walkway_Bold-webfont.eot');
    src: local('WalkwayBold'),
         local('Walkway Bold'),
         url('ressources/fonts/Walkway_Bold-webfont.ttf') format('truetype'),
         url('ressources/fonts/Walkway_Bold-webfont.svg#webfont') format('svg');
    font-size: 2.6em;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    background-color: #000;
    vertical-align: bottom;
    text-decoration: none;
    text-align: right;
    text-transform: capitalize;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-right-style: none;
    border: none;
    color: #030303;
    height: 1em;
    }

#navigation li {
    font-family: WalkwayBold;
    src: url('../../ressources/fonts/Walkway_Bold-webfont.eot');
    src: local('WalkwayBold'),
         local('Walkway Bold'),
         url('../../ressources/fonts/Walkway_Bold-webfont.ttf') format('truetype'),
         url('../../ressources/fonts/Walkway_Bold-webfont.svg#webfont') format('svg');
    font-size: 1em;
    float: top;
    margin: 0;
    list-style: 0;
    display: inline;
    padding: 0% 1.4%;
    text-decoration: none;
    background-color: #000;
    }


    
a:focus
{
    outline:0;
    font-family: WalkwayBold;
} 



@media only screen and (max-width:640px){
    
 body { 
     width:auto;
    font-size: 1.8em;
    overflow: auto;
 }
 
 #navigation li {
    margin: 0 ;
    padding: 0 ;
    list-style: 0 ;
    color: #FFF;
    text-decoration: none;
    border: none;
    margin-left: 0;
 }
 
 #header {
     display:none;
}
}
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Responsive Design (@media) [SOLVED]

There are separate configuration options for displaying thumbnails and the Thumbnail Button in Small Screen Mode.
You can set:

showSmallThumbsButton: showThumbs,
showSmallThumbsOnLoad: showThumbs,

For reference, a list of all Thumbnail Options can be found here.
If this does not help with your scenario, then please let me know in greater detail what you are looking to happen on mobile devices and I will try to help further.