[РЕШЕНО] Всплывающее изображение

[plazmatics]

Здравствуйте.

Интересует создание некой галереи изображений в магазине на основе статьи, только с картинками увеличивающихся по клику. Изображении товаров увеличиваются по клику. Как тоже самое реализовать в статьях?

Благодарю.

[georg]

И у меня вопрос по всплывающим изображениям: как сделать всплывающие изображения в категориях, в списке товров? Хочу сделать линк "Увеличить", при нажатии на который буду видеть увеличенное изображение. Сделать по аналогии ч карточкой товара через fancybox у меня не вышло.

[templater]

всплывающее изображение в статьях и пр.:

<a class="colorbox" href="/image/data/big.jpg" rel="colorbox"><img src="/image/data/small.jpg"></a>

[georg]

спасибо за ответ, только не совсем ясно, как им пользоваться. например, у меня в списке товаров есть такая строчка:

div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

то есть - изображение одно, правильно же? когда оно выводится, как миниатюра - оно ресайзится, а надо по клику на изображение вывести его же, только увеличенное, правильно?

[templater]

нет, изображения для разных размеров у вас разные - их автоматически создает движок (можете убедиться в этом, посмотрев линки на картинки).

[georg]

я ставлю в списке товаров( в категории)

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
<a class="fancybox" href="<?php echo $product['thumb']; ?>" rel="fancybox"><img src="/<?php echo $product['thumb']; ?>"></a>

- выводит миниатюру.

если поставить

<a class="fancybox" href="<?php echo $product['image']; ?>" rel="fancybox"><img src="/<?php echo $product['thumb']; ?>"></a>

- выдает ошибку. Может, надо в контроллере дописать что-то для вывода большого изображения?

[freelancer]

я ставлю в списке товаров( в категории)

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

<a class="fancybox" href="<?php echo $product['thumb']; ?>" rel="fancybox"><img src="/<?php echo $product['thumb']; ?>"></a> - выводит миниатюру.

если поставить <a class="fancybox" href="<?php echo $product['image]; ?>" rel="fancybox"><img src="/<?php echo $product['thumb']; ?>"></a> - выдает ошибку. Может, надо в контроллере дописать что-то для вывода большого изображения?

fancybox был до 1.5.2, дальше его заменили на colorbox

[dsd10]

Рад, что наткнулся на этот пост. Нужно вставить картинку, чтоб увеличивалась.

Но вот вопрос: при нажатии картинка открывается в этом же окне без всяких эффектов. В чем может быть проблема? ОС 1.5.4.1

[tim21701]

Проблема может быть в

class="colorbox" rel="colorbox"

которые тоже необходимо исправить - всё зависит от самого скрипта...

[dsd10]

Проблема может быть в

class="colorbox" rel="colorbox"

которые тоже необходимо исправить - всё зависит от самого скрипта...

Так я так и сделал, как выше написали

<a class="colorbox" href="/image/data/big.jpg" rel="colorbox"><img src="/image/data/small.jpg"></a>

А как бы поточнее узнать класс в OS 1.5.4.1? Где он прописан? p.s. vqmod стоит, если что.

[AlexFisher]

Не забывайте, что данные теги нужно вставлять через "источник"

[dsd10]

Не забывайте, что данные теги нужно вставлять через "источник"

как так? :blink:

Я просто в футере хочу поместить карту, где расположен объект, ну и чтоб по клику она выплывала посередке.

Т.е. я в tpl все это дело вставить пытаюсь.

[AlexFisher]

Не углядел. Мне почему-то казалось, что это в information будет вывод.

[dsd10]

Не углядел. Мне почему-то казалось, что это в information будет вывод.

в общем вопрос так и не решился...

задавал этот вопрос на других форумах, пытался вставить и немного поменять код со страницы товара, где нормально всплывает картинка - ни фи га.

неужели никто не делал такого?

[afwollis]

dsd10,

<a class="colorbox2" href="/image/data/big.jpg" rel="colorbox"><img src="/image/data/small.jpg"></a>

<script type="text/javascript"><!--
$('.colorbox2').colorbox({
overlayClose: true,
opacity: 0.5
});
//--></script>

css-класс "colorbox2" - чтобы не возникло конфликтов.

[WebMarket]

Не подскажете, для версии ocStore 1.5.5.1.2 какой будет правильный код? Предыдущий не работает...

[AlexFisher]

Шаблон? Fancybox? Всякое может быть. Если jquery+colorbox подключены и работают, то решение, приведенное afwollis'ом не может не работать.

[WebMarket]

Шаблон - стандартный шаблон сборки. К нему нужно что-то дополнительно подключать? Судя по всему что нет...

[AlexFisher]

доступы в личку. помогу. решение выложу в теме.

[WebMarket]

AlexFisher, так до сих пор ничем и не помог (несмотря на все доступы и пароли). Может быть кто-нибудь другой сможет довести до ума этот "РЕШЕННЫЙ" способ?

Змінено 4 серпня 2015 користувачем WebMarket

[avkm]

Удалось ли кому-то решить вопрос?

делаю всплывающие изображения в статье на ocStore 1.5.5.1.2

шаблон дефолтный, jquery+colorbox подключены, но изображение упорно открывается в том же окне.

[NSK54]

dsd10,

 

<a class="colorbox2" href="/image/data/big.jpg" rel="colorbox"><img src="/image/data/small.jpg"></a>

<script type="text/javascript"><!--
$('.colorbox2').colorbox({
overlayClose: true,
opacity: 0.5
});
//--></script>

css-класс "colorbox2" - чтобы не возникло конфликтов.

 

Огромное спасибо! Всю плешь себе проела, убила несколько часов в поисках что- где просмотрела и почему не работает.

Сейчас все работает корректно, как и должно быть. Еще раз большое спасибо!

[Viktoriya]

А если нет colorbox, а есть magnific popup, то как быть?

[Egor2014]

вопрос актуальный, как реализовать всплывающую картинку в статье, CMS OPENCART.PRO Версия 2.3.0.2.3

 

Взял код со страницы товара, но не получилось:

 

<div class="thumbnails">
<div class="image">
<a class="thumbnail" href="/image/catalog/sertifikat/sertifikat-07.jpg"><img src="/image/catalog/sertifikat/sertifikat-07-m.jpg" alt="Сертификат"></a>
</div>
</div>

 

Змінено 6 квітня 2018 користувачем Egor2014

[helen2014]

Вот рабий вариант.

Работает в статьях и тпл.

<div class="inline">

<div class="col-md-3 col-xs-6"><a class="gallery" href="/image/catalog/banners/c_2_m.jpg"><img src="/image/catalog/banners/c_2_m.jpg" title="Изготовление ключей" alt="Изготовление ключей" class="img-responsive"><i class="fa fa-arrows zoom-icon"></i></a></div>

<div class="col-md-3 col-xs-6"><a class="gallery" href="/image/catalog/banners/c_3_m.jpg"><img src="/image/catalog/banners/c_3_m.jpg" title="Изготовление ключей" alt="Изготовление ключей" class="img-responsive"><i class="fa fa-arrows zoom-icon"></i></a></div>

<div class="col-md-3 col-xs-6"><a class="gallery" href="/image/catalog/banners/c_4_m.jpg"><img src="/image/catalog/banners/c_4_m.jpg" title="Изготовление ключей" alt="Изготовление ключей" class="img-responsive"><i class="fa fa-arrows zoom-icon"></i></a></div>

</div>

скрипт добавьте в footer вашего шаблона

<script>
$(document).ready(function()
{
$('.gallery').magnificPopup(
 {
 type: 'image',
 gallery: {enabled: true},
 removalDelay: 500,
 mainClass: 'mfp-fade'
 });
});
</script>