TechQA.

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

177 views Asked by At

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.stack.imgur.com/leRmo.jpg

What do you think the issue is?

jquery html css highslide
Original Q&A
1

There are 1 answers

2
MisterNeutron On BEST ANSWER

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>

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in HIGHSLIDE

Popular Questions

Trending Questions