Image Modal Carousel (Like wordpress)

I'm trying to build a modal like wordpress have with their images if you click them in their grid on the adminsystem.

Image from wordpress admin system with the modal:

I have a working code here:

$(".modalLink").click(function() { 
            var imageID = $(this).attr("data-imageid");
            $(".ImageId").attr("src", "../img/libary/" + imageID + ".jpg");
            $.post("jQuery.post.php", {imageID: imageID}, "json").done(function(data) { 
                var data = $.parseJSON(data);
                var nextID = data.nextID; 
                var prevID = data.prevID; 
                $(".fileurl").val(data.fileurl); 
                $(".filename").html(data.filename);
                $(".extensions").html(data.extensions); 
                $(".size").html(data.filesize);
                $(".dimensions").html(data.dimension);

                if (nextID) { $(".imageModal .Top .fa-angle-right").css({"pointer-events": "auto", "cursor": "pointer", "color": "#777"}); $(".imageModal .Top .fa-angle-right").attr("data-nextID", nextID); }
                else { 
                    $(".imageModal .Top .fa-angle-right").css({"pointer-events": "none", "cursor": "default", "color": "#ddd"}); 
                }
                if (prevID) { $(".imageModal .Top .fa-angle-left").css({"pointer-events": "auto", "cursor": "pointer", "color": "#777"}); $(".imageModal .Top .fa-angle-left").attr("data-prevID", prevID); }
                else { 
                    $(".imageModal .Top .fa-angle-left").css({"pointer-events": "none", "cursor": "default", "color": "#ddd"}); 
                }
            }); 
        });
        $(".imageModal .Top .fa-angle-right").click(function() { 
            var imageID = $(this).attr("data-nextID");
            $(".ImageId").attr("src", "../img/libary/" + imageID + ".jpg");
            $.post("jQuery.post.php", {imageID: imageID}, "json").done(function(data) { 
                var data = $.parseJSON(data);
                var nextID = data.nextID; 
                var prevID = data.prevID; 
                $(".fileurl").val(data.fileurl); 
                $(".filename").html(data.filename);
                $(".extensions").html(data.extensions); 
                $(".size").html(data.filesize);
                $(".dimensions").html(data.dimension);

                if (nextID) { $(".imageModal .Top .fa-angle-right").css({"pointer-events": "auto", "cursor": "pointer", "color": "#777"}); $(".imageModal .Top .fa-angle-right").attr("data-nextID", nextID); }
                else { 
                    $(".imageModal .Top .fa-angle-right").css({"pointer-events": "none", "cursor": "default", "color": "#ddd"}); 
                }
                if (prevID) { $(".imageModal .Top .fa-angle-left").css({"pointer-events": "auto", "cursor": "pointer", "color": "#777"}); $(".imageModal .Top .fa-angle-left").attr("data-prevID", prevID); }
                else { 
                    $(".imageModal .Top .fa-angle-left").css({"pointer-events": "none", "cursor": "default", "color": "#ddd"}); 
                }
            }); 
        });
        $(".imageModal .Top .fa-angle-left").click(function() { 
            var imageID = $(this).attr("data-prevID");
            $(".ImageId").attr("src", "../img/libary/" + imageID + ".jpg");
            $.post("jQuery.post.php", {imageID: imageID}, "json").done(function(data) { 
                var data = $.parseJSON(data);
                var nextID = data.nextID; 
                var prevID = data.prevID; 
                $(".fileurl").val(data.fileurl); 
                $(".filename").html(data.filename);
                $(".extensions").html(data.extensions); 
                $(".size").html(data.filesize);
                $(".dimensions").html(data.dimension);

                if (nextID) { $(".imageModal .Top .fa-angle-right").css({"pointer-events": "auto", "cursor": "pointer", "color": "#777"}); $(".imageModal .Top .fa-angle-right").attr("data-nextID", nextID); }
                else { 
                    $(".imageModal .Top .fa-angle-right").css({"pointer-events": "none", "cursor": "default", "color": "#ddd"}); 
                }
                if (prevID) { $(".imageModal .Top .fa-angle-left").css({"pointer-events": "auto", "cursor": "pointer", "color": "#777"}); $(".imageModal .Top .fa-angle-left").attr("data-prevID", prevID); }
                else { 
                    $(".imageModal .Top .fa-angle-left").css({"pointer-events": "none", "cursor": "default", "color": "#ddd"}); 
                }
            }); 
        });

I know a lot of code but it does the trick.

PHP Code:

    if (isset($_POST['imageID'])) { 
        $array = array();
        list($width, $height, $type, $attr) = getimagesize("../img/libary/".$_POST['imageID'].".JPG");

        $array["dimension"] = $width.' x '.$height;
        $array["filesize"] = formatBytes(filesize("../img/libary/".$_POST['imageID'].".jpg"),0);
        $array["extensions"] = strtoupper(pathinfo("../img/libary/".$_POST['imageID'].".jpg", PATHINFO_EXTENSION));
        $array["filename"] = $_database->query("SELECT * FROM imglibary WHERE imageID='".$_POST['imageID']."' LIMIT 1")->fetch_object()->name; 
        $array["fileurl"] = $_SERVER['DOCUMENT_ROOT'].'/img/libary/'.$_POST['imageID'].'.JPG';
        $array["nextID"] = (($_database->query("SELECT * FROM imglibary WHERE imageID > ".$_POST['imageID']." ORDER BY imageID ASC LIMIT 1")->num_rows == 0) ? null : $_database->query("SELECT * FROM imglibary WHERE imageID > ".$_POST['imageID']." ORDER BY imageID ASC LIMIT 1")->fetch_object()->imageID); 
        $array["prevID"] = (($_database->query("SELECT * FROM imglibary WHERE imageID < ".$_POST['imageID']." ORDER BY imageID DESC LIMIT 1")->num_rows == 0) ? null : $_database->query("SELECT * FROM imglibary WHERE imageID < ".$_POST['imageID']." ORDER BY imageID DESC LIMIT 1")->fetch_object()->imageID); 

        echo json_encode($array);
    }

But i looked up the wordpress, and when i change picture with the left and right arrow, it doesn't get the info of the picture with jQuery and my script gets it with jQuery (a lot of requests).

And wordpress doesn't reload page (or do they?) and the URL changes when i click the arrows

Anyone got any idea how they do this and how i can recreate it ?