Question

Помогите советом. Хочется по клику на картинку на детальной странице товара получить растягивание до 500*500.
Сейчас код выводящий картинку такой:
<div class="catalog-detail-image" id="catalog-detail-main-image">
  0 ? $arResult["DETAIL_PICTURE"]["DESCRIPTION"] : $arResult["NAME"])?>"><img itemprop="image" src="<?=$arResult['DETAIL_PICTURE_350']['SRC']?>" alt="<?=$arResult["NAME"]?>" id="catalog_detail_image" width="<?=$arResult['DETAIL_PICTURE_350']["WIDTH"]?>" height="<?=$arResult['DETAIL_PICTURE_350']["HEIGHT"]?>" />
</div>
пробовал resize, не получилось. Подскажите плиз как написать правильно.

Answer 1

подскажите, кто знает

Answer 2

Напишите код выше в оформлении кода.

Answer 3

Да, я неполный код выложил.
Вот полный:

Код

div class="catalog-detail-image" id="catalog-detail-main-image">      <a rel="catalog-detail-images" href="<?=$arResult['DETAIL_PICTURE']['SRC']?>" title="<?=(strlen($arResult["DETAIL_PICTURE"]["DESCRIPTION"]) > 0 ? $arResult["DETAIL_PICTURE"]["DESCRIPTION"] : $arResult["NAME"])?>"><img itemprop="image" src="<?=$arResult['DETAIL_PICTURE_350']['SRC']?>" alt="<?=$arResult["NAME"]?>" id="catalog_detail_image" width="<?=$arResult['DETAIL_PICTURE_350']["WIDTH"]?>" height="<?=$arResult['DETAIL_PICTURE_350']["HEIGHT"]?>" /></a>     </div>

ресайзить я так понял нужно в этом месте?:

<<< href="<?=$arResult['DETAIL_PICTURE']['SRC']?>
только не понял как((

Answer 4

Оформите сам код нормально, он же ссылкой кидается (9-ая кнопка на панели оформления)

Answer 5

борюсь с этим, секундочку
вот:

Код

<div class="catalog-detail-image" id="catalog-detail-main-image">      <a rel="catalog-detail-images" href="<?=$arResult['DETAIL_PICTURE']['SRC']?>" title="<?=(strlen($arResult["DETAIL_PICTURE"]["DESCRIPTION"]) > 0 ? $arResult["DETAIL_PICTURE"]["DESCRIPTION"] : $arResult["NAME"])?>"><img itemprop="image" src="<?=$arResult['DETAIL_PICTURE_350']['SRC']?>" alt="<?=$arResult["NAME"]?>" id="catalog_detail_image" width="<?=$arResult['DETAIL_PICTURE_350']["WIDTH"]?>" height="<?=$arResult['DETAIL_PICTURE_350']["HEIGHT"]?>" /></a>     </div>

Answer 6

Ну смотрите, у вас изображение - это ссылка, по-этому при клике вы просто-напросто перейдете по ссылке, а не измените размер изображения. Такое можно реализовать, например, при наведении курсора мышки на изображение.

Answer 7

У меня если в товаре большая фотка загружена, то она после клика растягивается, если маленькая, то остается такой же, только выезжает в форме на центр экрана.
Т.е ресайзить в момент клика бесполезно, нужно чтобы увеличенная картинка уже лежала в каталоге фоток?

Answer 8

У меня, если я вас правильно понял, шаблон bitrix:catalog.element изображения выводит так:

Код

<?if(is_array($arResult["PREVIEW_PICTURE"]) || is_array($arResult["DETAIL_PICTURE"])):?>          <td width="0%" valign="top">             <?if(is_array($arResult["PREVIEW_PICTURE"]) && is_array($arResult["DETAIL_PICTURE"])):?>                <img border="0" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arResult["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arResult["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" id="image_<?=$arResult["PREVIEW_PICTURE"]["ID"]?>" style="display:block;cursor:pointer;cursor: hand;" OnC lick="document.getElementById('image_<?=$arResult["PREVIEW_PICTURE"]["ID"]?>').style.display='none';document.getElementById('image_<?=$arResult["DETAIL_PICTURE"]["ID"]?>').style.display='block'" />                <img border="0" src="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" width="<?=$arResult["DETAIL_PICTURE"]["WIDTH"]?>" height="<?=$arResult["DETAIL_PICTURE"]["HEIGHT"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" id="image_<?=$arResult["DETAIL_PICTURE"]["ID"]?>" style="display:none;cursor:pointer; cursor: hand;" OnC lick="document.getElementById('image_<?=$arResult["DETAIL_PICTURE"]["ID"]?>').style.display='none';document.getElementById('image_<?=$arResult["PREVIEW_PICTURE"]["ID"]?>').style.display='block'" />             <?elseif(is_array($arResult["DETAIL_PICTURE"])):?>                <img border="0" src="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" width="<?=$arResult["DETAIL_PICTURE"]["WIDTH"]?>" height="<?=$arResult["DETAIL_PICTURE"]["HEIGHT"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" />             <?elseif(is_array($arResult["PREVIEW_PICTURE"])):?>                <img border="0" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arResult["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arResult["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" />             <?endif?>             <?if(count($arResult["MORE_PHOTO"])>0):?>                <br /><a href="#more_photo"><?=GetMessage("CATALOG_MORE_PHOTO")?></a>             <?endif;?>          </td>

Тоесть, если есть картинка маленькая и большая, то приклике на маленькую она прячется, а отображается большая. Если же только большая, или маленькая, то они отображаются как есть. Или я не так вас понял. У меня в шаблоне вашего кода вообще нет.

Ваш код, по-идеи, с шаблона  bitrix:catalog.section, а это не страница детального просмотра товара