jquery swapimage()の問題;
-
03-10-2019 - |
質問
〜私の記事ページ(http://www.adrtimes.squarespace.com/articles)ロールオーバーで変更される画像から各エントリを開始します。これは正常に動作しています。
しかし、私のホームページで(http://www.adrtimes.squarespace.com)、私はビデオとして分類されていない最新の2つの記事と、ビデオとしてタグ付けされた2つの最新の記事にロードしています。 jquery load()を使用して、記事ページからコンテンツを引き込みます。ホームページのスワピメージロールオーバーを除いて、すべてが問題で動作します。スワピメージ関数をコールバックとして含めることを試みましたが、両方のコンテンツではなく、1つのグループのみが適切にロールオーバーします。問題が何なのかわかりません!!
これがコードです:
<script type="text/javascript">
<!--
$(function(){
$.swapImage(".swapImage");
/* Homepage */
// load recent articles
$("#LoadRecentArticles").load("/articles/ .list-journal-entry-wrapper .journal-entry-wrapper:not(.category-video)", function(){
//callback...
$("#LoadRecentArticles .journal-entry-wrapper").wrapAll('<div class="list-journal-entry-wrapper" />');
$("#LoadRecentArticles .journal-entry-wrapper:gt(1)").remove();
// modify Read More tag
$('.journal-read-more-tag a:contains(Click to read more ...)').each(function(){
var str = $(this).html();
$(this).html(str.replace('Click to read more ...','Continue reading—'));
});
$.swapImage(".swapImage");
});
// load recent videos
$("#LoadRecentVideos").load("/articles/category/video .list-journal-entry-wrapper", function(){
//callback...
$("#LoadRecentVideos .journal-entry-wrapper:gt(1)").remove();
$('<div class="VideoTag">—video</div>').insertBefore("#LoadRecentVideos .category-video .body img");
// modify Read More tag
$('.journal-read-more-tag a:contains(Click to read more ...)').each(function(){
var str = $(this).html();
$(this).html(str.replace('Click to read more ...','Continue reading—'));
});
$.swapImage(".swapImage");
});
});
-->
</script>
そして、ここに記事エントリの画像のHTMLのサンプルがあります。
<a href="/articles/2010/5/6/article-title-goes-here.html"><img class="swapImage {src: '/storage/post-images/Sample2_color.jpg'}" src="/storage/post-images/Sample2_bw.jpg" /></a>
解決
これがあなたが望むものではない場合は謝罪しますが、あなた自身のスワップをするのは本当に簡単です。
私はあなたのセレクターがどうあるべきか正確にはわかりませんが、これは src
あなたが画像の mouseenter
, 、そしてそれを変更します _bw.jpg
に _color.jpg
, 、そしてあなたが戻ってきます mouseleave
.
HTML:
<img class='imageToSwap' src="http://adrtimes.squarespace.com/storage/post-images/Sample2_bw.jpg">
jQuery:
$('.imageToSwap').hover(function() {
var $th = $(this);
var src = $(this).attr('src');
var newSrc = src.replace(/_bw.jpg/, '_color.jpg');
$th.attr('src', newSrc)
},
function() {
var $th = $(this);
var src = $(this).attr('src');
var newSrc = src.replace(/_color.jpg/, '_bw.jpg');
$th.attr('src', newSrc)
});
編集:
live()を使用したバージョン
うまくいけば、これがあなたのためにそれをするでしょう。 jQuery's live()
関数は、ページの読み込み後にDOMに動的に追加された要素のイベントを管理します。
試してみて、どうなるか教えてください。
$('.imageToSwap').live('mouseover mouseout', function(event) {
var $th = $(this);
var src = $(this).attr('src');
if (event.type == 'mouseover') {
var newSrc = src.replace(/_bw.jpg/, '_color.jpg');
$th.attr('src', newSrc)
} else {
var newSrc = src.replace(/_color.jpg/, '_bw.jpg');
$th.attr('src', newSrc)
}
});
他のヒント
実行すると表示されます $.swapimage()
二度目にそれ自体を無効にします。コールバックでこれを試してください:
$.swapImage("#LoadRecentVideos .swapImage");