Jquery 如何在彩盒/灯箱中打开div？_Jquery_Wordpress_Lightbox_Colorbox

Jquery 如何在彩盒/灯箱中打开div？

jquery wordpress

Jquery 如何在彩盒/灯箱中打开div？,jquery,wordpress,lightbox,colorbox,Jquery,Wordpress,Lightbox,Colorbox,我在想办法在灯箱或彩盒中打开一个div。我在网上试过几本指南，但都想不出来。这是我的代码，我想打开div#spotDetail。有什么指示从哪里开始吗 <div id="spotsContainer"></div> <div id="spotDetail" style="display:hidden;"> <ul id="images"></ul> <div id="spotname"></div

我在想办法在灯箱或彩盒中打开一个div。我在网上试过几本指南，但都想不出来。这是我的代码，我想打开div#spotDetail。有什么指示从哪里开始吗

          <div id="spotsContainer"></div>

<div id="spotDetail" style="display:hidden;">
<ul id="images"></ul>
<div id="spotname"></div>
<div id="spotdistance"></div>
<div id="map"></div>    
</div>

<script>
var spots;



var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '10.0.1') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","https://code.jquery.com/jquery-git1.min.js");
if (script_tag.readyState) {
  script_tag.onreadystatechange = function () { // For old versions of IE
      if (this.readyState == 'complete' || this.readyState == 'loaded') {
          scriptLoadHandler();
      }
  };
} else {
  script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main(); 
}

 function main() { 
jQuery(document).ready(function($) { 

    $.getJSON("http://sk8spots.com/Core/GetData?userId=9914bd37-2526-4c0e-95ed-ad16b045ab89&callback=?", function(data) {

var str = "";
spots = data.Model;
$.each(data.Model, function (i, item) {
            str += "<div class='item' onclick=\"openObject('"+i+"');\" style='height:260px;width:280px;float:left;'><img src='http://sk8spots.com/imageBank/" + item.Images[0].Id + ".jpg?width=280&height=224&bgcolor=WhiteSmoke' width='280' height='224' /><p>" + item.Name + "</p></div>";
    });
    $("#spotsContainer").append(str);
//console.log(data);    

    });
});
}


function openObject(index){ 
jQuery(document).ready(function($) {

    var detail = spots[index];

 $("#images").empty();
    $("#spotname").text(detail.Name);
    $("#spotdistance").text(detail.Distance+"km frÂn Bunkerberget.");
        $.each(detail.Images, function (i, item) {
            $("#images").append("<li><img src=\"http://sk8spots.com/imageBank/" + item.Id + ".jpg?width=280&height=224&bgcolor=WhiteSmoke\" alt=\"\" /></li>");
        });

$("#spotDetail").show();
});
}

</script>



变异点；
var-jQuery；
/********如果不存在jQuery，则加载它*********/
if（window.jQuery==undefined | | window.jQuery.fn.jQuery！==“10.0.1”）{
var script_tag=document.createElement（'script'）；
script_tag.setAttribute（“type”、“text/javascript”）；
script_tag.setAttribute（“src”https://code.jquery.com/jquery-git1.min.js");
if（script_tag.readyState）{
script_tag.onreadystatechange=function（）{//用于旧版本的IE
如果（this.readyState=='complete'| | this.readyState=='loaded'）{
scriptLoadHandler（）；
}
};
}否则{
script_tag.onload=scriptLoadHandler；
}
//尝试查找头部，否则默认为documentElement
（document.getElementsByTagName（“head”）[0]| | document.documentElement）.appendChild（script_标记）；
}否则{
//窗口上的jQuery版本就是我们想要使用的版本
jQuery=window.jQuery；
main（）；
}
/********加载jQuery后调用******/
函数scriptLoadHandler（）{
//将$和window.jQuery恢复为其以前的值并存储
//本地jQuery变量中的新jQuery
jQuery=window.jQuery.noConflict（true）；
//调用我们的主要函数
main（）；
}
函数main（）{
jQuery（文档）.ready（函数（$）{
$.getJSON（“http://sk8spots.com/Core/GetData?userId=9914bd37-2526-4c0e-95ed-ad16b045ab89&回调=？”，函数（数据）{
var str=“”；
spots=data.Model；
$.each（data.Model，function（i，item）{
str+=“”+item.Name+“”；
});
$（“spotsContainer”）.append（str）；
//控制台日志（数据）；
});
});
}
函数openObject（索引）{
jQuery（文档）.ready（函数（$）{
var详细信息=点[指数]；
$（“#图像”）.empty（）；
$（“#spotname”）.text（detail.Name）；
$（“#spotdistance”）.text（detail.Distance+“km fr n Bunkerberget”）；
$.each（detail.Images，函数（i，项）{
$（“#图像”）。追加（“”）；
});
$（“#spotDetail”）.show（）；
});
}

请使用下面的链接在颜色框中作为参考

在这里，您将找到不同的-2方法来打开弹出窗口。如果您只想打开div的弹出窗口，请使用

内联HTML-示例

$(document).ready(function(){
                //Examples of how to assign the Colorbox event to elements
                $(".inline").colorbox({inline:true, width:"50%"});

            });

我认为首先您必须在表单中附加颜色框-使用此

$(window).load(function () {
                $("#colorbox, #cboxOverlay").appendTo('form:first');
            });

然后打电话给彩盒

$(".test").colorbox({ iframe: true, width: "xyz", height: "xyz" });

您好，我已经创建了一个HTML页面并粘贴了您的代码，之后我做了一些更新，现在它正在工作，请参阅下面的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

    Skatespots
    <div id="spotsContainer"></div>
    <div id="test" style="display:none;">
        <div id="spotDetail" style="display:hidden;">
            <ul id="images"></ul>
            <div id="spotname"></div>
            <div id="spotdistance"></div>
            <div id="map"></div>
        </div>
    </div>
    <script type="text/javascript">
        var spots;



        var jQuery;

        /******** Load jQuery if not present *********/
        if (window.jQuery === undefined || window.jQuery.fn.jquery !== '10.0.1') {
            var script_tag = document.createElement('script');
            script_tag.setAttribute("type", "text/javascript");
            script_tag.setAttribute("src", "https://code.jquery.com/jquery-git1.min.js");
            if (script_tag.readyState) {
                script_tag.onreadystatechange = function () { // For old versions of IE
                    if (this.readyState == 'complete' || this.readyState == 'loaded') {
                        scriptLoadHandler();
                    }
                };
            } else {
                script_tag.onload = scriptLoadHandler;
            }
            // Try to find the head, otherwise default to the documentElement
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
        } else {
            // The jQuery version on the window is the one we want to use
            jQuery = window.jQuery;
            main();
        }

        /******** Called once jQuery has loaded ******/
        function scriptLoadHandler() {
            // Restore $ and window.jQuery to their previous values and store the
            // new jQuery in our local jQuery variable
            jQuery = window.jQuery.noConflict(true);
            // Call our main function
            main();
        }

        function main() {
            jQuery(document).ready(function ($) {

                $.getJSON("http://sk8spots.com/Core/GetData?userId=9914bd37-2526-4c0e-95ed-ad16b045ab89&callback=?", function (data) {

                    var str = "";
                    spots = data.Model;
                    $.each(data.Model, function (i, item) {
                        str += "<a href='#spotDetail' class='inline item' onclick=\"openObject('" + i + "');\" style='height:260px;width:280px;float:left;'><img src='http://sk8spots.com/imageBank/" + item.Images[0].Id + ".jpg?width=280&height=224&bgcolor=WhiteSmoke' width='280' height='224' /><p>" + item.Name + "</p></a>";
                    });
                    $("#spotsContainer").append(str);
                    //console.log(data);

                });
            });
        }


        function openObject(index) {
            jQuery(document).ready(function ($) {

                var detail = spots[index];

                $("#images").empty();
                $("#spotname").text(detail.Name);
                $("#spotdistance").text(detail.Distance + "km frÂn Bunkerberget.");
                $.each(detail.Images, function (i, item) {
                    $("#images").append("<li><img src=\"http://sk8spots.com/imageBank/" + item.Id + ".jpg?width=100&height=100&bgcolor=white\" alt=\"\" /></li>");
                });

                $(".inline").colorbox({ inline: true, width: "50%" });
            });
        }
    </script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
</body>

</html>


溜冰场

变异点；
var-jQuery；
/********如果不存在jQuery，则加载它*********/
if（window.jQuery==undefined | | window.jQuery.fn.jQuery！==“10.0.1”）{
var script_tag=document.createElement（'script'）；
script_tag.setAttribute（“type”、“text/javascript”）；
script_tag.setAttribute（“src”https://code.jquery.com/jquery-git1.min.js");
if（script_tag.readyState）{
script_tag.onreadystatechange=function（）{//用于旧版本的IE
如果（this.readyState=='complete'| | this.readyState=='loaded'）{
scriptLoadHandler（）；
}
};
}否则{
script_tag.onload=scriptLoadHandler；
}
//尝试查找头部，否则默认为documentElement
（document.getElementsByTagName（“head”）[0]| | document.documentElement）.appendChild（script_标记）；
}否则{
//窗口上的jQuery版本就是我们想要使用的版本
jQuery=window.jQuery；
main（）；
}
/********加载jQuery后调用******/
函数scriptLoadHandler（）{
//将$和window.jQuery恢复为其以前的值并存储
//本地jQuery变量中的新jQuery
jQuery=window.jQuery.noConflict（true）；
//调用我们的主要函数
main（）；
}
函数main（）{
jQuery（文档）.ready（函数（$）{
$.getJSON（“http://sk8spots.com/Core/GetData?userId=9914bd37-2526-4c0e-95ed-ad16b045ab89&回调=？”，函数（数据）{
var str=“”；
spots=data.Model；
$.each（data.Model，function（i，item）{
str+=”；
});
$（“spotsContainer”）.append（str）；
//控制台日志（数据）；
});
});
}
函数openObject（索引）{
jQuery（文档）.ready（函数（$）{
var详细信息=点[指数]；
$（“#图像”）.empty（）；
$（“#spotname”）.text（detail.Name）；
$（“#spotdistance”）.text（detail.Distance+“km fr n Bunkerberget”）；
$.each（detail.Images，函数（i，项）{
$（“#图像”）。追加（“”）；
});
$（“.inline”）.colorbox（{inline:true，宽度：“50%”）；
});
}

您只需做一件事，请创建HTML页面并简单地复制和粘贴此给定HTML，因为它在我们的页面中，您的功能将正常运行

请检查给定答案它对您有效请检查我的另一个答案您只需在您的系统上创建一个HTML页面，然后复制我的HTML并粘贴到您的页面上，然后使用您的功能将工作：）对不起，迟了回复我正忙着一些事情，所以我无法看到你的帖子，但对于给定的解决方案，我希望它能工作。请检查并让我知道我是否遗漏了一些内容。你能检查并让我知道给定的解决方案是否对你有效吗