{% extends '../_layouts/_dev.twig' %}
{% block content %}

	<div id="debug">Debug</div>

	<h2>Alvadi Image Plugins</h2>

	<div class="flex-row row-16">
		<div class="flex-col flex-col-md-7">
			<div style="background: #222222; padding: 8px;">
				<div class="img-block">{# aip-rotate-box #}
					<img src="https://pics3.alpics.info/pics/spares/360/14332359/14332359-01-s.jpg"
						data-aip-rotate="url : https://pics3.alpics.info/pics/spares/360/14332359/14332359-{col}-s.jpg; autospin : infinite; columns : 36; filename : 14332359-{col}-s.jpg; large-filename : 14332359-{col}-l.jpg;"
						alt="" />
				</div>
			</div>
		</div>
	</div>

	<div class="mb-40"></div>

	<div class="flex-row row-16">
		<div class="flex-col-3">
			<div class="img-block" data-aip-preview="url : https://alpics.info/pics/spares/big/51228.jpg">
				<img src="https://alpics.info/pics/spares/small/51228.jpg" alt="" />
			</div>
			Картинка с возможностью превью по ховеру
			<br />Определяющий элемент - <strong>data-src</strong>, <strong>data-aipView</strong>
		</div>
		<div class="flex-col-3">
			<div class="img-block" data-aip-preview="url : https://alpics.info/pics/spares/big/51228.jpg" data-aip-overlay="url : https://alpics.info/pics/spares/big/51228.jpg">
				<img src="https://alpics.info/pics/spares/small/51228.jpg" alt="" />
			</div>
			Картинка с возможностью превью и открытием по клику
			<br />Определяющий элемент - <strong>ссылка</strong>
		</div>
		<div class="flex-col-3"></div>
		<div class="flex-col-3">
			<div class="img-block"
				data-aip-preview="url : https://alpics.info/pics/spares/big/51228.jpg"
				data-aip-overlay="url : https://alpics.info/pics/spares/big/51228.jpg"
				data-aip-rotate="url : https://pics3.alpics.info/pics/spares/360/14332359/14332359-{col}-l.jpg; autospin : infinite; columns : 36; filename : 14332359-{col}-s.jpg; large-filename : 14332359-{col}-l.jpg;">
				<img src="https://alpics.info/pics/spares/small/51228.jpg" alt="" />
			</div>
			Картинка с возможностью превью и открытием по клику
			<br />Определяющий элемент - <strong>ссылка</strong>
		</div>
	</div>

	<div class="mb-40"></div>

	<div class="flex-row row-16">
		<div class="flex-col-2">
			<div class="img-block" data-aip-overlay="options???" data-aip-src="https://alpics.info/pics/spares/big/51228.jpg" data-aip-gallery="gallery">
				<img src="https://alpics.info/pics/spares/small/51228.jpg" alt="" />
			</div>
		</div>
		<div class="flex-col-2">
			<div class="img-block" data-aip-overlay="options???" data-aip-src="https://alpics.info/pics/spares/big/51228.jpg" data-aip-gallery="gallery">
				<img src="https://alpics.info/pics/spares/small/51228.jpg" alt="" />
			</div>
		</div>
		<div class="flex-col-2">
			<div class="img-block" data-aip-overlay="options???" data-aip-src="https://alpics.info/pics/spares/big/51228.jpg" data-aip-gallery="gallery">
				<img src="https://alpics.info/pics/spares/small/51228.jpg" alt="" />
			</div>
		</div>
		<div class="flex-col-2">
			<div class="img-block" data-aip-overlay="options???" data-aip-src="https://alpics.info/pics/spares/big/51228.jpg" data-aip-gallery="gallery">
				<img src="https://alpics.info/pics/spares/small/51228.jpg" alt="" />
			</div>
		</div>
	</div>

	<div class="mb-40"></div>

{% endblock %}