Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Горизонтальный скролл содержимого в стиле iPhone (https://javascript.ru/forum/jquery/10054-gorizontalnyjj-skroll-soderzhimogo-v-stile-iphone.html)

mixlink 17.06.2010 12:44

Горизонтальный скролл содержимого в стиле 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), но он почему то не прикручивается. (руки кривые скорее всего).
Буду очень признателен за советы.:yes:

Skipp 17.06.2010 12:52

mixlink,
Почитай про scrollWidth, scrollLeft и onmousemove


Часовой пояс GMT +3, время: 23:56.