JS image

[CNGrobler]

I need this code to not open the image in a new window, but rather to display the image on the same page?

 

<style>.elementor-gallery-title{cursor: pointer;} </style>

<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {

var filteredImages = document.querySelectorAll('.elementor-gallery-title');

//Edit the links HERE
var links = [
'https://wendyhomesmdb.co.za/wp-content/uploads/2020/04/IMG-20150624-WA0005.jpg',
'https://wendyhomesmdb.co.za/wp-content/uploads/2020/04/20150703_160201.jpg',
'https://wendyhomesmdb.co.za/wp-content/uploads/2020/04/DeckAwning3.jpg.png',
'https://wendyhomesmdb.co.za/wp-content/uploads/2020/04/IMG-20140604-WA004.jpg'
];

var _loope = function _loope(i) {
filteredImages.addEventListener('click', function () {
location = links;
});
}

for (var i = 0; i < filteredImages.length; i++) {
_loope(i);
}

});

</script>

[ishan_shah]

You can use popup for that :

with jQuery:

Cdn:https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js

File.js:

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

File.htm:

<a class="image-link" href="your-image-url">Open popup</a>pl

 Or you can also use boostrap model for that.

Here is the example:https://www.w3schools.com/howto/howto_css_modal_images.as

Edited May 18, 2020 by ishan_shah