我一直在看jQUery thickbox用于显示带图像的模态对话框,这很棒.但现在我需要以类似的方式显示包含iFrame的隐藏内容div,并带有打开内容的链接.所以我会有这样的事情.
<a href="">Open window in Modal Dialog</a>
<div id="myContent">
<h1>Look at me!</h1>
<iframe src="http://www.google.com" />
</div>
并需要在对话框中显示它.可能吗？
我现在正在进行嵌入式自适应预批准支付,我面临的问题是如何使用灯箱实现预先批准付款.
我已经通过使用灯箱设置paykey来实现付费操作,但它的工作正常,但同样我所遵循的事情,在预先批准请求的代码中几乎没有修改是没有工作灯箱得到挂起.请让我知道我在这里失踪了什么.
HTML代码:
<html>
<head>
<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>
</head>
<body>
<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/preapprovalkey" target="PPDGFrame" class="standard">
<label for="buy">Buy Now:</label>
<input type="image" id="submitBtn" value="Pay with PayPal" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif">
<input id="type" type="hidden" name="expType" value="light">
<input id="preapprovalkey" type="hidden" name="preapprovalkey" value="{{preapprovalkey}}">
</form>
<script type="text/javascript" charset="utf-8">
var dgFlow = new PAYPAL.apps.DGFlow({ trigger: 'submitBtn' });
</script>
</body>
</html>
我正在使用http://lokeshdhakar.com/projects/lightbox2/。我有图像缩略图，单击它们后，它们会在灯箱中打开 - 显然。
我遇到的问题是，当其中一些图像为 1800x1200 时，灯箱会覆盖整个网页。
如何编辑以确保图像的最大高度为 400 像素，宽度成比例？我不能简单地上传较低尺寸的图像，因为它们是用户上传的图像，所以我需要做这个脚本/服务器端。
谢谢！
我正在构建一个worpdress站点,并在使用短代码构建的页面上有多个库.目前,所有图像都被赋予了rel属性'prettyPhoto [1]',但我需要将每个图库分开.我在页面上总共有56张图片,所以当图库1的第一张图片在灯箱中打开时,它显示1/56,我可以点击所有56张图片,我想要的是画廊一说1/16然后画廊1/16等我被告知要在我的raw.js文件中编辑这行脚本:
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
但也不确定该怎么做呢？任何帮助将不胜感激.以下是相关页面的链接:
我在 Stackoverflow 中进行了足够的搜索，但无法找到一个线程来回答我的问题。
以下是我的场景，
function openVideo(videoid,urlid){
var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
$("a#video_link").fancybox({
'type': 'iframe',
'width' : 1000,
'height' : 600,
'autoDimensions' : false,
'autoScale' : false,
'href' : videourl
});
$("a#video_link").trigger('click');
return false;
}
<a href="#" onclick="openVideo('2134sdf234532sdfs324234','1')">Show video</a>
因此，当我单击“openVideo”功能而不是锚标记本身时，我想设置 href 值。
Fancybox版本：jquery.fancybox-1.3.4.pack.js
请就此提出建议。
我目前正在尝试使用dropzone.js库在我的网站上实现一个拖放上传功能.到目前为止,这种方法运行良好,但我希望用户能够在上传完成后点击它们来查看上传的图片.
我考虑过购买包括像fancybox或lightbox这样的库,但我不知道如何将这个实现到上传的dropzone-elements.任何帮助/ tipps将非常感激,我无法在网站的任何地方找到我的问题的答案.
提前致谢 :)
我正在使用featherlight.js的1.3.3版本,而且我仍然在大图像上进行垂直滚动.无论出于何种原因,事情都没有很好地调整大小.
要重现,只需在其中抛出一个非常大的图像链接并运行featherlight - 垂直滚动.适用于Mac的最新版Chrome,Safari和Firefox.
我注意到使用WP Featherlight插件时不会发生这种情况,但是看起来这个插件使用的是版本1.2.3的修改版本,其中CSS(可能还有JS)与Github上的内容不匹配...
例如,这就是插件CSS中的内容:
.featherlight .featherlight-content {
background: #fff;
border: 0;
cursor: auto;
display: inline-block;
max-height: 95%;
max-width: 90%;
min-width: inherit;
overflow: auto;
padding: 0;
position: relative;
text-align: left;
vertical-align: middle;
white-space: normal;
}
这就是Github回购中的内容:
.featherlight .featherlight-content {
/* make content container for positioned elements (close button) */
position: relative;
/* position: centering vertical and horizontal */
text-align: left;
vertical-align: middle;
display: inline-block;
/* dimensions: cut off images */
overflow: auto;
padding: 25px 25px 0;
border-bottom: 25px …我正在使用<p:lightBox>流式编程<p:media>来预览外部 PDF。
它工作得很好，但我遇到了一点障碍。
当 pdf 对话框呈现时，它会显示（鼠标悬停时）一个标题，其中始终显示相同的标题：“dynamiccontent.properties”。
是否有一个属性或其他东西我可以覆盖来自定义它？
JSP代码：
<p:lightBox>
<h:outputLink value="#" title="#{myDoc.fileName}">
<i class="fa fa-eye" aria-hidden="true"></i>
</h:outputLink>
<f:facet name="inline">
<p:media value="#{documentController.stream}" width="1100px" height="600px" player="pdf">
<f:param name="idStore" value="#{myDoc.idStore}" />
</p:media>
</f:facet>
</p:lightBox>
谢谢你的时间。
我正在 React 中创建自己的灯箱，但在实现 keyDown 事件时遇到了问题。当我打开图像时，我想要a图像 - 1 的d键和图像 + 1 的键。我只实施console.log(e.key)检查是否一切正常。我发现了一个问题，即我的 KeyDown 事件仅在我将焦点放在向左或向右按钮上时才起作用。当我点击照片键不起作用。
灯箱：
<div
onKeyDown={this.nextButtonImage}
onClick={this.closeLightbox}
className="lightbox-container">
<div className="lightbox">
<button onClick={this.closeLightbox} className="lg-close">
<i className="fas fa-times" />
</button>
<button onClick={this.prevImage} className="lg-arrows lg-left">
<i className="fas fa-caret-left" />
</button>
<button onClick={this.nextImage} className="lg-arrows lg-right">
<i className="fas fa-caret-right" />
</button>
<img src={this.images[this.state.openImage].url} alt="" />
</div>
</div>
keyDown 事件：
nextButtonImage = (e) => {
console.log(e.key);
}
lightbox ×10
javascript ×6
jquery ×5
fancybox ×2
modal-dialog ×2
css ×1
dropzone.js ×1
html ×1
media ×1
paypal ×1
pdf ×1
prettyphoto ×1
primefaces ×1
reactjs ×1
wordpress ×1