We strongly suggest creating a backup of your current custom skin before proceeding with these upgrade instructions. The steps below are only for those Custom skins that have been provisioned before January 2018. Starting from January 2018, all Custom Skins support the Product Image Gallery.
Depending on the base skin used for your custom skin, the upgrade is different. Utilize the list below and choose the base skin you started with. This will take you to the correct upgrade instructions.
If Aleyant is responsible for adustments to your custom skin and you would like to take advantage of this new feature, please contact support and submit a ticket indicating that you need an upgrade to the new product image gallery feature.
These instructions are for all our non responsive skins.
###PRODUCTSINGLEIMAGE_JSON, { layout:'<div class="product-image-gallery desktop"><div class="product-gallery-primary"><a href="@@@IMAGEURL:xlarge@@@" data-width="@@@IMAGESIZE:xlarge:WIDTH@@@" data-height="@@@IMAGESIZE:xlarge:HEIGHT@@@"><img src="@@@IMAGEURL:large@@@" alt="@@@PRODUCTNAME@@@" title="@@@PRODUCTNAME@@@"/></a> <span class="gallery-intro"><i class="fa fa-search-plus" aria-hidden="true"></i> @@@TEXT:clickToZoom@@@</span></div></div>', }### ###PRODUCTMULTIPLEIMAGES_JSON, { layout:'<div class="product-image-gallery desktop">@@@PRIMARYIMAGELAYOUT@@@<div class="product-gallery-carousel owl-carousel">@@@ITEMLAYOUT@@@</div></div>', primaryImageLayout:'<div class="product-gallery-primary"><a href="@@@IMAGEURL:xlarge@@@"><img src="@@@IMAGEURL:large@@@" alt="@@@PRODUCTNAME@@@" title="@@@PRODUCTNAME@@@"/></a> <span class="gallery-intro"><i class="fa fa-search-plus" aria-hidden="true"></i> @@@TEXT:clickToZoom@@@</span></div>', itemLayout:'<div class="product-gallery-carousel-item"><a href="@@@IMAGEURL:xlarge@@@" class="owl-lazy" data-src="@@@IMAGEURL:large@@@" data-width="@@@IMAGESIZE:xlarge:WIDTH@@@" data-height="@@@IMAGESIZE:xlarge:HEIGHT@@@"></a></div>' }###
@import url("css/photoswipe/photoswipe.min.css"); @import url("css/photoswipe/default-skin/default-skin.min.css"); @import url("css/owl.carousel.min.css");
/* * === product gallery === */ .product-gallery-carousel-item { background-image: url('images/loading2.gif'); } .product-gallery-carousel-item.loaded{ background-image:none; } .product-gallery-carousel-item > a.gallery-current{ box-shadow: 0 0 0 3px @Shade3@ inset; }
These instructions are for all our responsive skins that were created befor Pressero version 6.
These instructions are for all our responsive skins created after Pressero version 6.
@import url("css/photoswipe/photoswipe.min.css"); @import url("css/photoswipe/default-skin/default-skin.min.css");
<cssLibraryURLs> <string>/layout/skins/library/lib/css/library.min.css</string> <string>/layout/skins/library/base_skin/responsive6/base_skin.min.css</string> </cssLibraryURLs>
@import url("css/owl.carousel.min.css");@import url("css/productgallery.css");
Trouble logging in? Simply enter your email address OR username in order to reset your password.
For faster and more reliable delivery, add support@aleyant.com to your trusted senders list in your email software.