Поскольку вы на самом деле не задавали вопрос, я предполагаю, что вы спрашиваете, с чего начать.Вы также не указали свою HTML-структуру, поэтому мне придется предположить, что это тоже.
HTML-структура
<div id="gallery">
<img id="main_image" />
<div>
<img src="image1-thumbnail.jpg" />
<img src="image2-thumbnail.jpg" />
<img src="image3-thumbnail.jpg" />
<img src="image4-thumbnail.jpg" />
</div>
</div>
Начните с создания плагина jQuery:
(function ($) {
$.fn.gallery = function () {
};
})(jQuery)
Это гарантирует, что ваш код будет полностью пригоден для повторного использования и не вызовет конфликтов имен, если вы захотите использовать его с другим фреймворком в будущем.Затем вы хотите добавить событие щелчка к каждой миниатюре, чтобы изменить SRC основного изображения:
(function ($) {
$.fn.gallery = function () {
this.find($(this).attr('id') + '>div>img').click(function () {
$(this).siblings('img').removeClass('selected');
$(this).addClass('selected');
var mainImageSrc = $(this).attr('src').replace('-thumbnail','');
$(this).parent().siblings('img').attr('src',mainImageSrc);
});
return this; // jQuery plugins should (nearly) always return this to make them chainable
};
})(jQuery);
Наконец, вызовите вашу функцию:
jQuery(function ($) {
$('#gallery').gallery();
});
Этот код должен предоставитьбазовый функционал.Я оставлю вас работать над тем, чтобы сделать миниатюры прокручиваемыми, и, если вы действительно чувствуете это, создайте эффект плавного перехода между изображениями (подсказка: вам нужно два тега img, с CSS, чтобы положить их друг на друга, затем .animate() непрозрачность исчезает между ними).Надеюсь, это поможет вам.