Vendor Plugin

Vendor : Photoswipe

Javascript image gallery for mobile and desktop, modular, framework independent.

Because Fancybox is a premium paid plugin and require a dedicated license for Extended and Multiple Smarty Customers, Photoswipe is an alternative for photoswipe! Like Swiper was styled by Smarty to look like Flickity premium vendor, the same for Photoswipe! 


/* 
	:: Vendor Path
	node_modules/photoswipe/

	:: Installed
	npm install photoswipe

	:: SOW Controller Init
*/	$.SOW.vendor.photoswipe.init('a.photoswipe');
									
<!-- optional attributes to write the defaults!
These are the Defaults set in gulp.config__vendors.js
-->
data-history="false"
data-shareEl="false"
data-tapToClose="false"
data-tapToClose="false"
data-tapToToggleControls="false"
data-showHideOpacity="true"
data-mainClass=""

Single

...
... 

<a class="photoswipe" 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
	.photoswipe-white
	.photoswipe-dark
	.photoswipe-primary
	.photoswipe-secondary 	(default)
	.photoswipe-danger
	.photoswipe-success
	.photoswipe-warning
	.photoswipe-info
	.photoswipe-pink
	.photoswipe-indigo
	.photoswipe-purple
-->
<div class="row">
	<div class="col-12 col-lg-3 mb-4">

		<a class="photoswipe photoswipe-secondary" data-photoswipe="gallery2" 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="photoswipe photoswipe-secondary" data-photoswipe="gallery2" 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="photoswipe photoswipe-secondary" data-photoswipe="gallery2" 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="photoswipe photoswipe-secondary" data-photoswipe="gallery2" 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

<!-- photoswipe : youtube -->
<a class="d-inline-block photoswipe 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>

<!-- photoswipe : vimeo -->
<a class="d-inline-block photoswipe 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>



<!-- photoswipe : local video ; mp4, webm and jpg should be in the same folder and same name -->
<a class="d-inline-block photoswipe overlay-dark overlay-opacity-4" href="demo.files/video/hd0936.mp4">
	<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>
Jump To