Question

如果你在管理系统的网格中点击它们，我试图建立像wordpress这样的模态。

来自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没有重新加载页面（或者是吗？），当我点击箭头时，网址会发生变化

任何人都知道他们是如何做到这一点以及我如何重新创建它？

Answer 1

经过大量搜索，我发现他们在页面加载时得到了图片，然后将它们放在数组中:)

Answer 2

帮助我了解您在这里尝试做什么..您正在尝试在管理系统上构建wordpress图像系统的副本，对吗？如果是这样，为什么不使用可以带来更多信息的PHP调用函数，而不是使用jQuery。您可以从http://php.net/manual/en/ref.image.php获取功能。

Image Modal Carousel（喜欢wordpress）

2 个答案: