jQuery заменяет img src за три шага

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

  1. Эскизы для каждого изображения продукта
  2. Изображение среднего размера, которое входит в "контейнер" основного изображения.
  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-адресов изображений (миниатюрные, средние и полноразмерные).

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

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

Осу


jquery shopify gallery
person Osu    schedule 04.12.2011    source источник
comment
Как вы ожидаете, что кто-то напишет JS-функцию для чего-то, что не имеет собственного имени, а только для чего-то, случайно сгенерированного на лету, для этого должна быть какая-то система, иначе как он найдет правильный образ для любого данного продукта. Я уверен, что кто-то все же подскажет вам несколько общих идей.   -  person adeneo    schedule 05.12.2011
comment
@adenao, я предполагаю, что он может иметь доступ к имени файла, но это не просто предопределенный префикс / суффикс для каждого размера ..   -  person Gabriele Petrioli    schedule 05.12.2011
comment
Что ж, Осу ясно пишет, что не существует простого соглашения об именах для имени файла / местоположения и что часть изображения, которая описывает размер, т.е. thumb / medium / fullsize нельзя просто поменять местами. Либо вопрос на удивление плохо сформулирован, либо ответы пока неверны. Поскольку Osu также пишет, что на самом деле можно сгенерировать имена файлов изображений с указанным описанием в Shopify, я предполагаю, что это первое, что вопрос плохо сформирован и что ответы верны.   -  person adeneo    schedule 05.12.2011
comment
adeneo, извините, это было недостаточно ясно - все, что я пытался сказать, это то, что URL-адреса изображений, используемые Shopify, похоже, не имеют для них общего шаблона, поэтому я не думаю, что могу зацепиться за что-то вроде имя, чтобы просто заменить слово вроде «средний» на «полноразмерный», чтобы изменить основное изображение в контейнере. Я уверен, вы понимаете, что иногда бывает трудно выразить эти вещи словами. @tvanfosson и Габи, спасибо за ответы. На первый взгляд, они оба выглядят подходящими, поэтому я собираюсь попробовать их и вернуться к вам обоим.   -  person Osu    schedule 05.12.2011

Ответы (2)


arrow_upward
1
arrow_downward

Можете ли вы сохранить полноразмерные 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;
});
person tvanfosson    schedule 04.12.2011
comment
Абсолютно фантастично. Это работает как мечта (на .attr('src',$this.attr('href')); отсутствует скобка, но в остальном - отлично. Спасибо! - person Osu; 05.12.2011
comment
просто быстрый вопрос: если бы я хотел создавать переходы с постепенным появлением и исчезновением при щелчке по миниатюрам, знаете ли вы, как бы я это сделал? Я пробовал связывать fadeIn и fadeOut до «.find ('img') », но это было не очень удовлетворительно, так как изображения появлялись, затем исчезали и исчезали! Спасибо - person Osu; 07.12.2011
comment
Вы должны связать остальное в обратном вызове с fadeOut. .find('img').fadeOut( function() { $(this).attr('src', $this.attr('href')).fadeIn(); }) Вы, вероятно, захотите выбрать более подходящее имя, чем $this, чтобы сохранить привязку, по которой щелкают, чтобы избежать путаницы в обратном вызове. - person tvanfosson; 07.12.2011
comment
И снова отличное решение. Склоняюсь к вашим знаниям, спасибо за вашу помощь. - person Osu; 07.12.2011

arrow_upward
1
arrow_downward

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

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

<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')
});
person Gabriele Petrioli    schedule 04.12.2011
comment
Большое спасибо за ваш ответ - похоже, оба из них работают, поэтому спасибо, что нашли время, чтобы ответить - person Osu; 05.12.2011