Замена фотографии при клике

[SiviS]

Здравствуйте, подскажите пожалуйста модуль или способы изменения стандартных фотографий на Opencart 2.X в карточке товара.

Сейчас при клике на дополнительное изображение оно открывается в лайтбоксе, а необходимо что бы оно заменяло основное изображение.

На форуме не смог найти подобной темы, поэтому прошу совета у тех кто возможно уже реализовывал подобное.

Змінено 21 квітня 2017 користувачем SiviS

[unknown]

Есть костыль

 

Перед редактированием, сохраните копию файла, чтобы можно было вернуть всё обратно

 

/catalog/view/theme/default/template/product/product.tpl

 

ищите

<?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

добавляете к img id main

вот так

<?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img id="main" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

 

ищите

            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>

добавляете onClick вот так

            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" onclick="swap(this); return false;"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>

перед

<?php echo $footer; ?>

добавляете

<script type="text/javascript">
           function swap(image) {
             document.getElementById("main").src = image.href;
         }
</script>

Пробуйте

Змінено 21 квітня 2017 користувачем unknown

[SiviS]

Изображение заменяет, но при этом к сожалению почему то еще и лайтбокс с фотографией открывается. Как отменить открытие всплывающей фотографии? И если можете - подскажите сразу, можно ли сделать анимацию перехода фотографии (что бы скроллилось влево например)? Если да то как? Заранее спасибо большое, уже 70% моих проблем решено, сам не дошел почему то до этого.

 

Я так понимаю надо убрать

Quote

<?php echo $popup; ?>

И

Quote

<?php echo $image['popup']; ?>

Или заменить это на #?

Змінено 21 квітня 2017 користувачем SiviS

[unknown]

Найдите и закомментируйте

$(document).ready(function() {
	$('.thumbnails').magnificPopup({
		type:'image',
		delegate: 'a',
		gallery: {
			enabled:true
		}
	});
});

 

Змінено 21 квітня 2017 користувачем unknown

[SiviS]

Попробую сейчас закомментировать, отпишусь позже.

Змінено 21 квітня 2017 користувачем SiviS

[SiviS]

Таааак, уже получилось, фотографии как надо меняются (правда без анимации), но теперь новая проблема - главная фотография (при нажатии на неё) она открывается тупо в той же вкладке как картинка

[unknown]

А что бы вы хотели, чтобы с ней происходило?

[SiviS]

Либо вообще без ссылки что бы было, либо что бы в лайтбоксе только основное изображение открывалось - в идеале было бы отлично)

[unknown]

Чтобы без ссылки

убираете

href="<?php echo $popup; ?>"

в

<a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>">

получается

            <?php if ($thumb) { ?>
            <li><a class="thumbnail" title="<?php echo $heading_title; ?>"><img id="main" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>

 

3 minutes ago, SiviS said:

либо что бы в лайтбоксе только основное изображение открывалось

 

Только одно изображение или галерея?

 

[SiviS]

Только одно, активное изображение (главное)

[unknown]

27 minutes ago, SiviS said:

Только одно, активное изображение (главное)

 

Главное изображение оборачиваем в div с классом main_img

к ссылке a добавляем id main_link

            <div class="main_img">
            <?php if ($thumb) { ?>
            <li><a id="main_link" class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img id="main" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            </div>

 

popup меняем с

$(document).ready(function() {
	$('.thumbnails').magnificPopup({
		type:'image',
		delegate: 'a',
		gallery: {
			enabled:true
		}
	});
});

на

$(document).ready(function() {
  $('.main_img').magnificPopup({
    type:'image',
    delegate: 'a'
  });
});

 

скрипт

<script type="text/javascript">
  function swap(image) {
    document.getElementById("main").src = image.href;
    document.getElementById("main_link").href = image.href;
  }
</script>

 

Змінено 21 квітня 2017 користувачем unknown

[SiviS]

Спасибо огромное! Надеюсь кому то будет полезен этот топик, мне лично очень помогло.

[TDimK]

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

[IvanKK]

В 21.04.2017 в 18:38, unknown сказал:

 

Только одно изображение или галерея?

 

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

[IvanKK]

В общем накидал модуль из всего вышеперечисленного,

Поучился swap image , т.е при нажатии на миниатюру она заменяется на большую картинку.

А при нажатии на большую картинку открывается popup со всей галереей.

Работает на opencart 2 x

product_swap_image.ocmod.xml

[elen11]

В 15.02.2018 в 20:06, IvanKK сказал:

В общем накидал модуль из всего вышеперечисленного,

Поучился swap image , т.е при нажатии на миниатюру она заменяется на большую картинку.

А при нажатии на большую картинку открывается popup со всей галереей.

Работает на opencart 2 x

product_swap_image.ocmod.xml

 Класс! Попробовала адаптировать синтаксис под 3 версию, т.к. там расширение twig уже идёт и оно работает) Пришлось вручную правда перепечатывать и вставлять в нужные строки. Но других решений не нашлось рабочих. Тысяча благодарностей за файлик! Правда так и не сообразила как перепечатать вот эту строку, оставила стили пустыми,чтобы проверить вообще что и как. И оказалось, что оно даже без стилей работает) 

style="max-height:<?php list($width, $height, $type, $attr) = getimagesize("$thumb"); echo $height; ?>px;max-width:<?php echo $width; ?>px;" 

 

[elen11]

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