0

我正在使用 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>
4

2 回答 2

0

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

像这样

<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 的用户会看到图像）

于 2012-07-24T06:15:53.120 回答
0

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

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

于 2013-01-29T14:22:48.877 回答