HighslideJS 字幕（桌面左面板）和（手机底部）

Question

对于 highslide，我在图像左侧创建了一个在桌面上看起来不错的标题，它在移动设备上显示相同但不好看所以我决定编写代码：

<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' 是负责字幕定位的代码，但是如果我把它放在 if 语句中，它在移动端看起来像这样： http://imgur.com/a/TfGBa

您认为问题出在哪里？

Answer 1

我想你会发现从另一个方向来解决这个问题会更容易。让标题显示在图像下方（默认），但如果 window 比 1000 像素宽，请将其移至左侧面板：

<!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>

HighslideJS 字幕（桌面左面板）和（手机底部）

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

jquery

html

css

highslide