Search code examples
jqueryhtmlcsshighslide

HighslideJS Caption (leftpanel on desktop) and (bottom on mobile)

I have this website: http://urbanphenomena.net/

For the highslide, I have created a caption which looks nice on desktop on the left side of the images, it displays the same in mobile which is not good looking so I decided to code this:

<script type="text/javascript">
      hs.align = 'center';
      hs.transitions = ['expand', 'crossfade'];
      hs.outlineType = 'rounded-black';
      hs.wrapperClassName = 'dark';
      hs.fadeInOut = true;
      hs.dimmingOpacity = 0.75;
      // Add the controlbar
      if (hs.addSlideshow) hs.addSlideshow({
        //slideshowGroup: 'group1',
        interval: 5000,
        repeat: false,
        useControls: true,
        fixedControls: 'fit',
        overlayOptions: {
          opacity: .75,
          position: 'bottom center',
          hideOnMouseOut: true
        }
      });
    </script>
    <script type="text/javascript">
      hs.graphicsDir = 'js/highslide/graphics/';
      hs.captionOverlay.position = "leftpanel";
      hs.captionOverlay.width = "350px";

      if ($(window).width() <= 1000) {
      hs.captionOverlay.width = "150px";
            hs.align = 'left';
      }
    </script>

hs.captionOverlay.position = 'leftpanel' is the code responsible for the caption positioning, but if i put that on the if statement, it will look like this in the mobile: https://i.sstatic.net/leRmo.jpg

What do you think the issue is?

Solution

  • I think you'll find it easier to come at this from the other direction. Let the caption show below the image (the default), but if the window is wider than 1000px, move it to the leftpanel:

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Highslide JS</title>
<link rel="stylesheet" href="../highslide/highslide.css">
<script src="../highslide/highslide-full.js"></script>
<script src="jquery.min.js"></script>
<script>
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.addSlideshow({
    interval: 5000,
    repeat: false,
    useControls: true,
    fixedControls: 'fit',
    overlayOptions: {
        opacity: .75,
        position: 'bottom center',
        hideOnMouseOut: true
    }
});
if($(window).width() > 1000) {
    hs.captionOverlay.position = 'leftpanel';
    hs.captionOverlay.width = '200px';
}
</script>
</head>
<body>
<div class="highslide-gallery">
<a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
    <img src="../images/gallery1.thumb.jpg" alt="Highslide JS" title="Click to enlarge"></a>
<div class="highslide-caption">Caption for the first image. This caption can be styled using CSS.</div>
<a href="../images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
    <img src="../images/gallery2.thumb.jpg" alt="Highslide JS" title="Click to enlarge"></a>
<div class="highslide-caption">Caption for the second image.</div>
<a href="../images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
    <img src="../images/gallery3.thumb.jpg" alt="Highslide JS" title="Click to enlarge"></a>
<div class="highslide-caption">Caption for the third image.</div>
</div>
</body>
</html>