Question

我正在练习构建一个单页网站，当点击一个按钮时，其他页面将作为jquery灯箱加载。

然而，当我点击按钮时，灯箱效果会发生，但它是空白的。我尝试加载外部网站，例如google.com，这也是空白的。这是html页面的代码：

<li><a href="map.html" data-lightbox="We are here" data-title="We are here"><button class="button location">Location</button></a></li>

和外部网站：

<li><a href="http://www.rte.ie" data-lightbox="history" data-width="960" data-height="600"><button class="button history">History</button></a></li>

这两个都返回空白灯箱。

我正在使用这里的基本jQuery灯箱http://lokeshdhakar.com/projects/lightbox2/，它适用于我的图库。

Answer 1

项目甚至不支持外部/内部网站： From the github project

你可能想要使用这样的东西： http://www.jacklmoore.com/colorbox/

Answer 2

您可以通过滚动自己的灯箱了解最多 - 看看它有多简单：

/* js/jQuery */
$(document).ready(function(){
  
$('button').click(function(){
  $('#lightbox').html('This is a lightbox').fadeIn();
});

$('#lightbox').click(function(){
  $(this).fadeOut();
});
  
}); //END document.ready

/* CSS */
#myBody{padding:120px;font-size:2rem;background:palegreen;}

#lightbox{position:absolute;top:15%;left:10%;width:80%;height:60%;font-size:5rem;color:orange;text-align:center;background:black;opacity:0.8;display:none;}

<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Display lightbox</button>

<div id="myBody">This is my normal page content</div>

<div id="lightbox"></div>

灯箱只是一个常规的DIV结构，其样式为position:absolute或position:fixed，可将其从普通HTML流中删除。然后隐藏它，并在按钮点击或其他可检测事件（mouseover，ajax.done等）时显示。

由于灯箱只是一个普通的div，您可以使用$('#divID').html('<tag>Your HTML here</tag>')或.append()或.text()将新内容添加到灯箱/ div 中等

首先让您的项目使用未隐藏的“灯箱”，然后将display:none添加到灯箱HTML的顶部容器的CSS中。我的示例代码中的<div id="lightbox"> 并使用.show() / .hide()等命令在需要时显示灯箱。

将整个网站注入灯箱 - 与div一样 - 在<iframe>中添加网站：

/* js/jQuery */
$(document).ready(function(){
  
$('button').click(function(){
  $('#lightbox').html('<iframe src="http://google.com"></iframe>').fadeIn();
});

$('#lightbox').click(function(){
  $(this).fadeOut();
});

});//END document.ready

/* CSS */
#myBody{padding:120px;font-size:2rem;background:palegreen;}

#lightbox{position:absolute;top:15%;left:10%;width:80%;height:60%;font-size:5rem;color:orange;text-align:center;background:black;opacity:0.8;display:none;}

<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Display lightbox</button>

<div id="myBody">This is my normal page content</div>

<div id="lightbox"></div>

但首先要明白这一切。

jQuery Lightbox显示为空白

2 个答案: