点击这个锚生成弹出-放大弹出js
Clicking this anchor to generate popup - magnific popup js
我在页面上有多个具有数据属性的元素
data-lightbox="image"
HTML看起来像
<div class="image isotope-item" id="image_72">
<div class="work-item">
<div class="dima-masonry-100"></div>
<img src="/path/to/img" alt="Valley" />
<div class="link_overlay">
<ul class="icons-media">
<li>
<a data-lightbox="image" href="/path/to/img">
<i class="fa fa-link"></i>
</a>
</li>
<li>
<a href="/images/72"><i class='fa fa-credit-card'></i></a>
</li>
</ul>
<div class="work-info">
<div class="work-title text-center">
<p>Random Valley 3</p>
</div>
</div>
<span class="topaz-hover"></span>
</div>
</div>
</div>
<div class="image isotope-item ok-md-3 ok-xsd-6 ok-sd-6 PlacesOfInterest" id="image_71">
<div class="work-item">
<div class="dima-masonry-100"></div>
<img src="/path/to/img" alt="Usk" />
<div class="link_overlay">
<ul class="icons-media">
<li>
<a data-lightbox="image" href="/path/to/img">
<i class="fa fa-link"></i>
</a>
</li>
<li>
<a href="/images/71"><i class='fa fa-credit-card'></i></a>
</li>
</ul>
<div class="work-info">
<div class="work-title text-center">
<p>Usk Valley 3</p>
</div>
</div>
<span class="topaz-hover"></span>
</div>
</div>
</div>
所以为了让放大弹出窗口工作,我可以做
// Portfolio Lightbox
$(function(){
if($('body').hasClass('pages portfolio')){
e.preventDefault();
var i = $('[data-lightbox="image"]');
i.magnificPopup({
type: 'image',
closeOnContentClick: !0,
closeBtnInside: !1,
fixedContentPos: !0,
mainClass: "mfp-zoom-in",
image: {
verticalFit: !0
}
});
}
});
但我也通过AJAX调用加载额外的图像,因此需要对动态创建的元素使用事件委派
所以我把代码改成了
// Portfolio Lightbox
$(function(){
if($('body').hasClass('pages portfolio')){
$(document).on('click', function(e) {
e.preventDefault();
var d = $('[data-lightbox="image"]');
d.magnificPopup({
type: 'image',
closeOnContentClick: !0,
closeBtnInside: !1,
fixedContentPos: !0,
mainClass: "mfp-zoom-in",
image: {
verticalFit: !0
}
});
});
}
});
我发现有时我必须点击两次链接才能启动活动。同样通过使用
var d = $('[data-lightbox="image"]');
我正在选择页面上的所有这些元素,而我认为我应该做的是利用$(this)
,但似乎无法使其工作
记录对象
var d = $('[data-lightbox="image"]');
console.log(d);
[a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, prevObject: jQuery.fn.init[1], context: document, selector: "[data-lightbox="image"]"]
var d = $(this);
console.log(d);
[document, context: document]
如果您通过ajax加载图像,您可以使用一个委托的事件处理程序。
例如,假设所有图像都加载在具有类.pages
的DOM元素中
$(document).on('click', '.pages' , function(e) {
//do stuff
})
在回调中,您可以访问事件对象和属性,如target和delegateTarget。
更多信息http://api.jquery.com/category/events/event-object/
相关文章:
- 当我使用JS/jQuery/any插件点击图像时,我如何使背景变暗+不可点击,并放大和居中我的图像
- 使用 c3 js,有没有办法在放大时显示更多的 x 轴值
- 点击这个锚生成弹出-放大弹出js
- JS脚本没有'当我在网络浏览器中放大时无法工作
- 如何在放大和缩小时间轴时在时间轴Vis.js上设置新选项
- 结合freewall.js和fancybox.js在Rails项目中获得可点击的放大图像
- 使用放大弹出窗口与“自动滚动:假”冲突,整页.js的选项
- 放大织物js,对象位置
- 放大.js - 类似 CRUD 的网址
- 放大简单的 pdf.js 查看器
- 浏览器HTML5中的语义放大(不赢.js)
- 创建 D3.js 元素 OnClick 事件的放大副本
- 如何将放大/缩小的背景图像添加到sigma.js中
- JS生成的链接上的放大弹出窗口
- D3.js双层分区-初始图表加载放大切片
- 使用D3.js缩放大的值以显示它们
- 放大dc.js中的文本标签
- 如何在D3.js上绘制更多的数据点,当你放大
- 在JS中的图像放大收缩动画
- d3.js:放大点击事件