SOW : Ajax image
SOW plugins are part of Smarty Core, written from scratch!
src/js/sow.core/sow.dropdown_ajax.js
Image Switcher Ajax
Read about data-ddimg-ajax-populate-params
<!--
Ajax : Image Switcher
1. Load images from a json (ajax)
(images are loaded ONLY on click)
2. Update on image click (ajax)
GET -or- POST : both supported
++ Cache
data-ddimg-cache="true"
+ Used if possible, to avoid multiple server request
on exact same URL (and params). Set "false" to disable!
++ ++
AJAX UPDATE PARAMS SENT TO SERVER (data-ddimg-ajax-update-url="....")
{ ajax:'true', img_src:img_src, img_id:img_id }
(including custom params from data-ddimg-ajax-update-params="...")
-->
<!-- image set -->
<div class="dropup d-inline-block">
<!-- dropdown trigger -->
<label data-bs-toggle="dropdown" class="dropdown-image-list rounded text-center position-relative bg-light d-block cursor-pointer mb-0 rounded" style="width:100px;height:100px">
<!-- icon (no image) -->
<span class="absolute-full d-middle z-index-1">
<i class="fi fi-image fs-1 text-muted"></i>
</span>
<!-- image -->
<span class="dropdown-image-container d-block position-relative z-index-2 absolute-full bg-cover rounded overlow-hidden"
style="background-image:url(../demo.files/images/unsplash/products/cosmetics/the-honest-company--kCEUoJFH7I-unsplash-min.jpg)"><!-- image --></span>
</label>
<div class="dropdown-menu dropdown-menu-click-update p-1"
data-ddimg-ajax-populate-url="_ajax/dropdown_ajax_image_switcher.json"
data-ddimg-ajax-populate-params="['action','image_list']['param2','value2']"
data-ddimg-ajax-populate-method="GET"
data-ddimg-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ddimg-ajax-update-params="['action','image_update']['product_id','1']"
data-ddimg-ajax-update-method="GET"
data-ddimg-cache="true"
data-ddimg-toast-success="Successfully Updated!"
data-ddimg-toast-position="top-center"
data-ddimg-noimg-text="No Images">
<h6 class="px-1 pt-1" style="width:280px">
Select Image
</h6>
<div class="scrollable-vertical scrollable-styled-dark max-h-300">
<!-- remove button -->
<a href="#" class="dropdown-image-reset position-relative bg-light float-start m-1 p-0 d-middle text-decoration-none rounded overflow-hidden">
<i class="fi fi-close fs-4 text-gray-500"></i>
</a>
<div class="dropdown-ajax-container"><!-- populated by ajax --></div>
</div>
</div>
</div>
<!-- blank -->
<div class="dropup d-inline-block">
<!-- dropdown trigger -->
<label data-bs-toggle="dropdown" class="dropdown-image-list rounded text-center position-relative bg-light d-block cursor-pointer mb-0 rounded" style="width:100px;height:100px">
<!-- icon (no image) -->
<span class="absolute-full d-middle z-index-1">
<i class="fi fi-image fs-1 text-muted"></i>
</span>
<!-- image -->
<span class="dropdown-image-container d-block position-relative z-index-2 absolute-full bg-cover rounded overlow-hidden"><!-- image --></span>
</label>
<div class="dropdown-menu dropdown-menu-click-update p-1"
data-ddimg-ajax-populate-url="_ajax/dropdown_ajax_image_switcher.json"
data-ddimg-ajax-populate-params="['action','image_list']['param2','value2']"
data-ddimg-ajax-populate-method="GET"
data-ddimg-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ddimg-ajax-update-params="['action','image_update']['product_id','1']"
data-ddimg-ajax-update-method="GET"
data-ddimg-cache="true"
data-ddimg-toast-success="Successfully Updated!"
data-ddimg-toast-position="top-center"
data-ddimg-noimg-text="No Images" style="width:280px">
<h6 class="px-1 pt-1">
Select Image
</h6>
<div class="scrollable-vertical scrollable-styled-dark max-h-300">
<!-- remove button -->
<a href="#" class="dropdown-image-reset position-relative bg-light float-start m-1 p-0 d-middle text-decoration-none rounded overflow-hidden">
<i class="fi fi-close fs-4 text-gray-500"></i>
</a>
<div class="dropdown-ajax-container"><!-- populated by ajax --></div>
</div>
</div>
</div>
[
{
"img_id": "1",
"img_src": "../demo.files/images/unsplash/products/cosmetics/the-honest-company--kCEUoJFH7I-unsplash-min.jpg"
},{
"img_id": "2",
"img_src": "../demo.files/images/unsplash/products/cosmetics/the-honest-company-3_oeUiADKuU-unsplash-min.jpg"
},{
"img_id": "3",
"img_src": "../demo.files/images/unsplash/products/cosmetics/the-honest-company-4RGQRWNLYxY-unsplash-min.jpg"
},{
"img_id": "4",
"img_src": "../demo.files/images/unsplash/products/cosmetics/the-honest-company-9M2YRsl-acc-unsplash-min.jpg"
},{
"img_id": "5",
"img_src": "../demo.files/images/unsplash/products/cosmetics/the-honest-company-iXFelifXseA-unsplash-min.jpg"
}
]
Image switcher without ajax
<!--
Ajax : Image Switcher
1. Load images from a json (ajax)
(images are loaded ONLY on click)
2. On image click update hidden inputs only
(inpus can also be added to ajax update (above example))
++ Cache
data-ddimg-cache="true"
+ Used if possible, to avoid multiple server request
on exact same URL (and params). Set "false" to disable!
-->
<!-- image set -->
<div class="dropup d-inline-block mx-1">
<!-- dropdown trigger -->
<label data-bs-toggle="dropdown" class="dropdown-image-list rounded text-center position-relative bg-light d-block cursor-pointer mb-0 rounded" style="width:100px;height:100px">
<!-- icon (no image) -->
<span class="absolute-full d-middle z-index-1">
<i class="fi fi-image fs-1 text-muted"></i>
</span>
<!-- image -->
<span class="dropdown-image-container d-block position-relative z-index-2 absolute-full bg-cover rounded overlow-hidden"
style="background-image:url(../demo.files/images/unsplash/products/cosmetics/the-honest-company--kCEUoJFH7I-unsplash-min.jpg)"><!-- image --></span>
<!-- inputs : updated by JS -->
<input type="hidden" class="dropdown-ddimg-img-id" name="img_id[]" value="1"><!-- database image id -->
<input type="hidden" class="dropdown-ddimg-img-src" name="img_src[]" value="../demo.files/images/unsplash/products/cosmetics/the-honest-company--kCEUoJFH7I-unsplash-min.jpg">
</label>
<div class="dropdown-menu dropdown-menu-click-update p-1"
data-ddimg-ajax-populate-url="_ajax/dropdown_ajax_image_switcher.json"
data-ddimg-ajax-populate-params="['action','image_list']['param2','value2']"
data-ddimg-ajax-populate-method="GET"
data-ddimg-cache="true"
data-ddimg-noimg-text="No Images" style="width:280px">
<h6 class="px-1 pt-1">
Select Image
</h6>
<div class="scrollable-vertical scrollable-styled-dark" style="max-height: 300px;">
<!-- remove button -->
<a href="#" class="dropdown-image-reset position-relative bg-light float-start m-1 p-0 d-middle text-decoration-none rounded overflow-hidden" style="width:80px;height:80px">
<i class="fi fi-close fs-4 text-gray-500"></i>
</a>
<div class="dropdown-ajax-container"><!-- populated by ajax --></div>
</div>
</div>
</div>
<!-- blank -->
<div class="dropup d-inline-block mx-1">
<!-- dropdown trigger -->
<label data-bs-toggle="dropdown" class="dropdown-image-list rounded text-center position-relative bg-light d-block cursor-pointer mb-0 rounded" style="width:100px;height:100px">
<!-- icon (no image) -->
<span class="absolute-full d-middle z-index-1">
<i class="fi fi-image fs-1 text-muted"></i>
</span>
<!-- image -->
<span class="dropdown-image-container d-block position-relative z-index-2 absolute-full bg-cover rounded overlow-hidden"><!-- image --></span>
<!-- inputs : updated by JS -->
<input type="hidden" class="dropdown-ddimg-img-id" name="img_id[]" value="0"><!-- database image id -->
<input type="hidden" class="dropdown-ddimg-img-src" name="img_src[]" value="">
</label>
<div class="dropdown-menu dropdown-menu-click-update p-1"
data-ddimg-ajax-populate-url="_ajax/dropdown_ajax_image_switcher.json"
data-ddimg-ajax-populate-params="['action','image_list']['param2','value2']"
data-ddimg-ajax-populate-method="GET"
data-ddimg-cache="true"
data-ddimg-noimg-text="No Images" style="width:280px">
<h6 class="px-1 pt-1">
Select Image
</h6>
<div class="scrollable-vertical scrollable-styled-dark" style="max-height:300px">
<!-- remove button -->
<a href="#" class="dropdown-image-reset position-relative bg-light float-start m-1 p-0 d-middle text-decoration-none rounded overflow-hidden" style="width:80px;height:80px">
<i class="fi fi-close fs-4 text-gray-500"></i>
</a>
<div class="dropdown-ajax-container"><!-- populated by ajax --></div>
</div>
</div>
</div>
[
{
"img_id": "1",
"img_src": "../demo.files/images/unsplash/products/cosmetics/the-honest-company--kCEUoJFH7I-unsplash-min.jpg"
},{
"img_id": "2",
"img_src": "../demo.files/images/unsplash/products/cosmetics/the-honest-company-3_oeUiADKuU-unsplash-min.jpg"
},{
"img_id": "3",
"img_src": "../demo.files/images/unsplash/products/cosmetics/the-honest-company-4RGQRWNLYxY-unsplash-min.jpg"
},{
"img_id": "4",
"img_src": "../demo.files/images/unsplash/products/cosmetics/the-honest-company-9M2YRsl-acc-unsplash-min.jpg"
},{
"img_id": "5",
"img_src": "../demo.files/images/unsplash/products/cosmetics/the-honest-company-iXFelifXseA-unsplash-min.jpg"
}
]