Vendor Plugin

Vendor : Fancybox

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

Fancybox license allow you to create a project for you (or for your customer).

Extract from fancybox license agreement:
Customers and users of your product do not need to purchase their own license – as long as they are not developing their own commercial products with fancybox. 


/* 
	:: Vendor Path
	node_modules/@fancyapps/fancybox/

	:: Installed
	npm install @fancyapps/fancybox

	:: SOW Controller Init
*/	$.SOW.vendor.fancybox.init('a.fancybox');


/* 
	:: Plugin Options|Defaults

*/	$.SOW.vendor.fancybox.init('a.fancybox', {
		loop 			: true,
		infobar 		: true, // show gallery image number
		protect 		: false, // disable right click
		transitionEffect 	: "zoom-in-out", // fade, slide, circular, tube, zoom-in-out, rotate
		transitionDuration 	: 250,
});

Single

...
... 

<a class="fancybox" href="demo.files/images/unsplash/covers/room-7DzpP1IVo8Y-unsplash.jpg">
	<img class="img-fluid" src="demo.files/images/unsplash/covers/room-7DzpP1IVo8Y-unsplash.jpg" alt="..." />
</a>

Gallery Grouping

...
...
...
... 
<!--
Color Schemas
	.fancybox-white
	.fancybox-dark
	.fancybox-primary
	.fancybox-secondary 	(default)
	.fancybox-danger
	.fancybox-success
	.fancybox-warning
	.fancybox-info
	.fancybox-pink
	.fancybox-indigo
	.fancybox-purple
-->
<div class="row">
	<div class="col-12 col-lg-3 mb-4">

		<a class="fancybox fancybox-secondary" data-fancybox="gallery" href="demo.files/images/unsplash/covers/room-l9QPabiKKhw-unsplash.jpg">
			<img class="img-fluid" src="demo.files/images/unsplash/covers/room-l9QPabiKKhw-unsplash.jpg" alt="..." />
		</a>

	</div>

	<div class="col-12 col-lg-3 mb-4">

		<a class="fancybox fancybox-secondary" data-fancybox="gallery" href="demo.files/images/unsplash/covers/room-iFIht7bf-Cs-unsplash.jpg">
			<img class="img-fluid" src="demo.files/images/unsplash/covers/room-iFIht7bf-Cs-unsplash.jpg" alt="..." />
		</a>

	</div>

	<div class="col-12 col-lg-3 mb-4">

		<a class="fancybox fancybox-secondary" data-fancybox="gallery" href="demo.files/images/unsplash/covers/room-fitPHO9yh_s-unsplash.jpg">
			<img class="img-fluid" src="demo.files/images/unsplash/covers/room-fitPHO9yh_s-unsplash.jpg" alt="..." />
		</a>

	</div>

	<div class="col-12 col-lg-3 mb-4">

		<a class="fancybox fancybox-secondary" data-fancybox="gallery" href="demo.files/images/unsplash/covers/room-_A_UV188rqk-unsplash.jpg">
			<img class="img-fluid" src="demo.files/images/unsplash/covers/room-_A_UV188rqk-unsplash.jpg" alt="..." />
		</a>

	</div>

</div>

Video

...
Youtube
...
Vimeo
...
Local Video

<!-- fancybox : youtube -->
<a class="d-inline-block fancybox overlay-dark overlay-opacity-4" href="https://www.youtube.com/watch?v=YXNk4gQCPSY">
	<img class="img-fluid" src="https://img.youtube.com/vi/YXNk4gQCPSY/maxresdefault.jpg" alt="..." />

	<!-- play button -->
	<span class="absolute-full d-flex align-items-center justify-content-center">
		<span class="d-inline-flex bg-white text-dark rounded-circle w--70 h--70 align-items-center justify-content-center shadow-lg">
			<i class="fi fi-arrow-end-full line-height-1 fs--30 mt--2"></i>
		</span>
	</span>
</a>

<!-- fancybox : vimeo -->
<a class="d-inline-block fancybox overlay-dark overlay-opacity-4" href="https://vimeo.com/57005606">
	<img class="img-fluid" src="https://i.vimeocdn.com/video/394855173_1280x720.jpg" alt="..." />

	<!-- play button -->
	<span class="absolute-full d-flex align-items-center justify-content-center">
		<span class="d-inline-flex bg-white text-dark rounded-circle w--70 h--70 align-items-center justify-content-center shadow-lg">
			<i class="fi fi-arrow-end-full line-height-1 fs--30 mt--2"></i>
		</span>
	</span>
</a>



<!-- fancybox : local video -->
<a class="d-inline-block fancybox overlay-dark overlay-opacity-4" href="#localvideo">
	<img class="img-fluid" src="../demo.files/video/hd0936.jpg" alt="..." />

	<!-- play button -->
	<span class="absolute-full d-flex align-items-center justify-content-center">
		<span class="d-inline-flex bg-white text-dark rounded-circle w--70 h--70 align-items-center justify-content-center shadow-lg">
			<i class="fi fi-arrow-end-full line-height-1 fs--30 mt--2"></i>
		</span>
	</span>
</a>

<video class="hide img-fluid" controls id="localvideo">
	<source src="../demo.files/video/hd0936.mp4" type="video/mp4">
	<source src="../demo.files/video/hd0936.webm" type="video/webm">
	<source src="../demo.files/video/hd0936.ogv" type="video/ogg">
	Your browser doesn't support HTML5 video tag.
</video>
Jump To