Официальный веб -сайт PhotoSwipe.js: http://photoswipe.com/, файлы Photoswipe и связанные примеры могут быть загружены на этом веб -сайте.
Этот компонент в основном используется для отображения изображений и альбомов, и очень практичен.
1. Использование этого компонента требует двух файлов JS
1 <script type = "text/javascript" src = "simple-inheritance.min.js">
2 <script type = "text/javascript" src = "code-photoswipe-1.0.11.min.js"> <!-Текущая последняя версия должна быть 1.0.11->
2. Тогда структура страницы может быть такой
<div id = "Галерея"> <div> <div> <a href = "Images/full/01.jpg"> <img src = "Images/thumb/01.jpg"/> </a> </div> <div> <a href = "Images/full/02.jpg"> <img src = "Image/02. href = "images/full/04.jpg"> <img src = "Images/full/04.jpg"> <img src = "Images/full/04.jpg"> <img src = "Images/thumb/04.jpg"/> </a> </div> <div> <a href = " src = "Images/thumb/05.jpg"/> </a> </div> <div> <a href = "Images/full/06.jpg"> <img src = "Images/thumb/06.jpg"/> </a> </div> </div> </div>
Фактически, в дополнение к структуре страницы, единственные вещи, которые действительно полезны в этом HTML -коде, - это ID = "Галерея" и <a href = "Path Path"> </a> (там будет объяснено позже). Другой класс играет только роль в украшении оригинальной структуры страницы (отличается от страницы, которую вы действительно хотите иметь эффект, то есть вам просто нужно печатать в соответствии со структурой вышеуказанной страницы, а эффект страницы, который вы хотите, завершается самим плагином JS, и вам не нужно писать макет эффекта).
Страница требует как JS, так и структуры страниц, и следующее-использовать плагин.
3. Вы можете использовать два способа объявления плагина
1. Это делается путем добавления eventlistener () в браузере по умолчанию.
document.addeventlistener ("domcontentloaded", function () {code.photoswipe ('a', '#gallery'); // Это включает в себя id = "Галерея" и <a href = "..."> </a> В структуре вышеуказанной страницы, где id = "Галерея" - это контейнер // <a href = " to}, false);2. Как использовать jQuery:
$ (document) .ready (function () {$ ("#галерея a"). photoswipe ();});4. С помощью этой настройки ваша страница, вероятно, будет такой.
Эффект страницы в начале:
После нажатия на любое изображение, форма страницы становится следующей (эта страница на самом деле является страницей, которую я действительно хочу):
Вы можете четко увидеть содержимое в Alt в <img /> над страницей, и ниже будет четыре кнопки, представляющие: закройте страницу и вернитесь к исходному внешнему виду (то есть изображение выше), автоматическое воспроизведение, предыдущая страница и изображение на следующей странице.
Эффект такого альбома появляется. Конечно, вы можете использовать мышь, чтобы провести влево и справа на этой странице. Если вы находитесь на портативном устройстве, вы также можете провести влево и направо на пальце.
Этот плагин имеет много свойств:
AllingUserzoom: позволяет пользователям дважды щелкнуть, чтобы просмотреть изображения, увеличивая/перемещение. Значение по умолчанию = true
AutoStartSlideshow: Когда активируется PhotoSwipe, слайд -шоу будет автоматически воспроизведено. Значение по умолчанию = false
AllingRotationOnuserZoom: поддерживается только iOS - позволяет пользователям вращать изображения с жестами в режиме Zoom/Pan. По умолчанию = false
BackbuttonHideenabled: нажмите клавишу возврата, чтобы скрыть альбом слайдов. В основном он используется Android и Blackberry. Поддерживает BB6, Android v2.1, iOS 4 и новые версии. Значение по умолчанию = true
COPTIONANDTOOLBARAUTOHIDEDELAY: время задержки, автоматически скрытое с помощью строки заголовка и панели инструментов. Значение по умолчанию составляет = 5000 (мс). Если установлено на 0, он не будет скрыт автоматически (нажмите/нажмите, чтобы переключить видимый и скрытый)
COPTIONANDTOOLBARFLIPPOSTOHION: Положение переключения между панелью заголовка и панелью инструментов (разрешение на подпись отображается в нижней части, а панель инструментов отображается вверху). Значение по умолчанию = false
captionandtoolbarhide: скрыть панель заголовка и панель инструментов. Значение по умолчанию = false
captionandtoolbaropacity: прозрачность строки заголовка и панели инструментов (0-1). Значение по умолчанию = 0,8
captionandtoolbarshowemptycaptions: отображает панель заголовка, даже если заголовок текущего изображения пуст. Значение по умолчанию = true
Cachemode: режим кэша, code.photoswipe.cache.mode.normal (по умолчанию, нормальный) или code.photoswipe.cache.mode.aggessive (радикал, активный). Решает, как PhotoSwipe управляет кэшем изображений.
Агрессивный режим будет активно устанавливать тип не «текущих, предыдущих, следующих» изображений, которые пусты. Это будет полезно для переполнения памяти в более старых браузерах iOS. В большинстве случаев нормальный режим в порядке.
DoubletApspeed: максимальный интервал для двойного щелчка. Значение по умолчанию = 300 (мс)
DoubleTApzoomlevel: Когда пользователь дважды щелкнет, увеличение множественного уровня «масштабирования» по умолчанию. Значение по умолчанию = 2,5
EnabledRag: позволяет перетаскивать предыдущее/следующее изображение в текущий интерфейс. Значение по умолчанию = true
EnableKeyBoard: разрешить операции клавиатуры (переключение стрелка влево и левое, выход ESC, введите автоматическое воспроизведение, дисплей космической панели/скрытый панель заголовка/выход). По умолчанию = true
EnableMouseWheel: позволяет работать на колесе мыши. По умолчанию = true
FADINSPEED: скорость (продолжительность) элемента эффекта, миллисекунд. По умолчанию = 250
FADEOUTSPEED: скорость (продолжительность) элемента эффекта, миллисекунд. По умолчанию = 250
ImagesCalemethod: метод масштабирования изображений (режим). Необязательные значения: «Fit», «Fitnouscale» и «Zoom». Режим «Fit» гарантирует, что изображение адаптируется к экрану. «Fitnouscale» похож на «Fit», но не увеличивает изображение. «Zoom» будет в полном объеме изображения, но возможно, что масштабирование изображения не одинаково пропорционально. Default = "fit"
Invertmousewheel: инвертировать колесо мыши. По умолчанию прокрутка мыши переключится на следующее изображение и до предыдущего изображения. По умолчанию = false
jQueryMobile: указывает, интегрируется ли PhotoWipe в мобильный проект JQuery. По умолчанию, Photoswipe постарается решить это для вас
jquerymobiledialoghash: хэш -тег jQuery Mobile, используемый для окна и диалоговых страниц. Значение по умолчанию = "& ui-state = диалог"
Loop: автоматически зацикливается на альбоме. По умолчанию = true
Маржа: интервал между двумя изображениями, устройство - пиксели. По умолчанию = 20
Maxuserzoom: максимальное увеличение. По умолчанию = 5,0 (установить на 0 будет проигнорировано)
Minuserzoom: наименьшее восстановление кратно изображения. По умолчанию = 0,5 (установить на 0 будет проигнорировано)
MouseWheelsSpeed: Чувствительность в ответ на колесо мыши. По умолчанию = 500 (мс)
NextPreviousSlidespeed: сколько миллисекундов будут отложены после нажатия на предыдущие и следующие кнопки. По умолчанию = 0 (переключатель сейчас)
Preventhide: предотвращает закрытие PhotoShipe. Он также скрывает кнопку «Закройте» на панели инструментов. Используйте его на эксклюзивной странице (пример-примеры/08-эксклюзивное Mode.html в исходном коде). По умолчанию = false
Предотвращает LideShow: блокирует автоматический режим воспроизведения. Он также скрывает кнопку воспроизведения на панели инструментов. По умолчанию = false
Slideshowdelay: Сколько времени нужно, чтобы воспроизводить следующую картину в режиме автоматического воспроизведения? По умолчанию = 3000 (мс)
SlideSpeed: время, когда изображение скользит в вид. По умолчанию = 250 (мс)
Swipethreshold: сколько пикселей используется для сдвига пальца, чтобы вызвать событие жеста. По умолчанию = 50
Swipetimethethreshold: определяет максимальное количество миллисекунд, чтобы вызвать жест смахивания. Если он слишком медленный, он не запустит слайд и будет только перетаскивать положение текущей фотографии. По умолчанию = 250
SLIDETIMINGFUNCTION: Функция ослабления при скольжении. Default = "Easy-Out"
Zindex: начальное значение Zindex. По умолчанию = 1000
enable uiwebviewRepositiontimeout: проверяет, изменилась ли ориентация устройства. По умолчанию = false
UIWebViewResetPositionDelay: время, чтобы проверить, регулярно ли направление устройства составляет 500 (мс)
Предотвратить Defousdefaulttouchevents: блокирует события по умолчанию, такие как прокрутка страниц. По умолчанию = true
Цель: должен быть законным элементом DOM (например, Div). По умолчанию - окно (полная страница). Если это DOM низкого уровня, он будет отображаться в DOM и не может быть полным экраном.
Если вам не нужно отображать первую страницу и напрямую отобразить вторую страницу, вы можете установить ее так:
$ (document) .ready (function () {// Настройка PhotoSwipe, настройка "Preventhide: true" var thumbels = code.photoswipe ('a', '#gallery', {preventhide: true}); code.photoswipe.current.show (0);});Конечно, этот плагин имеет много других функций прослушивания:
document.addeventlistener ('domcontentloaded', function () {// onbeforeshow Вызовите этот метод до того, как галерея будет отображаться. Code.photoswipe.current.AddeventListener (code.photoswipe.eventtypes.onbeforeshow, function (e) {console.log ("onbefores); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onshow, function (e) {console.log ("onbeforeShow");}); Console.log ("onshow");}); Code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.onhide, function (e) {console.log ('onhide');}); console.log ('onshownext');}); Code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.ondisplayimage, function (e) {console.log ('onsisplayimage');}); Code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.onresetposition, function (e) {console.log ('onresetposition');}); Галерея запустила Slideshowcode.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstart, function (e) {console.log ('onlideshowstart');}); Code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.onslideshowstop, function (e) {console.log ('onslideshowstop');}); Code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.onbeforecaptionandtoolbarshow, function (e) {console.log ('onbeforecaptionandtoolbarshow');}); Code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.onbeforecaptionandtoolbarhide, function (e) {console.log ('onbeforecaptionandtoolbarhide');}); OnbeForeCaptionAndToolbarhide обычно запускает метод Code.PhotosWipe.current.AddeventListener (code.photoswipe.eventtypes.onview.Onviek, функция (E) {CODESPOLE.)Поскольку вызывающий метод интерфейса API не найден на официальном веб -сайте PhotoSwipe, а текущий уровень JS не очень хорош, некоторые из его интерфейсов API в основном не совсем понятны. Однако, когда я проверил его пример, я обнаружил, что часто появляется переменная, code.photoswipe или code.photoswipe.current. Все они были проведены в консоли. Когда я ввел code.photoswipe, появился следующий контент:
Хотя вы не можете полностью понять, что это такое, вы можете видеть, что текущий элемент включен. Затем введите Code.photoswipe.current в консоли, чтобы получить следующий контент:
Например, вы можете найти дополнительную информацию: CurrentIndex указывает, что текущее изображение индексируется в списке, а все соединение - Code.PhotosWipe.current.currentIndex представляет индексированную позицию текущего изображения. Эта информация очень важна для меня. Мы можем отобразить различную информацию о странице на разных страницах через эту информацию.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.