JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<a href='javascript:void(0)' src='http://oi47.tinypic.com/11kjdpe.jpg' class='imagePopup' data-id='n' >
   <img src='Imagini-min/someimage.jpg' />
</a>
<div class="gallery" align="center">
    <p id="close"><img src="Resurse/close.png" /></p>
    <p id="prev"><img src="Resurse/left.png" /></p>
        <img id="change" src="" data-id=""/>
    <p id="next"><img src="Resurse/right.png" /></p>
</div>

JavaScript

var targetImg=$(".gallery").find("#change");
targetImg.load(function(){
SetPosition();
    alert(" set");
});

$("a.imagePopup").click(function(e){
    //The event.preventDefault() method stops the default action of an element from happening. but it does not work in all browser.
    
    e.preventDefault();

    var img = $(this).attr("src");
    var id = $(this).attr("data-id");
    var galleryID=$(".gallery").find("#change").attr("data-id");
    
    $(".gallery").show();    
    if(id != targetImg.attr("data-id")){
        targetImg.attr("src", img).hide().fadeIn(100).attr("data-id", id);
        alert("src="+targetImg.attr("src")+", id="+targetImg.attr("data-id"));
       
        SetPosition();
    }
   });

function SetPosition(){
    var width = $(".gallery").find("#change").width();
    var height = $(".gallery").find("#change").height();
    var button_h = $(".gallery #prev img").height();

    $(".gallery #prev").css("top",(height/2 - button_h + 10 ));
    $(".gallery #next").css("top",(height/2 - button_h + 8 ));

    $(".gallery").css("width",(width+50));
    $(".gallery").css("height",(height+10));
}