添加onclick事件爲jquery幻燈片

我使用基於Jquery Cycle的Aaron Vanderzwan的幻燈片maximage，但我在添加onclick事件到幻燈片時遇到了一些麻煩。在研究堆棧交換解決方案時，我遇到了一個解決方案，用於「點擊」位於div的z-index，並將CSS屬性添加到我的設置中。這jsfiddle：http://jsfiddle.net/HDRCREATIVE/cj9sh/是我正在工作的幻燈片的一個例子。我的問題是我有麻煩添加下面的jQuery到頁面。任何指導都值得讚賞。先謝謝你！添加onclick事件爲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）
見的jsfiddlehttp://jsfiddle.net/cj9sh/10/
對於maximage產生完整的圖像效果響應我需要爲這個項目，我不得不保持cssBackgroundSize: false,財產。 Gulty的回答讓我明白，我的href被附加到我包含的div上。這是不好的，因爲我在CMS場景中使用它，並需要能夠根據用戶即時附加不同的鏈接。所以要保留href我的<img>我把它們包含在<div>之內，並簡化了我在上面嘗試使用的click函數。初步測試的工作到目前爲止，如果遇到任何新問題將會更新。

來源

2013-02-12 HDRC

如果你用檢查員檢查你的小提琴，你可以看到，JS啓動後，圖像上沒有數據。問題是你正在做的所有背景事情。不知道如何maximage工程，但它似乎012轉換圖像轉換爲.mc圖像div內的背景圖像

background-size（或者如果你不使用，無關緊要）。 data-href也被添加到div（它允許你點擊它）。如果你現在使用

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

背景圖像的DIV再次轉換爲圖像和數據attr爲刪除。

所以，要麼不使用cssBackgroundSize：虛假，使DIV的.mc圖像可點擊（由剛上數據的href調用中刪除的子女）或採取其他辦法解決

來源

2013-02-12 11:33:39 gulty

謝謝gulty！這非常有幫助。更新我的問題與工作jsfiddle，再次感謝！ – HDRC 2013-02-15 04:07:42

添加onclick事件爲jquery幻燈片

回答

相關問題