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

Социальная сеть
Данное сообщество не является официальным и не преследует ни каких целей. Владелец сайта оставляет за собой право удалять сообщения по своему усмотрению. Рекламные темы и сообщения только с согласия администратора.

Вход Регистрация
Быстрый вход / регистрация, через социальную сеть
Регистрируясь на сайте, Вы безоговорочно принимаете условия политики конфеденциальности и обработки персональных данных

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

Дата последнего входа: вчера в 22:45
Дата регистрации: 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
Фото: