jQuery заменяет img src в три этапа

Question

Немного застрял с этим.Я создаю галерею изображений продуктов для магазина Shopify, которая должна иметь следующую функциональность:

1. Миниатюры для каждого изображения продукта
2. Изображение среднего размера, которое входит в основное изображение'container'
3. Полноразмерное изображение, которое отображается в виде лайтбокса при нажатии на изображение среднего размера

Таким образом, вы щелкаете по миниатюре, которая загружает изображение среднего размера.в контейнер изображения, а затем щелчок по этому изображению среднего размера покажет полноразмерное изображение в виде оверлея лайтбокса.

Вот моя оценка:

<div id="imgcontainer">
                <a href="assets/product-fullsize.jpg" class="overlay"><img src="assets/product-main.jpg" alt="product-main" width="360" height="231" /></a>
            </div> <!-- End div#imgcontainer -->
            <div id="thumbs">
                <div class="thumbnav">
                    <ul>
                        <li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
                        <li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
                    </ul>
                </div> <!-- End div#thumbnav -->
                <a href="javascript:void(0);" class="tbpr">&nbsp;</a>
                <a href="javascript:void(0);" class="tbnx">&nbsp;</a>
            </div> <!-- End div#thumbs -->
        </div> <!-- End div#main -->

Может кто-нибудь порекомендовать лучший способсделай это?Shopify использует язык под названием «Liquid», который позволяет мне использовать оператор «foreach» для вывода разметки для изображений или даже только для трех типов URL-адресов изображений (миниатюра, средний и полный размер).

Обратите внимание, что не существует простого соглашения о присвоении имен для имени файла и местоположения изображения, поскольку они создаются на лету, поэтому я не могу просто поменять "среднюю" часть имени файла на "полный размер" и т. Д.

Спасибо за любые указатели,

Осу

Answer 1

Я бы добавил путь к ссылке в качестве атрибута данных ..

добавление информации о большом изображении

<li><a href="assets/medium-1.jpg" data-zoomimage="assets/big-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>

обработка кликов ( jQuery v1.7 )

первый для больших пальцев -> средний

$('.thumbnav').on('click','a',function(e){
    e.preventDefault();
    var self = $(this);
    $('#imgcontainer a') // find the link 
        .attr('href',self.data('zoomimage') ) // and update its href to point to the zoom
        .find('img') // fint the image inside
        .attr('src', self.attr('href') ); // and load the medium
});

затем для среднего -> зум

$('#imgcontainer').on('click','a',function(e){
    e.preventDefault();
    var self = $(this);
    // use lightbox system to load the link's href.. self.attr('href')
});

Answer 2

Можете ли вы сохранить полноразмерные URL-адреса в качестве атрибута данных на якорях?Например,

<li><a href="assets/medium-1.jpg" data-fullsize="assets/fullsize-1.jpg">
       <img src="assets/thumb-1.jpg" alt="..." /></a></li>

Тогда вы можете использовать что-то вроде:

$('a[data-fullsize]').click( function() {
     var $this = $(this);
     $('#imgcontainer a:first').attr('href',$this.data('fullsize'))
                               .find('img')
                               .attr('src',$this.attr('href'));
     return false;
});
$('#imgcontainer').on('click','a:first',function() {
     // load href into lightbox
     return false;
});