Как сделать, чтобы при клике на Анонс должна открываться картинка из Подробнее?

Question

[Надежда Головина]

Здравствуйте.
Есть Галерея на странице, состоящая из элементов раздела. У них есть картинки для Анонса и Подробнее, пример тут фасады
Как сделать так, чтобы при клике на картинку открывалось изображение из Подробнее? Без перехода на детальную страницу элемента.

Answer 1

[Антон]

В a class="product-item-image-wrapper" ссылка типа href="<?=$arResult[DETAIL_PICTURE] ?>"
В span class="product-item-image-original"

ссылка style="background-image: url('<?=$arResult[PREVIEW_PICTURE] ?>'); "

spoiler

<div class="product-item-material">
		<a class="product-item-image-wrapper" href="/upload/iblock/1df/13.jpg" title="ДЕКОР 3/3 для шкафов" data-entity="image-wrapper">
			<span class="product-item-image-slider-slide-container slide" id="bx_3966226736_1493_ec5d0e2cff91ab20debac17d8febe5be_pict_slider" style="display: none;" data-slider-interval="3000" data-slider-wrap="true">
					</span>
		<span class="product-item-image-original" id="bx_3966226736_1493_ec5d0e2cff91ab20debac17d8febe5be_pict" style="background-image: url('/upload/iblock/800/13.jpg'); "></span>
				<span class="product-item-image-slider-control-container" id="bx_3966226736_1493_ec5d0e2cff91ab20debac17d8febe5be_pict_slider_indicator" style="display: none;">
					</span>
				</a>
		<p class="product-item-title">
				<span>
		<!-- <a href="/materialy/fasady/687324/" title="ДЕКОР 3/3"> -->
				ДЕКОР 3/3				<!-- </a> -->
		</span>
			</p>
						<div class="product-item-info-container product-item-price-container" data-entity="price-block">
												<span class="product-item-price-current" id="bx_3966226736_1493_ec5d0e2cff91ab20debac17d8febe5be_price">
													</span>
					</div>
										<!--<div class="product-item-info-container product-item-hidden" data-entity="buttons-block">-->
					<div class="product-item-info-container" data-entity="buttons-block">
														 <div class="product-item-button-container">
																		<!-- <button class="btn btn-link btn-md"
										id="bx_3966226736_1493_ec5d0e2cff91ab20debac17d8febe5be_not_avail" href="javascript:void(0)" rel="nofollow">
										Нет в наличии									</button> -->
								<!-- <div class="product-item-order">
								<div><a href="#modal1" class="popup-content">Уточнить цену</a></div>								
								<div><a href="#modal3" class="popup-content">Заказать</a></div>	
								</div> -->
								
								</div> 
								
													</div>
					</div>

Comments

[Надежда Головина]

В моем случае получилось так

<a href="<?=$arItem['DETAIL_PICTURE']['SRC'] ?>"></a>

НО! Открывается новая вкладка. Осталось сделать всплывающее окно

[Антон]

Надежда Головина, не должно, если сразу не было.
Покажите код до и после.

[Надежда Головина]

Антон, это пример, а это боевой

[Антон]

Надежда Головина, Покажите код

[Надежда Головина]

Антон,

<div class="<? echo ($arItem['SECOND_PICT'] ? 'bx_catalog_item double' : 'bx_catalog_item'); ?>"><div class="bx_catalog_item_container" id="<? echo $strMainID; ?>">
			<a id="<? echo $arItemIDs['PICT']; ?>" href="<?=$arItem['DETAIL_PICTURE']['SRC'] ?>" class="bx_catalog_item_images" style="background-image: url('<? echo $arItem['PREVIEW_PICTURE']['SRC']; ?>')" title="<? echo $imgTitle; ?>"><?
		if ('Y' == $arParams['SHOW_DISCOUNT_PERCENT'])</div>

Это, где надо сделать всплывающее окно

[Антон]

Надежда Головина, исправьте ошибку и ваш код будет работать
Uncaught Error: Bootstrap's JavaScript requires jQuery