2009-12-22 2 views
4

Я хотел бы создать средство просмотра изображений продукта для iPhone сайта электронной коммерции и вести себя как приложение «Фотографии».Как создать слайдер фотографий на iPhone Safari с помощью jQuery?

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

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

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

Любой плагин или идеи реализации? Благодаря!

+0

Если вы создаете специально для iPhone, вы можете вместо этого взглянуть на анимацию CSS. В этом случае вы получаете аппаратное ускорение и, следовательно, лучшую производительность. – bpapa

+0

Вы нашли решение, Бен? Помните, что совершенно нормально отвечать на ваши вопросы здесь, в Stack Overflow. :) –

ответ

0

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

+0

Спасибо, но я бы очень хотел использовать jQuery, и мне не нужно нигде рядом с такой гибкостью. Мне бы хотелось, чтобы изображения скользят влево или вправо. – Ben

1

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

+0

благодарит за ссылку, что-то awsome – JasonDavis

+0

Оригинальный код этой галереи и доступно учебное пособие: http://mydailyphoto.com/blog/iphone-safari-flick-navigation –

2

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

«#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 и плагинов.

0

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

Вы можете найти загрузку r148 на этот адрес: http://code.google.com/p/jqextensions/downloads/list

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