Here you go!
Put this in your custom js:
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
jQuery.fn.swinger = function () {
return this.each(function () {
var $container = jQuery(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
"position": "absolute",
"top": "0%",
"left": "0%",
"width": "100%"
});
var $middleImage = jQuery($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = jQuery(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
jQuery(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
jQuery(img).css({
"z-index": "2",
"position": "relative"
});
});
})
});
}
});
</script>
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
jQuery(".img-area").swinger();
});
</script>
Then add your images via "+More" > +HTML" in your laygridder. Give the row the class "img-area". Should work like this.
