在 php 中调用 html 时,Jquery lightbox 不起作用
我有一个 jquery 插件,可以在单击时翻转 div 框。当它翻转时,我有一个缩略图,单击该缩略图应该会拉出我的灯箱,但它只会拉出不同页面中的图像。我正在使用 php 数组调用多个 div。我尝试了各种方法来调用图像,但没有任何效果。这是一些代码。
$(function() {
$('a').lightBox();
});
foreach($sponsors as $image) {
echo '<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/'.$image[0].'.png" />
</div>
<div class="sponsorData">
<div class="sponsorDescription" id="gallery">
<a href="img/sponsors/'.$image[1].'.png"/><img src="img/sponsors/'.$image[0].'.png" /></a>
</div>
<div class="sponsorURL">
</div>
</div>
</div>';
}
这就是我的翻转框的脚本。
$(document).ready(function () { /* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click", function () {
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false)
}
else {
// Using the flip method defined by the plugin:
elem.flip({
direction: 'lr',
speed: 350,
onBefore: function () {
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
$(".sponsorFlip").bind("click", function (e, block) {
if (block) return false;
$(".sponsorFlip").not($(this)).each(function () {
if ($(this).data("flipped")) $(this).trigger("click", [true]);
});
});
I have jquery plugin that flips the div box when it's clicked. When it's flipped over I have a thumbnail that when clicked should pull up my lightbox but it just pulls up the image in a different page. I'm calling multiple div using php arrays. I have tried every way to call the images but nothing works. Here is some of the code.
$(function() {
$('a').lightBox();
});
foreach($sponsors as $image) {
echo '<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/'.$image[0].'.png" />
</div>
<div class="sponsorData">
<div class="sponsorDescription" id="gallery">
<a href="img/sponsors/'.$image[1].'.png"/><img src="img/sponsors/'.$image[0].'.png" /></a>
</div>
<div class="sponsorURL">
</div>
</div>
</div>';
}
And this is what the script looks like for my flipping box.
$(document).ready(function () { /* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click", function () {
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false)
}
else {
// Using the flip method defined by the plugin:
elem.flip({
direction: 'lr',
speed: 350,
onBefore: function () {
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
$(".sponsorFlip").bind("click", function (e, block) {
if (block) return false;
$(".sponsorFlip").not($(this)).each(function () {
if ($(this).data("flipped")) $(this).trigger("click", [true]);
});
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我不确定您使用的是哪个灯箱插件,但听起来它并没有阻止默认标签操作的触发。您也许可以通过添加以下内容来修复它:
I'm not sure which lightbox plugin you're using, but it sounds like it's not preventing the default a tag action from firing. You may be able to fix it by adding:
我通过将其放入我的 js 文件中来翻转我的内容来使其工作。
I got it to work by putting this inside my js file that flips my content.