Предварительный просмотр мобильных изображений PhotoSwipe поддерживает предварительный просмотр ПК и в основном используется для предварительного просмотра мобильных изображений для Android и iOS.
Пакет ресурсов: Photoswipe-3.0.5
На официальном веб -сайте Photoswipe есть пакет 1.0.11, но версия 1.0.11 имеет дефекты. На некоторых телефонах Android 2 картины будут запрыгнуты, когда они скользят один раз.
(При нормальных обстоятельствах скользите один раз и прыгайте 1 изображение)
Обычный метод использования выглядит следующим образом:
Загрузите следующие файлы в пакет ресурсов в тег HED HTML:
<script type = "text/javascript" src = "klass.min.js"> </script> <script type = "text/javascript" charset = "utf-8" src = "jquery-1.8.2.js"> </script> <script type = "text/javascript" charset = "utf-8" src="jquery.transit.js"></script><script type="text/javascript" charset="utf-8" src="jquery.transit.js"></script><script type="text/javascript" charset="utf-8" src="hammer.js"></script><script type="text/javascript" charset = "utf-8" src = "jquery.hammer.js"> </script>
Формат некоторых HTML -картинок заключается в следующем:
<ul id = "Галерея"> <li> <a href = "Images/fult/001.jpg"> <img src = "Images/thumb/001.jpg"/> </a> </li> <li> <a href = "Image/002.jpg"> <img src = "Image/grath/002.jpg"/> </> lipg "/> </> lipg"/> </> lipg "/> li <li> <a href = "Images/thumb/004.jpg"> <img src = "Images/thumb/004.jpg"/> </a> </li> <li> <a href = "Images/004.jpg"> <img src = "Images/thum. href = "Images/fult/005.jpg"> <img src = "Images/thumb/005.jpg"/> </a> </li> <li> <a href = "Image/006.jpg"> <img src = "Images/thumb/006.jpg"/> </a> </li> href = "Images/full/008.jpg"/> </a> </li> <li> <a href = "Images/thumb/008.jpg"/> </a> </li> <li> <a href = "Images/009.jpg"> <img src = "Image/thumb/009. href = "Images/full/010.jpg"> <img src = "Images/thumb/010.jpg"/> </a> </li> <li> <a href = "Images/full/011.jpg"/> </a> </li> <li> <a href = "Image/012 href = "Images/thumb/012.jpg"/> </a> </li> <li> <a href = "Images/full/012.jpg"/> </a> </li> <li> <a href = "Images/full/013 href = "Images/full/014.jpg"> <img src = "Images/thumb/014.jpg"/> </a> </li> <li> <a href = "Images/015.jpg"/> </a> </li> <li> <a href = "Images/016. href = "Images/full/016.jpg"/> </a> </li> <li> <a href = "Images/thumb/016.jpg"/> </a> </li> <li> <a href = "Images/full/017.jpg"> <img src = "Images/thumb/017.JPG"/> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> <li> <a href = "Images/full/018.jpg"> <img src = "Images/thumb/018.jpg"/> </a> </li> </ul>
Часть JS вызывает этот плагин, как указано в демо -версии
(function (window, photoswipe) {document.addeventListener ('domcontentloaded', function () {var options = {}, exance = photoswipe.attach (window.document.queryselectorall ('#галерея a'), options);}, false);} (window, window.photoswipe));Вы также можете использовать: $ ("#Галерея A"). Photoswipe ();
Если часть HTML должна иметь специальный формат, ее можно вызвать следующим образом:
1. Объявит глобальные переменные: var photoglable_instance = 0;
2. Для элементов, которые должны ввести предварительный просмотр, контент выглядит следующим образом:
arr_images.push ({url: xxx}); var photoswipe = window.code.photoswipe; var exaction = photoswipe.attach (arr_images, '', photoswipe_instance); photoswipe_instance ++; exance.show (show_current); 3. Найти инициализировать в photoswipe.cache.cacheclass: function (images, options) {var i, j, cacheimage, image, src, подпись, метаданные; this.settings = options; this.images = []; for (i = 0, j = images.length; i <j; i ++) {image = image [i]; // src = this.settings.getImagesource (image); // исходный код-где изменение src = image.url; // Новый код-где подготовитель изменения = this.settings.getimageecaption (image); Metadata = this.settings.getimagemetadata (изображение); this.images.push (new Photoswipe.image.imageclass (Image, SRC, заголовок, метаданные)); }},Кроме того, была проблема с плагином, и было необходимо внести следующие модификации:
Найдите Photoswipe.documentoverlay.documentoverlayclass (изначально была проблема с позиционированием и высотой фонового плавающего слоя здесь)
ResetPosition: function () {var ширина, высота, сверху; if (this.settings.target === window) {width = util.dom.windowwidth (); // height = util.dom.bodyouterheight () * 2; // это охватывает дополнительную высоту, добавленную PhotoSwipe // Old Code-CHAUNGE HEIGHT = UTIL.DOM.DobyouterHeight (); // Новый код-разваливание // top = (this.settings.jquerymobile)? Util.dom.windowscrolltop () + 'px': '0px'; // Старый код - где изменения - top = util.dom.windowscrolltop () + 'px'; // Новый код - где изменения - if (eight <1) {height = this.ItialBodyHeight; } if (util.dom.windowHeight ()> height) {height = util.dom.windowheight (); }} else {width = util.dom.width (this.settings.target); высота = util.dom.height (this.settings.target); top = '0px'; } Util.dom.setStyle (this.el, {ширина: ширина, высота: высота, верхняя: сверху}); },Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.