Помощь Добавление эффекта увеличения на любую картинку Opencart

Тема в разделе "Opencart", создана пользователем MikeleCorleone, 25 мар 2013.

Информация :
Внимание форумчане! При создании тем, или выкладывании какой-либо информации проверьте в какой ветке форума вы находитесь! Не путайте Opencart и Opencart2. При несоблюдении данного условия выносится соответствующее наказание! И потом не говорите что вас НЕ ПРЕДУПРЕЖДАЛИ! По возможности используйте обменники mail, yandex, google, dropbox, rghost Дабы избежать просьб перезалить и проблем с рекламой!
Модераторы: ZiX
  1. MikeleCorleone

    MikeleCorleone Постоялец

    Регистр.:
    29 июн 2012
    Сообщения:
    132
    Симпатии:
    7
    Добрый день, нужно чтобы на любой картинке (по выбору) на любой страничке (по выбору) включался эффект увеличения картинки как на товарах, (colorbox fancybox в зависимости что стоит).
    Возможно когда прописываешь и вставляешь картинки в описании нужно им что-либо прописать, класс, id ... тоже пойдет такой вариант - без заморочек.

    Добавлял это
    <script type="text/javascript">$('.colorbox').colorbox({overlayClose: true,opacity: 0.5});</script>
    прописывал картинке class="colorbox cboxElement" rel="colorbox"
    В итоге при нажатии на картинку экран затеняется а картинки нету совсем
     
  2. stwild

    stwild Постоялец

    Регистр.:
    30 июл 2007
    Сообщения:
    56
    Симпатии:
    14
    Код:
    <script type="text/javascript">$('.colorbox').colorbox({overlayClose: true,opacity: 0.5});</script>
    добавлял сверху или снизу картинки?

    Правильнее заключить код инициализации плагина в этот код, чтоб гарантированно он выполнялся после того, как загрузится весь DOM документа ))
    Код:
    $(document).ready(function() {
      $('.colorbox').colorbox({overlayClose: true,opacity: 0.5});
    });
    к картинке или к тегу <A>? вероятнее всего код должен выглядеть так:
    Код:
    <a href="[большая картинка]" class="colorbox cboxElement" rel="colorbox"><img src="[маленькая картинка]"></a>
    Урл картинки для отображения в модальнике скорее всего берётся из атрибута HREF, если класс приписан к картинке, а не к ссылке, но такого атрибута нет, вот и выдаёт тебе пустой экран )))

    Решать проблему надо либо вставкой ссылки, либо править js, чтоб брал не из атрибута href, а из src ))
     
    MikeleCorleone нравится это.
  3. MikeleCorleone

    MikeleCorleone Постоялец

    Регистр.:
    29 июн 2012
    Сообщения:
    132
    Симпатии:
    7
    А большая и маленькая картинки это обязательно должны быть 2 разные картинки или можно использовать одну? просто маленькая будет уменьшена до нужных размеров путем задания ей ширины и высоты?
     
  4. stwild

    stwild Постоялец

    Регистр.:
    30 июл 2007
    Сообщения:
    56
    Симпатии:
    14
    не обязательно, но как бы вполне логично)) зачем грузить здоровую картинку, чтоб показать превьюху? если не хочется делать превьюхи, то лучше поправить js, чтоб увеличивалось с img ))
     
    MikeleCorleone нравится это.
  5. MikeleCorleone

    MikeleCorleone Постоялец

    Регистр.:
    29 июн 2012
    Сообщения:
    132
    Симпатии:
    7
    Спасибо за помощь, вот так все получилось <script type="text/javascript">$(document).ready(function() { $('.colorbox').colorbox({overlayClose: true,opacity: 0.5}); });</script>
    Ну и плюс стиль и рел на ссылку
    А например можно исхитрится и написать что-нибудь в коде страницы где требуется выводить в модальном окне картинки (например если требуется в категориях то написать в category.tpl ну и т.д ) а в описании на ссылках просто задавать классы и релы ?
     
  6. stwild

    stwild Постоялец

    Регистр.:
    30 июл 2007
    Сообщения:
    56
    Симпатии:
    14
    можно ))
    js код плагина colorbox в студию :)) не видя кода трудно сказать, что нужно заменить ))

    собственно там должно быть что то вроде attr("href") его надо заменить на attr("src") и будет работать с img, а не со ссылок ))
    хотя конечно гораздо грамотнее из соображений совместимости не тупо заменить href на src, а поставить проверку вернул ли что то запрос к атрибуту href, если не вернул, то попробовать взять из src ) тогда и то и то будет работать ))
     
    MikeleCorleone нравится это.
  7. MikeleCorleone

    MikeleCorleone Постоялец

    Регистр.:
    29 июн 2012
    Сообщения:
    132
    Симпатии:
    7
    Вот colorbox, хотя скорее я не так выразился, меня устраивает вот эта конструкция <a href="[большая картинка]" class="colorbox cboxElement" rel="colorbox"><img src="[маленькая картинка]"></a>
    Я про то чтобы не вводить каждый раз <script type="text/javascript">$(document).ready(function() { $('.colorbox').colorbox({overlayClose: true,opacity: 0.5}); });</script>
    А прописать похожее в шаблоне, например если хочешь чтобы подключалось на странице категорий то прописать в category.tpl, ну чтобы каждый раз в описании не вводить...
     

    Вложения:

  8. stwild

    stwild Постоялец

    Регистр.:
    30 июл 2007
    Сообщения:
    56
    Симпатии:
    14
    либо в header.tpl прописать
    Код:
    <script type="text/javascript">$(document).ready(function() { $('.colorbox').colorbox({overlayClose: true,opacity: 0.5}); });</script>
    тогда во всех страницах появится

    либо в jquery.colorbox.js в самом низу
    Код:
    $(document).ready(function() { $('.colorbox').colorbox({overlayClose: true,opacity: 0.5}); });
    тогда вместе с колорбоксом и инициализация прогружаться будет

    по поводу src вместо href: заменить строчку
    Код:
    settings.href = settings.href || $(element).attr('href');
    на
    Код:
    settings.href = settings.href || $(element).attr('href') || $(element).attr('src');
     
    MikeleCorleone нравится это.
  9. MikeleCorleone

    MikeleCorleone Постоялец

    Регистр.:
    29 июн 2012
    Сообщения:
    132
    Симпатии:
    7
    И что это даст? все равно же придется картинку обрамлять ссылкой, только теперь класс и рел на картинку? Вот если бы вообще картинку не обрамлять ссылкой...
     
  10. stwild

    stwild Постоялец

    Регистр.:
    30 июл 2007
    Сообщения:
    56
    Симпатии:
    14
    нет, не надо будет обрамлять, можно просто в картинку прописать и всё будет работать ))
     
    MikeleCorleone нравится это.