How to make a portfolio in 1C Bitrix?

Question

css

How to make such a portfolio on Bitrix?
The block with works is displayed through the Infoblock. It is displayed on the page with the usual output of news.
It is necessary that by clicking on the picture from the Announcement, the picture from the Detailed view opens.
The announcement call code is standard:

<?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
      <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
        <a href="<?=$arItem["DETAIL_PAGE_URL"]?>"><img
            class="preview_picture"
            border="0"
            src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
            width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>"
            height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>"
            alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
            title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
            /></a>
      <?else:?>
        <img
          class="preview_picture"
          border="0"
          src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
          width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>"
          height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>"
          alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
          title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
          />
      <?endif;?>
    <?endif?>

How to make a large photo open on click?
Or maybe there is a better solution?

Answer 1

use this
lokeshdhakar.com/projects/lightbox2