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>それらを で囲み、上記で使用しようとしていた機能を<div>簡素化しました。click予備テストはこれまでのところ機能しており、新しい問題が発生した場合は更新されます。

4

1 に答える 1

0

インスペクターでフィドルをチェックすると、JSが開始された後、画像にデータ属性がなくなっていることがわかります。問題はあなたがしているすべての背景のことです。maximageがどのように機能するかはわかりませんが、

background-size（または使用しない場合は関係ありません）画像を.mc-imagediv内の背景画像に変換します。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 に答える