Поделитесь очень простым плагином предварительного просмотра изображенийviewer
Первое представлениеjs
иcss
viewer.js
:Ссылка для скачивания
jquery1.11.3.js
:Ссылка для скачивания
jquery-viewer.min.js
:Ссылка для скачивания
viewer.css
:Ссылка для скачивания
а затем представить
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="{путь}/viewer.css" rel="external nofollow" rel="external nofollow">
<script src="{путь}/jquery-1.11.3.min.js"></script>
<script src="{путь}/viewer.js"></script>
<script src="{путь}/jquery-viewer.min.js"></script>
</head>
Как использовать:
<body>
<!-- Требуется контейнер уровня блока -->
<div>
<img id="image" src="http://p16.qhimg.com/bdm/960_593_0/t01ba97d26345750c04.jpg" alt="Picture">
</div>
<div>
<ul id="images">
<li><img src="http://p7.qhimg.com/bdm/960_593_0/t01b32959885c781013.jpg" alt="Picture 1"></li>
<li><img src="http://p19.qhimg.com/bdm/480_296_0/t01bf50d8d5d76238c6.jpg" alt="Picture 2"></li>
<li><img src="http://p18.qhimg.com/bdm/960_593_0/t0177a850faae7b42f4.jpg" alt="Picture 3"></li>
</ul>
</div>
</body>
<script type="text/javascript">
var $image = $('#image');
$image.viewer({
//Встроенный дисплей (инициализация по умолчанию)
inline: false,
viewed: function () {
//Уровень масштабирования (1x)
$image.viewer('zoomTo', 1);
}
});
// Получить экземпляр Viewer.js после инициализации
var viewer = $image.data('viewer');
// Посмотреть список изображений
$('#images').viewer();
</script>
Проектная документация:Связь