вот что имеется:
В простом и развернутом виде будет примерно так
На случай когда js не работает:
1)Верстаешь свой список превьюшек чтоб они все выводились в список (с возможной пагинацией) будет не красиво, но хотя бы будет работать.
2)На картинках вешаешь ссылки на статические страницы просмотра и их уникальные идентификаторы для реализации на js, где выводится и описание и большая картинка
На случай когда js работает (самое интересное):
1)Через js получаешь контейнер в котором есть все превьюшки (сверстанные для первого пункта) и оборачиваешь его в контейнер с примерно такими стилями
Код:
|
<style type="text/css">
.container {
float:left;
clear:both;
width:100%;
height:100px; /*высота картинок*/
overflow:hidden;
}
.container .sub-container {
float:left;
clear:both;
width:10000px;
height:100px; /*высота картинок*/
margin-right:-10000px;
}
</style>
<div class="container">
<div class="sub-container">
<a href="#"><img src="" alt="" /></a>
<a href="#"><img src="" alt="" /></a>
<a href="#"><img src="" alt="" /></a>
</div>
</div> |
2)Получаешь все картинки и через js удаляешь атрибут href у ссылок чтоб мы все обрабатывали через js. Так же навешиваешь событие onclick по которому будет происходить загрузка картинки и данных;
3)Вставляешь через js стрелочки и вешаешь на них события onclick по которому будет смещаться на определенное количество картинок (смещение вычисляется по ширине картинок);
4)Ну а далее по клику на картинку ты делаешь запрос на два сервиса с передачей идешника. Первый сервис выдает большую картинку, второй описание