javascripts popup for images popup

 base.html:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

 this is plugin

 style.js:

$(document).ready(function() {

// required elements

var imgPopup = $('.img-popup');

var imgCont = $('.container__img-holder');

var popupImage = $('.img-popup img');

var closeBtn = $('.close-btn');

// handle events

imgCont.on('click', function() {

var img_src = $(this).children('img').attr('src');

imgPopup.children('img').attr('src', img_src);

imgPopup.addClass('opened');

});

$(imgPopup, closeBtn).on('click', function() {

imgPopup.removeClass('opened');

imgPopup.children('img').attr('src', '');

});

popupImage.on('click', function(e) {

e.stopPropagation();

});

});

const popupImageFun = () => {

var imgPopup = $('.img-popup');

var imgCont = $('.container__img-holder');

var popupImage = $('.img-popup img');

var closeBtn = $('.close-btn');

// handle events

imgCont.on('click', function() {

var img_src = $(this).children('img').attr('src');

imgPopup.children('img').attr('src', img_src);

imgPopup.addClass('opened');

});

$(imgPopup, closeBtn).on('click', function() {

imgPopup.removeClass('opened');

imgPopup.children('img').attr('src', '');

});

popupImage.on('click', function(e) {

e.stopPropagation();

});

}

 this is for create popup images function

 main.js:

$('#run-data-insights-btn').click(function(e){

e.preventDefault();

console.group('run data insight');

console.log(sessionStorage.getItem('data_input'));

$(".analysis_runing_img").show()

$(".analysis_console-text").show()

console.log('click');

var this_context = $(this);

var csrftoken = getCookie('csrftoken');

var formData = {"status": "ok"}

$.ajax({

url: '/data-input-insight-run-data-insights/',

type: 'POST',

data: formData,

enctype: 'multipart/form-data',

contentType: false,

processData: false,

headers: {

'X-CSRFToken': csrftoken

},

beforeSend: function(){

console.log("before send");

},

success: function (response) {

console.clear()

console.group(response);

// console.clear()

// console.group(response)

$("#left-feature-engineering-insight").removeClass("is_disabled");

$("#proceed_to_feature_engineering_btn").removeClass("is_disabled");

$("#run-data-insights-btn").addClass("is_disabled")

var html = "";

flug=1;

var plot_files = response.figures;

$(".analysis_runing_img").hide()

$(".analysis_console-text").hide()

plot_files.forEach(function (arrayItem) {

console.log(arrayItem);

html += '<div class="container__img-holder">'

html += '<img class="img-thumbnail" src="/media/figures/'+response.user_name+"/"+arrayItem+'" />'

html += '</div>'

});

sessionStorage.setItem("session_data_figures", JSON.stringify(response.figures));

// sessionStorage.setItem("button_stage", 1);

// var stage=localStorage.getItem("button_stage");

var stage=Number(sessionStorage.getItem('button_stage'));

console.log("------------");

console.log(stage);

sessionStorage.setItem("button_stage", 'click-run-data-insights-btn');

console.log(sessionStorage.getItem("button_stage"))

// sessionStorage.setItem("button_stage", Number(stage+1));

sessionStorage.setItem("session_data_intermediate", JSON.stringify(response.images));

sessionStorage.setItem("user_name", response.user_name);

// session_data = JSON.parse(sessionStorage.getItem("session_data_figures"));

// console.log(session_data)

// session_data.forEach(function (arrayItem) {

// console.log(arrayItem);

// html += '<div class="col-md-6">'

// html += '<img class="img-thumbnail" src="/media/figures/'+response.user_name+"/"+arrayItem+'" />'

// html += '</div>'

// });

// $('#intermediate-img').html(html);

var plot_files = response.images;

plot_files.forEach(function (arrayItem) {

console.log(arrayItem);

html += '<div class="container__img-holder">'

html += '<img class="img-thumbnail" src="/media/intermediate/'+response.user_name+"/"+arrayItem+'" />'

html += '</div>'

});

$('#intermediate-img').html(html);

// location.href = "#datainsights_stab";

toastr.info('Figure creation completed!');

nextTab();

popupImageFun();

},

error: function(err) {

console.log(err);

// toastr.error('uploaded file not valid')

},

complete: function(res, err){

console.log(res, err)

console.group(typeof res.responseText)

// localStorage.setItem("analysis_response", JSON.stringify(res.responseText))

// console.log("analysis_response")

}

});

});

 this is for using popupImageFun();