Слишком долго читаю.Это ядро моего сценария галереи.Это выглядит сложнее, чем на самом деле ... но из-за моего отсутствия знаний JQuery (Javascript) я не могу программировать его самостоятельно.Большинство javascript - это только псевдо, так что было бы неплохо, если бы вы могли перевести псевдо-javascript в действительно действительный javascript (Jquery).
У меня есть Галерея, которая показывает большое изображение.У меня есть список миниатюр, который содержит изображения большого пальца, которые пользователь может щелкнуть, чтобы перемещаться между изображениями галереи.У меня есть информационный пул.Это список, который содержит все большие изображения для галереи.Галерея получает информацию из этого информационного пула.- Я использую невидимый пул во время некоторых проблем с анимацией.
HTML
<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
</ul>
</div>
<div id="thumbs">
<ul>
<li>Thumb 1</li> <--! This list contains thumbnails for the gallery-->
<li>Thumb 2</li>
<li>Thumb 3</li>
<li>Thumb 4</li>
</ul>
</div>
<div style="display:hidden;" id="pool"> <-- its invisible for the human eyes -->
<ul> <--! This list is the information pool which stores the big pictures of the gallery-->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Псевдо (JQuery) Javascript
$('#thumbs ul > li).click( function() {
$(this).add the next li from the pool to this list //this snippet is important for me - how do I write this?
});
Взаимодействие с пользователем, например Это рабочий процесс, как он должен работать - я открыт для любой хорошей идеи, чтобы получить результат
Пользователь нажимает на миниатюру № 3 Сценарий получает элемент 3 из # пула и привлекает его к #галерея (необходим Javascript ^^)
выглядит следующим образом:
HTML
<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
<li>Item 3</li>
</ul>
</div>
Теперь мы анимируем (прокручиваем 800px к элементу 3)
$(#gallery ul).animate(right: -800);
HTML
<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
<li>Item 3</li> <--!The User will see this big picture now -->
</ul>
</div>
Javascript
$('#gallery ul li').erase the not see able < li> Item 1 </ li> from the list
Должен выглядеть так:
HTML
<div id="gallery">
<ul>
<li>Item 3</li> <--!The User will see this big picture now and Item 1 is gone-->
</ul>
</div>
Пользователь нажимает большой палец 2
Привлеките пункт 2 из #pool в галерею! Но не помещайте его под пункт 3 - не ставьте его выше пункта 3, поэтому мы можем прокручивать влево вместо прокрутки вправо
Должно выглядеть так:
HTML
<div id="gallery">
<ul>
<li>Item 2</li> <--! This is putted above < li> Item 3 < /li> -->
<li>Item 3</li> <--!The User will see this big picture now and Item 1 is gone-->
</ul>
</div>
Теперь мы анимируем (прокручиваем 800px к элементу 2)
$(#gallery ul).animate(right: 800);
Пользователь теперь видит изображение только из элемента 2
Javascript
$('#gallery ul li').erase the not see able < li> Item 3 </ li> from the list
Должно выглядеть так:
HTML
<div id="gallery">
<ul>
<li>Item 2</li> <--!The User will see this big picture now and Item 3 is gone-->
</ul>
</div>