圖像模態旋轉木馬（例如WordPress）

Question

我試圖建立一個模式像WordPress有自己的形象，如果你在自己的adminsystem電網點擊它們。

從WordPress管理系統，圖像的模態： 我這裏有一個工作代碼：

$(".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"}); 
       } 
      }); 
     }); 

我知道有很多的代碼，但它的伎倆。

PHP代碼：

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); 
    } 

但我擡頭WordPress的，當我更換圖片與左，右箭頭，它不會使用jQuery圖片的信息和我的腳本得到它與jQuery（很多請求）。

和WordPress不會重新加載頁面（或他們？），當我點擊箭頭

任何人有任何想法，他們是如何做到這一點，我怎麼可以重新創建它的URL變化？

Answer 1

經過大量搜索，我發現，他們得到的圖片被加載頁面時，然後讓他們在陣列:)

Answer 2

幫助我明白你在這裏做什麼..你試圖建立在adminsystem WordPress的圖像系統的副本，是嗎？如果是這樣，而不是使用jQuery，爲什麼不使用可以帶出更多信息的PHP調用函數。您可以從http://php.net/manual/en/ref.image.php獲取功能。