Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Менять большую картинку, при клике на маленькую, в детальной карточке

Просмотров: 1763

Мини скриптик, может кому пригодится для каталога товаров или новостей при использовании дополнительных картинок (обычно MORE_PHOTO). Вместо штатного, монструозного магнифера

Функционал и сам скрипт довольно простые. При клике на миниатюру, меняется большая фотография.

Выводим миниатюры и большую фотографию

Для начала, выкидываем весь участок кода, штатного вывода картинок и заменяем на этот:

<div class="more_photos">
<a href="<? echo $arResult['DETAIL_PICTURE']['SRC'] ?>" class="main_photo">
     <img src="<? echo $arResult['DETAIL_PICTURE']['SRC'] ?>" alt="<? echo $arResult['NAME'] ?>">
</a>

<a href="<? echo $arResult['DETAIL_PICTURE']['SRC'] ?>" alt="<? echo $arResult['NAME'] ?>" class="current">
    <img src="<? echo $arResult['DETAIL_PICTURE']['SRC'] ?>" alt="<? echo $arResult['NAME'] ?>">
</a>
<?
  if (count($arResult["MORE_PHOTO"]) > 0) {
   foreach ($arResult["MORE_PHOTO"] as $PHOTO) {
   $renderImage = CFile::ResizeImageGet($PHOTO, Array("width" => 200, "height" => 200), BX_RESIZE_IMAGE_EXACT, false);
?>
   <a href="<?= $PHOTO["SRC"]; ?>" alt="<? echo $arResult['NAME'] ?>">
       <img src="<?= $PHOTO["SRC"]; ?>" alt="<? echo $arResult['NAME'] ?>">
   </a>
   <? }
 } ?>
</div>

Здесь мы вывели основную картинку в окно большого просмотра. А дополнительные картинки обвернули тегом a и внутрь засунули миниатюру, сжатую в 200 на 200 пикселей (методом CFile::ResizeImageGet). В самой ссылке содержится оригинальная картинка, в нормальном размере. При этом, сама основная картинка, выведена тоже, как миниатюра и обвернута в класс current - типа, уже выбрана.

Теперь добавляем небольшой скрипт (в шаблон сайта или в файл script.js нужного компонента)

$(".more_photos").on("click", "a", function () {
     $(this).addClass("current").siblings().removeClass("current")
     $(".main_photo img").attr("src", $(this).prop("href"))
     return false;
});

Здесь все просто:

  • При клике на тег a находящийся в div-е more_photos добавляем ему class current и убираем его с пердыдущего выбранного.
  • Находим тег img внутри элемента с классом main_photo и заменяем путь к картинке из ссылки в миниатюре.
    • Ну и стилизуем все это добро на свое усмотрение.

      more_photos {
            float: left;
           width: 100px;
      }
       .more_photos a {
           display: block;
           margin-bottom: 10px;
           text-decoration: none;
           width: 100%;
           height: 100px;
           border: 3px solid;
           box-shadow: 0px 0px 1px
           transition: all .25s ease-out;
      }
      .more_photos a:hover {
           border: 3px solid;
      }
      .more_photos a.current {
           border: 3px solid;
      }
      .main_photo {
           float: right;
           width: calc(100% - 110px);
      }
       .main_photo img {
           width: 100%;
           transition: all .25s ease-out;
      }
      

      В итоге, получится что-то такое:

      миниатюры и большую фотографию

      Написать первый комментарий:

      Перетащите файлы
      Ничего не найдено
      Защита от автоматических сообщений
      Нажимая кнопку "Отправить" вы соглашаетесь
      с политикой конфиденциальности и обработки персональных данных.

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Настройка прав доступа в 1С-Битрикс Просмотров: 7544 Часто, в интернет-магазине под управлением 1С Битрикс, нужно создать группу пользователей ... Вывести артикул в печатную форму бланка заказа Просмотров: 385 Задача: в печатную форму бланка заказа добавить артикулы товаров и данные о пользователе. ... Фотогалерея на базе компонента новостей, с fancybox. Просмотров: 1542 Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогал... Помечаем новинки лейблом в каталоге битрикс Просмотров: 20036 Достаточно часто, при разработке каталога товаров или интернет магазина на системе управле... Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс Просмотров: 15306 Достаточно часто, при проверке параметров системы, в Битрикс, можно увидеть одну из ошибок... Настройка выгрузки товаров в Яндекс Маркет с сайта Битрикс Просмотров: 36701 Настройка выгрузки в Яндекс маркет в формате yml, выполняется достаточно просто, кроме одн... Дополнительные картинки в новостях Битрикс, почти фотогалерея. Просмотров: 48048 Частенько стоит задача, по мимо стандартных "Картинка для анонса" и "Деталь... Ajax форма обратной связи, реализация в битрикс Просмотров: 7577 Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в... Получение местоположений через API Битрикс c поиском по select. Просмотров: 21328 Если нужно получить список городов из модуля "Местоположения" можно воспользоваться API Би... Пошагово получить информацию о заказах и сохранить как Excel (xls) Просмотров: 535 Задача: Нужно получить информацию о заказах с возможностью указания даты создания "от"" и ... Вывести общее количество товаров в шаблоне корзины 1С-Битрикс Просмотров: 5720 Задача: вывести общее количество товаров в корзине (именно количество единиц товара, а не ... Старые шаблоны битрикс для простой верстки Просмотров: 16916 Новые версии типового интернет-магазина, который идет в комплекте с Битрикс (от 12 версии ... Вывести множественное свойство типа файл с названием и весом файла в ... Просмотров: 20203 В этой заметке расскажу как красиво вывести множественное свойство типа файл в инфоблоке 1... Глобальные фильтры на всякие случаи жизни Просмотров: 44563 Глобальный фильтр, нужен чаще всего, для вывода определенных элементов, из общего массива... Простой WEB сервер на ubuntu, для Битрикс Просмотров: 34478 Расскажу как по быстрому сконфигурировать WEB сервер для работы с Битрикс. Безо всяких ngi... FTP доступ на Виртуальной машине Битрикс Просмотров: 15919 Бывает что нужно открыть FTP доступ к заранее известной папке на сайте под управлением 1С ... Список новостей с автопрокруткой через overflow:scroll Просмотров: 5615 Простенький javascript позволит сделать автопрокрутку в шаблоне списка новостей. Достаточн... Почтовое событие на создание нового элемента инфоблока, через API Просмотров: 14341 Иногда при разработке сайта требуется реализовать функционал добавления элементов инфоблок... Ленивая подгрузка картинок в компоненте, на vue js Битрикс Просмотров: 9456 Если на одну страницу сайта выводится большое количество картинок, которые могут долго под... Отсортировать элементы в Битрикс по свойству привязка к разделам Просмотров: 27916 При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо...