Cacher is the code snippet organizer for pro developers

	$arWaterMark = Array(
		array(
			"name" => "watermark",
			"position" => "center",
			"type" => "image",
			"size" => array('width'=>75,'height' => 75),
			"file" => $_SERVER["DOCUMENT_ROOT"].'/upload/copy.png',
			"fill" => "exact",
		)
	);
$f_big = CFile::ResizeImageGet($arResult[PREVIEW_PICTURE], array('width'=>500,'height' => 500), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, true, $arWaterMark);
$f = CFile::ResizeImageGet($arResult[PREVIEW_PICTURE], array('width'=>300,'height' => 300), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, true, $arWaterMark);
$f_mini = CFile::ResizeImageGet($arResult[PREVIEW_PICTURE], array('width'=>180,'height' => 157), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, true, $arWaterMark);
?>
<div class="product_block white_block">
	<div class="img"><span class="big_img"><a class="fancybox bigpic_l" href="<?=$f_big[src]?>" rel="group"><img class="bigpic" src="<?=$f[src]?>" alt=" "/></a></span>
	<?if(!empty($arResult[PROPERTIES][FOTOS][VALUE])):?>
		<div class="slider2"><div class="prev"></div><div class="next"></div>
			<div class="hold"><ul>
				<li class="product_image" data-small="<?=$f[src]?>" data-big="<?=$f_big[src]?>"> <a class="fancybox" href="<?=$f_big[src]?>" rel="group"><img src="<?=$f_mini[src]?>" width="180" height="157" alt=""/> </a></li>
				<?foreach($arResult[PROPERTIES][FOTOS][VALUE] as $Fval):?>
				<?
				$file_big = CFile::ResizeImageGet($Fval, array('width'=>500,'height' => 500), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, true, $arWaterMark);
				$file = CFile::ResizeImageGet($Fval, array('width'=>300,'height' => 300), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, true, $arWaterMark);
				$file_mini = CFile::ResizeImageGet($Fval, array('width'=>180,'height' => 157), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, true, $arWaterMark);
				?>
				<li class="product_image" data-small="<?=$file[src]?>" data-big="<?=$file_big[src]?>"><a class="fancybox" href="<?=$file_big[src]?>" rel="group"><img src="<?=$file_mini[src]?>" width="180" height="157" alt=""/> </a></li>
				<?endforeach;?>
			</ul></div>
		</div>
	<?endif;?>
	</div>
	<div class="product_descript"><h1 class="h2"><?=$arResult[NAME]?></h1><?=$arResult[PREVIEW_TEXT]?></div>
	<div class="product_price">
		<?=$ar_res["PRICE"]?> <span class="rub"><?=$GLOBALS[VJWEB][SETTINGS][CURRENCY]?></span>
		<?if($arResult[PROPERTIES][PRICE_OLD][VALUE]):?><del><?=$arResult[PROPERTIES][PRICE_OLD][VALUE]?> <?=$GLOBALS[VJWEB][SETTINGS][CURRENCY]?></del><?endif;?>
		<div class="btn_hold">
			<a class="btn btn_red" href="?expcart=add&idit=<?=$arResult[ID]?>&url=<?=$arResult[DETAIL_PAGE_URL]?>"><?=GetMessage("VJWEB_EXPCART_BUY")?></a>
			<a class="btn btn_bgn" href="?expcart=add_oneclick&idit=<?=$arResult[ID]?>&url=<?=$arResult[DETAIL_PAGE_URL]?>"><?=GetMessage("VJWEB_EXPCART_BUYONECLICK")?></a>
		</div>
	</div>
</div>

$('.fancybox').fancybox();

$('a.fancybox img.bigpic').on('click', function() {
	var big = $('a.bigpic_l').attr('href');
		$('a.fancybox').each(function(keyP, valP){
			$(valP).attr('rel', 'group');
			var rel = $(valP).attr('href');
			var cl = $(valP).attr('class');
			if(rel == big && cl == 'fancybox')$(valP).attr('rel', '');
		});
	});
});