<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS</title>
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
Add the slideshow and do some adaptations to this example.
-->
<script type="text/javascript">
//<![CDATA[
hs.graphicsDir = '../highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
overlayOptions: {
position: 'bottom right',
offsetY: 50
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander'
}
});
// Options for the in-page items
var inPageOptions = {
//slideshowGroup: 'group1',
outlineType: null,
allowSizeReduction: false,
wrapperClassName: 'in-page controls-in-heading',
thumbnailId: 'gallery-area',
useBox: true,
width: 600,
height: 400,
targetX: 'gallery-area 10px',
targetY: 'gallery-area 10px',
captionEval: 'this.a.title',
numberPosition: 'caption'
}
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
document.getElementById('thumb1').onclick();
});
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
if (/in-page/.test(this.wrapper.className)) return hs.next();
}
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
var i, exp;
hs.getPageSize();
for (i = 0; i < hs.expanders.length; i++) {
exp = hs.expanders[i];
if (exp) {
var x = exp.x,
y = exp.y;
// get new thumb positions
exp.tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();
// calculate new popup position
x.pos = x.tpos - x.cb + x.tb;
x.scroll = hs.page.scrollLeft;
x.clientSize = hs.page.width;
y.pos = y.tpos - y.cb + y.tb;
y.scroll = hs.page.scrollTop;
y.clientSize = hs.page.height;
exp.justify(x, true);
exp.justify(y, true);
// set new left and top to wrapper and outline
exp.moveTo(x.pos, y.pos);
}
}
});
//]]>
</script>
<!--
3) Modify some of the styles
-->
<style type="text/css">
.highslide-image {
border: 1px solid black;
}
.highslide-controls {
width: 90px !important;
}
.highslide-controls .highslide-close {
display: none;
}
.highslide-caption {
padding: .5em 0;
}
</style>
</head>
<body>
<!--
4) Div where the gallery appears
-->
<div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver">
<!--
5) Put all the thumbnails inside a hidden div where Highslide can index them to
create the slideshow.
-->
<div class="hidden-container">
<!--
6) This is how you mark up the thumbnail images with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image. Given the captionEval
option is set to 'this.a.title', the caption is grabbed from the title attribute of
the anchor.
-->
<a id="thumb1" class='highslide' href='../images/thumbstrip11.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Two cabins">
<img src='../images/thumbstrip11.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip12.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Patterns in the snow">
<img src='../images/thumbstrip12.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip13.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Cabins">
<img src='../images/thumbstrip13.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip14.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Old stone cabins">
<img src='../images/thumbstrip14.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip15.jpg'
onclick="return hs.expand(this, inPageOptions)" title="A litte open water">
<img src='../images/thumbstrip15.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip16.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Dipper">
<img src='../images/thumbstrip16.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip17.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Dipper">
<img src='../images/thumbstrip17.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip18.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Mountain">
<img src='../images/thumbstrip18.thumb.png' alt='s'/></a>
<a class='highslide' href='../images/thumbstrip19.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Birch trees">
<img src='../images/thumbstrip19.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip20.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Highland woods">
<img src='../images/thumbstrip20.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip21.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Frozen lake">
<img src='../images/thumbstrip21.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip22.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Spring in the mountains">
<img src='../images/thumbstrip22.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip23.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Spring in the mountains">
<img src='../images/thumbstrip23.thumb.png' alt=''/></a>
<a class='highslide' href='../images/thumbstrip24.jpg'
onclick="return hs.expand(this, inPageOptions)" title="Fjord landscape">
<img src='../images/thumbstrip24.thumb.png' alt=''/></a>
</div>
</div>
</body>
</html>
Highslide JS 图片预览插件.zip
版权申诉
137 浏览量
2022-11-02
23:50:59
上传
评论
收藏 1.87MB ZIP 举报
Highslide JS 图片预览插件.zip （128个子文件） 
highslide.css 21KB highslide-ie6.css 2KB zoomin.cur 326B zoomout.cur 326B
nordic.gif 14KB controlbar-black-border.gif 5KB controlbar-white.gif 5KB controlbar-white-small.gif 3KB controlbar4-hover.gif 2KB controlbar2.gif 884B icon.gif 867B controlbar4.gif 854B controlbar3.gif 838B loader.white.gif 673B loader.gif 668B fullexpand.gif 209B resize.gif 70B ajax.htm 3KB index.htm 3KB include-short.htm 2KB
gallery-in-page.html 7KB gallery-vertical-strip.html 7KB gallery-horizontal-strip.html 6KB gallery-floating-thumbs.html 5KB gallery-thumbstrip-above.html 5KB mini-galleries.html 4KB mini-gallery.html 2KB gallery-in-box.html 2KB gallery-dark.html 2KB image-map.html 2KB gallery-controls-in-heading.html 2KB gallery-floating-caption.html 2KB gallery-white.html 2KB html.html 2KB youtube.html 2KB headline.html 2KB inline.html 2KB flash.html 2KB no-border.html 2KB outer-glow.html 1KB no-outline.html 1KB white-rounded-outline.html 1KB white-10px.html 1KB ajax.html 1KB iframe.html 1011B
full6.jpg 109KB thumbstrip01.jpg 89KB thumbstrip20.jpg 85KB full-image.jpg 84KB thumbstrip23.jpg 83KB gallery1.jpg 82KB thumbstrip22.jpg 79KB thumbstrip18.jpg 69KB thumbstrip24.jpg 67KB thumbstrip15.jpg 64KB thumbstrip05.jpg 64KB thumbstrip17.jpg 62KB thumbstrip10.jpg 61KB gallery3.jpg 61KB thumbstrip02.jpg 58KB thumbstrip11.jpg 57KB thumbstrip14.jpg 56KB gallery2.jpg 56KB thumbstrip09.jpg 54KB thumbstrip19.jpg 53KB thumbstrip04.jpg 53KB thumbstrip16.jpg 51KB thumbstrip03.jpg 49KB thumbstrip07.jpg 48KB thumbstrip06.jpg 48KB thumbstrip21.jpg 45KB thumbstrip08.jpg 45KB thumbstrip13.jpg 42KB thumbstrip12.jpg 41KB gallery1.thumb.jpg 28KB thumb6.jpg 25KB thumbnail.jpg 22KB gallery3.thumb.jpg 22KB gallery2.thumb.jpg 20KB highslide-full.js 98KB highslide-with-gallery.js 75KB highslide-with-html.js 71KB highslide-full.min.js 70KB highslide-with-gallery.min.js 53KB highslide.js 51KB highslide-with-html.min.js 51KB highslide-full.packed.js 47KB highslide.min.js 37KB highslide-with-gallery.packed.js 36KB highslide-with-html.packed.js 34KB highslide.packed.js 25KB
scrollarrows.png 6KB closeX.png 4KB outer-glow.png 3KB rounded-black.png 3KB geckodimmer.png 3KB glossy-dark.png 3KB thumbstrip17.thumb.png 2KB thumbstrip01.thumb.png 2KB thumbstrip09.thumb.png 2KB共 128 条
- 1
- 2
资源评论
易小侠
- 粉丝: 6453
- 资源: 9万+
最新资源
- tensorflow-gpu-2.7.0-cp37-cp37m-manylinux2010-x86-64.whl
- tensorflow-rocm-2.12.1.570-cp310-cp310-manylinux2014-x86-64.whl
- tensorflow-rocm-2.12.1.570-cp39-cp39-manylinux2014-x86-64.whl
- open_setting.mobileprovision
- zidongdianjiqi.apk
- 卷积神经网络（Convolutional Neural Networks，CNN）是深度学习领域中一种非常重要的神经网络结构，特
- DHT11温湿度传感器是一款高性能、低成本的数字温湿度复合传感器 它集成了温度感应和湿度感应功能，可以准确地测量环境中的温度和湿
- STM32驱动WS2812呼吸灯、频谱，变色变速旋转源程序
- eMMC的压力测试工具
- JUC代码演示 Java多线程并发
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
