How can I make sure that when clicking on the Announcement, the picture from the Details should open?

Question

1C-Bitrix

Hello.
There is a Gallery on the page, consisting of section elements. They have pictures for the Announcement and More, an example here facades
How to make it so that when you click on a picture, an image from More details opens? Without going to the item's detail page.

Answer 1

In a class="product-item-image-wrapper" ссылка типа href="<?=$arResult[DETAIL_PICTURE] ?>"
In 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>