gpt4 book ai didi

jquery - Highslide JS 字幕(桌面左侧面板)和(移动底部)

转载 作者:太空宇宙 更新时间:2023-11-04 08:52:24 26 4
gpt4 key购买 nike

我有这个网站: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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com