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

Михаил Базаров

Дата последнего входа: сегодня в 01:16
Дата регистрации: 7 Февраля 2012 21:17
День рождения: 7 ноября
Пол: Мужской
Михаил Базаров -> Всем
26 июня 10:47
При клике на маленькую фотографию меняется большая.

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

PHP
<div class="more_photos">
     <a href="<? echo $arResult['DETAIL_PICTURE']['SRC'] ?>" 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>
JS
$(".more_photos").on("click", "a", function () {
     $(this).addClass("current").siblings().removeClass("current")
     $(".main_photo img").attr("src", $(this).prop("href"))
     return false;
});
CSS
Тут уж сами под свой дизайн. Например, как на картинке
.more_photos {
      float: left;
     width: 100px;
}

 .more_photos a {
     display: block;
     margin-bottom: 10px;
     text-decoration: none;
     width: 100%;
     height: 100px;
     border: 3px #fff solid;
     box-shadow: 0px 0px 1px #ccc;
     transition: all .25s ease-out;
}

   .more_photos a:hover {
     border: 3px #f6f6f6 solid;
}
   .more_photos a.current {
     border: 3px #D68189 solid;
}

.main_photo {
     float: right;
     width: calc(100% - 110px);
}

 .main_photo img {
     width: 100%;
     transition: all .25s ease-out;
}

PS: само собой, на сайте должен быть подключен jquery
Фото:
Валерий
Михаил Базаров, нет все указанно. Даже попробовал создав другое свойство.
<div class="more_photos">
<a href="<? echo $arResult['DETAIL_PICTURE']['SRC'] ?>" class="current">
  <img src="<? echo $arResult['DETAIL_PICTURE']['SRC'] ?>" alt="<? echo $arResult['NAME'] ?>">
</a>
<?
if (count($arResult["PHOTOS"]) > 0) {
  foreach ($arResult["PHOTOS"] 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>
Файлы:
0 Б
0 Б
0 Б
Михаил Базаров
Тогда, странно. Подсказать не могу, видимо: какая-то мелочь упущена. Но какая не понятно, нужно в живую смотреть
Валерий
Михаил Базаров, каким то образом все таки разобрался с отображением. Чтобы отображались фотографии с свойства MORE_PHOTO, но теперь нет самой большой картинки, которая должна меняться.

Ваш код вставил:
<div class="more_photos">
     <a href="<? echo $arResult['DETAIL_PICTURE']['SRC'] ?>" 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>

Но большой картинки все равно нет.
Файлы:
0 Б