Перейти к содержанию
SiviS

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

Рекомендуемые сообщения

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

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

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

Фото.jpg

Изменено пользователем SiviS

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Есть костыль

 

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

 

/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>

Пробуйте

Изменено пользователем unknown
  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Quote

<?php echo $popup; ?>

И

Quote

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

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

Изменено пользователем SiviS

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

Изменено пользователем unknown
  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Изменено пользователем SiviS

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

убираете

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:

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

 

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

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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>

 

Изменено пользователем unknown
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 21.04.2017 в 18:38, unknown сказал:

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

product_swap_image.ocmod.xml

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 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;" 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.