幻灯片画廊答案

【问题标题】：highslide gallery幻灯片画廊
【发布时间】：2013-01-30 13:53:22
【问题描述】：

我正在使用 Highslide 来展示我的照片。我想介绍一个简单的画廊 - 如果有人点击照片“dolno.jpg”，它将显示包含 3 张照片的画廊。现在只有一张（1.jpg）。我有3张图片： 1.jpg、2.jpg、3.jpg 我怎样才能做到这一点？这是我的代码：

<script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
    // override Highslide settings here
    // instead of editing the highslide.js file
    hs.graphicsDir = '/highslide/graphics/';
</script>

<td>
<a class="highslide" href="1.jpg" onclick="return hs.expand(this, { captionText: '<b>THIS</b>' } )">
<img src="/logafirm/dolno.jpg" id="imgg" title="Click to enlarge" height="80" weight="80"></a>
 <font color="#52180"><b>THIS</font></b></A>
</td>

【问题讨论】：

标签： javascript highslide

【解决方案1】：

只需为您要显示的每个其他图像复制锚元素。

这样

<a class="highslide" href="1.jpg" onclick="return hs.expand(this, { captionText:    '<b>THIS</b>' } )">
  <img src="/logafirm/dolno.jpg" id="imgg" title="Click to enlarge" height="80" weight="80">
</a>
<a class="highslide" href="2.jpg" onclick="return hs.expand(this, { captionText: '<b>THE OTHER IMAGE</b>' } )">
  <img src="/logafirm/THE_OTHER_IMAGE.jpg" id="imgg" title="Click to enlarge" height="80" weight="80">
</a>

您还需要指定幻灯片设置..

根据文档：

<script type="text/javascript">
hs.addSlideshow({
// slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: true,
overlayOptions: {
    opacity: .6,
    position: 'top center',
    hideOnMouseOut: true
}
});

// Optional: a crossfade transition looks good with the slideshow
hs.transitions = ['expand', 'crossfade'];
</script>

最后..如果您只想显示第一个缩略图，只需隐藏其他..使用 CSS 或使用 javascript 可能更好（没有 js 的用户会看到图像）

【讨论】：

【解决方案2】：

Highslide 有一个内置机制来做你想做的事 - 无需使用 CSS 或 Javascript 来隐藏其他两个缩略图。

http://www.highslide.com/examples/mini-gallery.html

【讨论】：