Photoswipe - это фотоальбом/игра, разработанный специально для мобильных сенсорных устройств. Он совместим со всеми iPhone, iPad, Blackberry 6+ и настольными браузерами. Основная реализация основана на HTML/CSS/JavaScript и представляет собой бесплатный продукт с открытым исходным кодом.
Для кого
Пусть мобильный сайт испытает альбом альбома, как приложение Native.
Отличные функции
Photoswipe предоставляет пользователям знакомый и интуитивно понятный фотоальбом интерактивного интерфейса.
Официальный сайт
http://www.photoswipe.com/
Пример исходного кода
http://github.com/downloads/codecomputerlove/photoswipe/code.photoswipe-3.0.5.zip
GitHub
https://github.com/codecomputerlove/photoswipe
Онлайн демо
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
Функции совместимости
PhotoSwipe совместим с большим количеством мобильных устройств и всеми популярными библиотеками класса JavaScript/Frameworks. Существуют как версии на основе JQUERY, версии без jQuery, так и мобильные версии JQUERY. Конечно, все в одном есть в примере исходного кода.
Как использовать
PhotoSwipe - это независимая библиотека JavaScript, которая может быть легко интегрирована в ваш сайт. Было сделано много оптимизаций для мобильных браузеров (Webkits). Конечно, для настольных браузеров и jQueryMobile соответствующие версии также представлены в пакете исходного кода.
Ссылки на библиотеку классов
<!- Photoswipe ссылался на Klass раньше. Если вам нужно увеличить скорость нагрузки, вы можете добавить тег/атрибут для SEFER в Script->
<script type = "text/javascript" src = "klass.min.js"> </script>
<!- Важное примечание, если вы не используете версию jQuery, в соответствии с т.е. возникнет ошибка. Конечно, если вы используете версию jQuery, вам нужно представить jQuery->
<script type = "text/javascript" src = "code.photoswipe-3.0.5.min.js"> </script>
Позвонить код
/* Добавить Domcontentloaded Слушание событий, аналогично функции готовой JQUERY.
Примеры метода по умолчанию/01-default.html
Пожалуйста, проверите.
*/
// Метод PhotoSwipe.Attach получает 3 параметра (коллекция элементов HTML, необязательная информация о конфигурации и необязательный идентификатор типа строки, когда несколько экземпляров)
document.addeventlistener ('domcontentloaded', function () {
// Установить PhotoSwipe, чтобы привязаться ко всем тегам <a> под контейнером с идентификатором в качестве галереи. Нажмите, чтобы активировать
// Объект здесь - это экземпляр PhotoSwipe, и вы можете использовать соответствующие методы, такие как Show (0), Hide () и т. Д.
var myphotoswipe = code.photoswipe.attach (window.document.queryselectorall ('#галерея a'), {enablemousewheel: false, enablekeyboard: false});
}, ЛОЖЬ);
Если вы используете jQuery, код вызова выглядит следующим образом:
// jQuery версия, соответствующий файл JS также должен быть изменен в файле JS
// см. Примеры/02-jQuery.html для получения подробной информации для примеров
$ (document) .ready (function () {
// Объект здесь - это экземпляр PhotoSwipe, и вы можете использовать соответствующие методы, такие как Show (0), Hide () и т. Д.
var myphotoswipe = $ ("#галерея a"). Photoswipe ({enablemousewheel: false, enablekeyboard: false});
});
HTML -код
<!- Ul li и другие вещи используются для отображения миниатюр, а также могут быть отрегулированы по мере необходимости. Элемент <img> ниже - миниатюра. Если не требуется, SRC может быть установлен на пустые ->
<ul id = "Галерея">
<li> <a href = "Images/full/01.jpg"> <img src = "Images/thumb/01.jpg"/> </a> </li>
<li> <a href = "Images/full/02.jpg"> <img src = "Images/thumb/02.jpg"/> </a> </li>
<li> <a href = "Images/full/03.jpg"> <img src = "Images/thumb/03.jpg"/> </a> </li>
<li> <a href = "Images/full/04.jpg"> <img src = "Images/thumb/04.jpg"/> </a> </li>
<li> <a href = "Images/full/05.jpg"> <img src = "Images/thumb/05.jpg"/> </a> </li>
<li> <a href = "Images/full/06.jpg"> <img src = "Images/thumb/06.jpg"/> </a> </li>
</ul>
Описание параметра
1. AllowUserZoom: позволяет пользователям дважды щелкнуть, чтобы просмотреть изображения, увеличивая/перемещение. Значение по умолчанию = true
2.AutostartSlideshow: Когда активируется PhotoSwipe, слайд -шоу будет автоматически воспроизведено. Значение по умолчанию = false
3. AllowrotationOnuserzoom: поддерживается только iOS - позволяет пользователям вращать изображения с жестами в режиме Zoom/Pan. Значение по умолчанию = false
4.backbuttonhideenabled: нажмите клавишу Return, чтобы скрыть слайды альбома. В основном он используется Android и Blackberry. Он поддерживает BB6, Android v2.1, iOS 4 и новые версии. Значение по умолчанию = true
5. Captionandtoolbarautohidedelay: время задержки, автоматически скрытое на строке заголовка и панели инструментов. Значение по умолчанию составляет = 5000 (мс). Если установлено на 0, он не будет скрыт автоматически (нажмите/нажмите, чтобы переключить видимый и скрытый)
6.captionandtoolbarflipposition: Переключите панель заголовка и панель инструментов (пусть подпись будет отображаться внизу, а панель инструментов отображается вверху). Значение по умолчанию = false
7.captionandtoolbarhide: скрыть строку заголовка и панель инструментов. Значение по умолчанию = false
8. Captionandtoolbaropacity: прозрачность строки заголовка и панели инструментов (0-1). Значение по умолчанию = 0,8
9.captionandtoolbarshowemptycaptions: отображается строка заголовка, даже если заголовок текущего изображения пусто. Значение по умолчанию = true
10.cachemode: режим кэша, code.photoswipe.cache.mode.normal (по умолчанию, нормально) или code.photoswipe.cache.mode.aggessive (радикал, активный). Решает, как PhotoSwipe управляет кэшем изображений.
11. Агрессивный режим будет активно устанавливать тип не «текущих, предыдущих, следующих» изображений, которые пусты. Это будет полезно для переполнения памяти в более старых браузерах iOS. В большинстве случаев нормальный режим в порядке.
12.doubletapspeed: максимальный интервал для двойного щелчка. Значение по умолчанию = 300 (мс)
13.doubletapzoomlevel: Когда пользователь дважды щелкнет, увеличение множественного уровня является уровнем «масштабирования» по умолчанию. Значение по умолчанию = 2,5
14.enabledRag: позволяет перетаскивать предыдущее/следующее изображение в текущий интерфейс. Значение по умолчанию = true
15.EnableKeyboard: Разрешить операции с клавиатурой (переключение со стрелками влево и вправо, выход ESC, введите автоматическое воспроизведение, дисплей космической панели/скрытый панель заголовка/выход). По умолчанию = true
16. По умолчанию = true
17.fadeinspeed: скорость (продолжительность) элемента эффекта, миллисекунды. По умолчанию = 250
18.fadeoutspeed: скорость (продолжительность) элемента затухания, миллисекунд. По умолчанию = 250
19.ImagesCalemethod: метод масштабирования изображений (режим). Необязательные значения: «Fit», «Fitnouscale» и «Zoom». Режим «Fit» гарантирует, что изображение адаптируется к экрану. «Fitnouscale» похож на «Fit», но не увеличивает изображение. «Zoom» будет в полном объеме изображения, но возможно, что масштабирование изображения не одинаково пропорционально. Default = "fit"
20.Invertmousewheel: инвертировать колесо мыши. По умолчанию прокрутка мыши переключится на следующее изображение и до предыдущего изображения. По умолчанию = false
21.jquerymobile: указывает, интегрируется ли PhotoWipe в мобильный проект JQuery. По умолчанию, Photoswipe постарается решить это для вас
22.jquerymobiledialoghash: хэш -тег jQuery Mobile, используемый на страницах окна и диалога. Значение по умолчанию = "& ui-state = диалог"
23.loop: автоматически зацикливается на альбоме. По умолчанию = true
24.Margin: интервал между двумя изображениями, устройство - пиксели. По умолчанию = 20
25.maxuserzoom: максимальное увеличение. По умолчанию = 5,0 (установить на 0 будет проигнорировано)
26.minuserzoom: наименьшее восстановление кратно изображения. По умолчанию = 0,5 (установить на 0 будет проигнорировано)
27.mousewheelspeed: Чувствительность в ответ на колесо мыши. По умолчанию = 500 (мс)
28.nextpreviousslidespeed: Сколько миллисекундов будет отложено, когда нажат предыдущие и следующие кнопки. По умолчанию = 0 (переключатель сейчас)
29.preventhide: предотвращает закрытие пользователей. Он также скрывает кнопку «Закройте» на панели инструментов. Используйте его на эксклюзивной странице (пример-примеры/08-эксклюзивное Mode.html в исходном коде). По умолчанию = false
30.PreventsLideShow: блокирует автоматический режим воспроизведения. Он также скрывает кнопку воспроизведения на панели инструментов. По умолчанию = false
31.slideshowdelay: Сколько времени нужно, чтобы воспроизводить следующую картину в режиме автоматического воспроизведения? По умолчанию = 3000 (мс)
32.Slidespeed: время, когда изображение скользит в вид. По умолчанию = 250 (мс)
33. Swipethrethold: сколько пикселей делает палец, чтобы вызвать событие жеста. По умолчанию = 50
34. Swiepetimethethreshold: определяет максимальное количество миллисекундов, чтобы вызвать жест смахивания. Если он слишком медленный, он не запустит слайд и будет только перетаскивать положение текущей фотографии. По умолчанию = 250
35.SlidetimingFunction: функция ослабления при скольжении. Default = "Easy-Out"
36.zindex: начальное значение Zindex. По умолчанию = 1000
37.EnableUiWebViewRepositionTimeout: Проверьте, изменилась ли ориентация устройства. По умолчанию = false
38.
39.preventDefaultTouchEvents: блокирует событие Touch по умолчанию, например, прокрутка страниц. По умолчанию = true
40.Target: должен быть законным элементом DOM (например, Div). По умолчанию - окно (полная страница). Если это DOM низкого уровня, он будет отображаться в DOM и не может быть полным экраном.
Пользовательские функции
getToolbar: function () { /*Возвращает строку HTML, которая будет отображаться на панели инструментов* /}, GetImagesource: Function (el) { /*Расскажите галерею, как получить SRC изображения. По умолчанию галерея предполагает, что вы используете тег <a> для обертывания миниатюры <img>, а атрибут href тега <a> является URL -адресом полного изображения. В настоящее время этот метод может быть использован для возврата пути изображения соответствующего элемента. Это может быть всех видов. Например, атрибут REL или что -то в этом роде. Было бы проще иметь jQuery. */ return el.getattribute ('rel'); }, GetImageeCaption: function (el) { /** Как метод GetiMagesource, этот метод возвращает заголовок изображения. По умолчанию галерея ищет атрибут ALT изображения. * /}, getimagemetadata: function (el) { / ** Если вы прослушиваете OndisPlayimage, то вы можете получить дополнительную метанулу через эту функцию. И использовать */ return in ondisplayimage {longdescription: el.getattribute (el, 'data-long-description')}}}}}}Для телефонов Android один щелчок вызовет проблему, когда он будет закрыт, а нижний слой все равно будет запускать событие Click. Наше решение заключается в следующем:
// триггер щелкнет на нескольких уровнях на телефонах Android. Мы используем таймер для перехвата var event_timeout = 500; // предотвратить несколько триггеров событий // блокировать последовательные события за короткое время var multiclickprevent = false; function mefformmulticlick () {if (multiclickprevent) {return false; } multiclickprevent = true; window.settimeout (function () {multiclickprevent = false;}, event_timeout); вернуть истину; }; // адаптироваться к браузере var useragent = navigator.useragent; var wikeios = useragent.match (/iPad | iPhone | iPod/i); var LikeAndroid = userAgent.match (/android/i); var SpecialClick = "click"; if (wailios) {SpecialClick = "touchStart chlick"; } else if (likeAndroid) {SpecialClick = "touchStart chlick"; } /Пример $ (". T_right"). Live (SpecialClick, function () {if (PreflectMulticlick ()) {// выполнять другие операции} else {// else - чтобы отклонить операцию, вы можете напрямую вернуть false или другие возвраты false;}}); // Пример $ ("body"). Live (SpecialClick, function () {if (PreflectMulticlick ()) {// выполнять другие операции}});Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.