Какая лучшая стратегия для перемещения эскизов в модальном окне (jQuery)

Question

Я создаю типичную фотогалерею для своего сайта. Что-то простое: на одной странице, чтобы показать миниатюры и одну страницу, чтобы отобразить фотографию с фотографиями, комментариями и т. Д.

Но, я хочу дать пользователю возможность обходить миниатюры с помощью модального окно, не нажимая на миниатюру, чтобы просмотреть фотографию, затем вернитесь назад, щелкните другое миниатюру, чтобы просмотреть следующую фотографию и так далее. Какой-то предварительный просмотр фотографий, быстрый просмотр.

Мой вопрос не в том, как это сделать, я сделаю свое исследование и выясню его и задаю вопросы в этом сообществе. Мой вопрос - это больше о стратегии, используемой для перемещения эскизов.

Большие пальцы являются дисплей на моей странице, используя типичный список уль, как и

<ul> 
<li><a href=""><img src="" width="" height="" title="" alt=""></a></li> 
<li><a href=""><img src="" width="" height="" title="" alt=""></a></li> 
<li><a href=""><img src="" width="" height="" title="" alt=""></a></li> 
<li><a href=""><img src="" width="" height="" title="" alt=""></a></li> 
... 
</ul> 

Я буду использовать JQuery для отображения изображения на модальное окно, с коротким заголовком (вероятно, название тега). И у меня будут кнопки next и prev для перемещения фотографий, а кнопка закрытия - для закрытия модального окна. Что-то простое.

Мой вопрос - это лучшая стратегия для перемещения эскизов? Должен ли я использовать список ul на месте и перемещаться по фотографиям или я должен назначить всю информацию о фотографии в массиве (используя jquery) и использовать этот массив для перемещения фотографий?

Что такое стандарт, лучший способ? Затем я выясню, как идти оттуда, но мне нужно иметь хорошую основу, прежде чем продолжить.

Благодаря

Answer 1

Дайте каждому изображению класс (thumbnail?)

Теперь вы можете легко захватить коллекцию, например,

$(".thumbnail").each(function() { 
    // do whatever 
}); 

Хранить дополнительную информацию в атрибутах:

<img class="thumbnail" data-caption="Front View" data-id="123" ... /> 

Список стиль для отображения по горизонтали без пуль хорошо и довольно типично.