我有这个网站:http://urbanphenomena.net/
对于 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
您认为问题是什么？
最佳答案
我想您会发现从另一个方向来解决这个问题会更容易。让标题显示在图像下方(默认设置)，但如果窗口宽超过 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>
关于jquery - Highslide JS 字幕(桌面左侧面板)和(移动底部)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43340251/