Documentation / Tutorials / Tutorials & How to’s

Nano-gallery

/ Tutorials & How to’s / Nano-gallery

#1. Fetch all the images from the post

[aw2.query get_post post_slug=25-seater-training-hall-in-aundh post_type=product set='module.post' /]
[woo.get product.gallery_images set='module.gimages' product_id='{{aw2.get module.post.ID}}']

#2. Loop through all the images and create a array

[aw2.loop module.gimages]
[aw2.get function.wp_get_attachment_image_src p1="{{aw2.get item}}" p2='full' p3="" p4="{tag_attr}" set="module.image_src" /]
[aw2.get function.wp_get_attachment_image_src p1="{{aw2.get item}}" p2='thumbnail' p3="" p4="{tag_attr}" set="module.image_thumb_src" /]
//** Set array with Full and Thumb Image **//
[aw2.set_array module.images.new img_full="{{aw2.get module.image_src.0}}" img_thumb="{{aw2.get module.image_thumb_src.0}}" /]
[/aw2.loop]

#3. Gallery code

[aw2.if cond="{module.script_loaded}" equal=""]
//** Logo on gallery in the lightbox **//
[aw2.client less] .nGY2 .nGY2ViewerLogo {background: url("https://s3-ap-south-1.amazonaws.com/officingnow-stage/wp-content/uploads/2019/05/09163017/OfficingNow-icon.png") center no-repeat !important; height: 45px !important; width: 45px !important; background-size: contain !important; } [/aw2.client]
<link href="https://unpkg.com/[email protected]/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/jquery.nanogallery2.min.js"></script>
[aw2.set module.script_loaded="yes" /]
[/aw2.if]

[aw2.set module.default_img="https://s3-ap-south-1.amazonaws.com/officingnow-media/wp-content/uploads/2020/01/21181529/placeholder-1.png" /]

[aw2.if cond="{sc.images_arr.count}" less_than="2"]
[aw2.set module.gallery_setting]
{
"thumbnailHeight": "400",
"thumbnailWidth": "525",
"galleryMosaic" : [
{ "c": 1, "r": 1, "w": 1, "h": 1 }
],
"galleryMaxRows": "1",
"galleryDisplayMode": "rows",
"locationHash": false,
"thumbnailSliderDelay": 0,
"viewerToolbar": { "display": false },
"viewerDisplayLogo" : true
}
[/aw2.set]
[/aw2.if]
[aw2.else]
[aw2.set module.gallery_setting]
{
"thumbnailHeight": "228",
"thumbnailWidth": "300",
"galleryMosaic" : [
{ "c": 1, "r": 1, "w": 1, "h": 2 },
{ "c": 2, "r": 1, "w": 1, "h": 1 },
{ "c": 2, "r": 2, "w": 1, "h": 1 }
],
"galleryMaxRows": "1",
"galleryDisplayMode": "rows",
"locationHash": false,
"thumbnailSliderDelay": 0,
"viewerToolbar": { "display": false },
"viewerDisplayLogo" : true
}
[/aw2.set]
[/aw2.else]

<div id="nanogallery2" data-nanogallery2='[aw2.get module.gallery_setting /]'>
[aw2.loop sc.images_arr]
<a href="[aw2.get item.img_full /]" data-ngThumb="[aw2.get item.img_thumb /]"></a>
[/aw2.loop]

[aw2.if cond="{sc.images_arr.count}" equal=""]
[/aw2.if]
[aw2.or cond="{sc.images_arr.count}" equal="0"]
<a href="[aw2.get module.default_img /]" data-ngThumb="[aw2.get module.default_img /]"></a>
[/aw2.or]

[aw2.if cond="{sc.images_arr.count}" equal="2"]
<a href="[aw2.get module.default_img /]" data-ngThumb="[aw2.get module.default_img /]"></a>
[/aw2.if]

</div>

Categories
Most Popular

Leave a Reply

Your email address will not be published.