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

Topic: Thumbnails not working with Chrome

The Thumbnail seems not to work with Chrome...

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

Re: Thumbnails not working with Chrome

Juicebox galleries should display and function correctly in Chrome (both mobile Chrome for mobile devices and standard Chrome for desktop browsers).

Please explain in greater detail exactly what the problem is and post the URL to your gallery so that I can take a look and help further.

Perhaps you are embedding a gallery in a web page alongside other content and there is an element on your page which is overlapping (stacked on top of) your gallery's thumbnails preventing them from functioning as expected.
If this is the case, then please check your page for HTML errors with the W3C Markup Validation Service and check the CSS code on your page to see if there is anything which may be contributing to your problem.

[Original post moved from Feature Requests forum thread.]

3 Reply by Tiphaine (edited by Tiphaine 2014-06-29 17:03:25)

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

Re: Thumbnails not working with Chrome

I've followed you instructions, the problem seems to be here:

Line 103, Column 36: character "<" is the first character of a delimiter but occurred as data

            var NotshowThumbs = windowWidth <= 1080;

✉

This message may appear in several cases:

    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.


the < sign may be the problem. What should I do ?


<script src="jbcore/juicebox.js"></script>
   <script type="text/javascript">
            var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
            var showThumbs = windowWidth >= 1080;
            var NotshowThumbs = windowWidth <= 1080;
new juicebox({
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "85%",
backgroundColor: "rgba(255,255,255,1)",
 containerId: 'juicebox-container',
                showThumbsButton: showThumbs,
                showThumbsOnLoad: showThumbs,
                showSmallThumbsButton: NotshowThumbs,
                showSmallThumbsOnLoad: NotshowThumbs,
                shareFacebook: NotshowThumbs,
                shareTwitter: NotshowThumbs,
                shareTumblr: NotshowThumbs,
                shareURL: NotshowThumbs,
                
});
</script>
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Thumbnails not working with Chrome

Try putting your <= expression in parentheses:

var NotshowThumbs = (windowWidth <= 1080);

... or enclose your entire JavaScript section in CDATA tags:

<script type="text/javascript">
    //<![CDATA[

        // JavaScript code goes here

    //]]>
</script>

Either (or both) of these solutions should prevent your browser from treating the < in your <= as the start of an opening tag.