0

我正在使用基于 Jquery Cycle 的 Aaron Vanderzwan 的幻灯片 maximage，但是在向幻灯片添加 onclick 事件时遇到了一些麻烦。在研究堆栈交换的解决方案时，我遇到了一个“点击”z-index 定位 div 的解决方案，并将pointer-events:noneCSS 属性添加到我的设置中。这个 jsfiddle： http: //jsfiddle.net/HDRCREATIVE/cj9sh/是我正在制作的幻灯片示例。我的问题是我无法将以下 jquery 添加到页面。任何指导都值得赞赏。先感谢您！

//The following was taken from the maximage forum's.

var $maximage = $('#maximage');

// Trigger Maximage
$maximage.maximage();

// Capture click on maximage's children
$maximage.children().on('click', function(){
// Retrive our URL (set in data-href attribute on img tags)
var url = $(this).data('href');

// If our URL is set, open a new window with that URL
//    You can certainly use window.location here too
if(url.length > 0){
    window.open(
        url, // <- This is what we set with the data-href attribute
        '_blank' // <- This is what makes it open in a new window.
    );
}
});

更新 - 工作代码（感谢 Gulty）
请参阅 JsFiddle http://jsfiddle.net/cj9sh/10/
为了让 maximage 产生我需要的这个项目的完整图像响应效果，我必须保留该cssBackgroundSize: false,属性。Gulty 的回答让我明白我href被附加到我的包含 div 上。这不好，因为我在 CMS 场景中使用它，并且需要能够根据用户动态附加不同的链接。因此，为了保持href我的状态，<img>我将它们封闭在 a 中<div>并简化了click我在上面尝试使用的功能。初步测试到目前为止工作，如果我遇到任何新问题会更新。

4

1 回答 1

0

如果你用检查器检查你的小提琴，你可以看到在 JS 启动后，图像上不再有数据属性。问题在于您正在做的所有背景工作。不确定 maximage 是如何工作的，但似乎

background-size（或者如果你不使用那没关系）将图像转换为 .mc-image div 内的背景图像。data-href 也被添加到 div 中（允许您单击它）。如果你现在使用

cssBackgroundSize: false, // We don't want to use background-size:cover for our custom size

背景图像 div 再次转换为图像，并删除了 data-attr。

因此，要么不使用 cssBackgroundSize:false 并使 div .mc-image 可点击（只需删除 data-href 调用中的子项），要么采取另一种方式

于 2013-02-12T11:33:39.950 回答