Показать сообщение отдельно
  #1 (permalink)  
Старый 17.06.2010, 12:44
Новичок на форуме
Отправить личное сообщение для mixlink Посмотреть профиль Найти все сообщения от mixlink
 
Регистрация: 17.06.2010
Сообщений: 3

Горизонтальный скролл содержимого в стиле iPhone
Задача была сделать галлерею шириной 100% с навигатором для управления наверху + что бы прокручивалась зажатием и перетаскиванием элементов, как в iPhone.
Кое как выполнил первое на jQuery tools с помощью функции scrollable:

hrml:
<div class="navi"></div>
<!-- root element for scrollable -->
<div class="scrollable" id=browsable>    
   <!-- root element for the items -->
   <div class="items">
   
      <!-- 1-5 -->

      <div style="padding-left:5px">
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
      </div>
      
      <!-- 5-10 -->
      <div style="padding-left:5px">
         <img src="images/img/production/metall/2.jpg" />
                  <img src="images/img/production/metall/2.jpg" />
                           <img src="images/img/production/metall/2.jpg" />
                                    <img src="images/img/production/metall/2.jpg" />
      </div>
      
      <!-- 10-15 -->
       <div style="padding-left:5px">
         <img src="images/img/production/metall/3.jpg" />
                  <img src="images/img/production/metall/3.jpg" />
                           <img src="images/img/production/metall/3.jpg" />
                                    <img src="images/img/production/metall/3.jpg" />
      </div>
      
             <div style="padding-left:5px">
         <img src="images/img/production/metall/4.jpg" />
                  <img src="images/img/production/metall/4.jpg" />
                           <img src="images/img/production/metall/4.jpg" />
                                    <img src="images/img/production/metall/4.jpg" />
      </div>
      
      <div style="padding-left:5px">
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
         <img src="images/img/production/metall/1.jpg" />
      </div>

      
   </div>
   
</div>
</div>


java:
$(document).ready(function() {

// initialize scrollable together with the navigator plugin
$("#browsable").scrollable().navigator();	
});


А внешне это выглядит примерно так:

Так собственно сам вопрос: как к этому всему безобразию еще прикрутить функцию скроллинга в стиле прокрутики айфона?

Я гуглю уже почти месяц.
То что находил - не работало. Пробовал виджет ui.iGallery (библиотеки jquery.iphone), но он почему то не прикручивается. (руки кривые скорее всего).
Буду очень признателен за советы.
Ответить с цитированием