Как я могу создать слайдер фотографий на iPhone Safari с помощью jQuery?

Question

Я хотел бы создать средство просмотра изображений продуктов для версии сайта электронной коммерции для iPhone, и оно будет вести себя как приложение Photos.

В идеале вы могли бы перемещать изображения для перемещения вперед и назад в галерее изображений продукта.

Все это будет сделано в мобильном Safari.

Я немного поэкспериментировал с jqTouch, но похоже, что он не поддержит эту идею (у него есть поддержка смахивания, но нет очевидного способа связать скольжение с перетаскиванием изображения).

Какой-нибудь плагин или идеи реализации? Спасибо!

Answer 1

Мне нужно то же самое, решение было использовать цикл и пролистывать плагины:

"# gallery" - это контейнер со всеми тегами img.

$(function() {
 $('#gallery').cycle({
  fx: 'scrollHorz',
  timeout: 0,
  next: '',
  prev: '',
  speed: 300,
  nowrap: 0
 });
});
$(function() {
 $('#gallery').swipe({
  swipeLeft: function() { $('#gallery').cycle("next"); },
  swipeRight: function() { $('#gallery').cycle("prev") },
  threshold: {
   x: 15,
   y: 99999
  },
  preventDefaultEvents: false
 });
});

работает, но не совсем как библиотека фотографий, потому что изображения не перетаскиваются до 50% ширины перед изменением. как в решении crmunro, но на основе jQuery и плагинов.

Answer 2

не уверен, что вы решили это, но iWebkit, созданный пользователем http://worldofsai.com/photos_flick.html - может быть, вы могли бы основать это на этом?

Answer 3

Qtouch получил значительное обновление в июле. Полный пакет исходного кода теперь включает демонстрационные ролики для встраивания видео и галереи изображений с возможностью прокрутки.

Скачать r148 можно по этому адресу: http://code.google.com/p/jqextensions/downloads/list

Работает очень хорошо.

Answer 4

Вы можете проверить этот пример. откройте его в сафари на вашем iPhone))) вы можете вращать, перемещать и масштабировать изображения