jquery - 表示/非表示とモーダルの問題

Question

事情を説明。

PHP ページには、動的に生成されたメニューがあり、次のように任意の数の項目/リンクがあります。

<ul class="main-portf">
<li><a href="#" class="tabs" rel="1" title="item1" >item1</a></li>
<li><a href="#" class="tabs" rel="10" title="item2" >item2</a></li>
<li><a href="#" class="tabs" rel="10" title="item3" >item3</a></li>
<li><a href="#" class="tabs" rel="10" title="item4" >item4</a></li>
</ul>

上のメニューの各リンクは、アイテムの異なるギャラリーを示しています。各ギャラリーには最大 8 個のアイテムを含めることができます (現時点では)。たとえば、最初のリンク (rel=1) をクリックすると、次のギャラリーが表示されます。

<div class="thumbspart" id="tabs-1">
<div class="thumbblock">
    <div class="thumb"><a href="path/to/large/jpg" rel="prettyPhoto[gal1large]" title="demo title" class="testremove"><img src="path/to/small/jpg" alt="demo title"></a></div>
    <div class="title"><a href="path/to/large/jpg" rel="prettyPhoto[gal1small]" title="demo title">Demo Title</a></div>
    <p>some info here</p>
</div>

<div class="thumbblock">
    <div class="thumb"><a href="path/to/large/jpg" rel="prettyPhoto[gal1large]" title="demo title" class="testremove"><img src="path/to/small/jpg" alt="demo title"></a></div>
    <div class="title"><a href="path/to/large/jpg" rel="prettyPhoto[gal1small]" title="demo title">Demo Title</a></div>
    <p>some info here</p>
</div>

...

</div>

すべてのギャラリーはページにプリロードされており、AJAX 呼び出しは何も入力されていません。

すべてのギャラリーは、id="tab-x" のコンテナー内にあります。ここで、x はメニューリンクの rel 値に等しくなります。

各ギャラリーアイテムには、画像のサムネイル、画像のタイトル、画像の説明/テキストの 3 つの "行" のデータがあります。

両方のリンク (親指とタイトル) は、大きな画像とその他の情報を含むモーダルを開きます。モーダルスクリプト (ライトボックスに類似) では、各リンクに rel 属性が存在する必要があります。その rel 属性に基づいて、すべてのギャラリーアイテムをグループ化してカウントします。

ウェブサイトの所有者は、親指の画像にホバー効果を追加するよう求めました。そのため、ユーザーが画像にカーソルを合わせると、画像が少し薄くなり、新しい小さな画像がその上に表示されます。新しい画像をクリックすると、モーダルが開きます。

問題

私の問題は、新しいホバー画像がリンク付きの元の画像を覆ってしまうことでした。そこで、モーダルスクリプトが機能するために必要なすべての属性を備えたホバリング画像とともに新しいリンクを追加することを考えました。

私の最終的なjsは次のようになります。

$(".thumb").mouseenter(function () 
{
    var myurl = $(this).find("a").attr("href");
    var myrel = $(this).find("a").attr("rel");
    var mytitle = $(this).find("a").attr("title");


    var testVat = $(this).parent().parent().attr("id");
    var myVar = testVat.split("-");
    var myID = parseInt(myVar[1]);

    $(this).prepend('<a href="'+myurl+'" class="pozhov" rel="'+myrel+'" title="'+mytitle+'"></a>');
    $(this).find("a.testremove").attr('rel', 'rel-'+myrel); // rename rel to avoid conflict with wrong counter
    showGal(myID);
    $('.pozhov').fadeIn(0);

})
.mouseleave (function () 
{
        var myrel = $(this).find("a.testremove").attr("rel");
        var myVar = myrel.split("-");           
        $(this).find("a.testremove").attr('rel', myVar[1]); // restore rel name to original one             


    $('.pozhov').fadeOut(0).delay(0).queue(function()
    { 
        $(this).remove();           
    });
});

簡単に言えば、ユーザーが画像内にホバーすると、次のようになります。

既存の URL からデータを取得する
元のリンクと同様のプロパティ/属性を持つホバリング画像を囲む新しいリンクを作成します
モーダルスクリプトとの競合を避けるために、古い rel 属性の名前を別の名前に変更します

ユーザーが画像からホバーすると、次のようになります。

元の rel 属性の古い名前を復元する
偽のリンクを削除する

これはうまくいったはずです。しかし、そうではありません。画像のモーダルが開かないか、間違ったカウンターが表示されるか、一度しか機能しません (最初に閉じた後は実行されません)。画像タイトルのリンクのモーダルは完全に機能します。

このページに使用する js コードをいくつか追加します (違いが生じる場合に備えて)。

// tabs galleries

$(".tabs").click(function () 
{   
    $(".tabs").removeClass("active");

    var myID = $(this).attr("rel");
    $(this).addClass("active");

    //hide all "tabs-xx" divs
    $("div[id^='tabs-']").hide();

    // show the one we want
    $("#tabs-"+myID).fadeIn(1000);
    showGal(myID);

return false;
}); 



// function to fire modal script after show/hide    
function showGal(i)
    {
        $("a[rel^='prettyPhoto[gal"+i+"large]']").prettyPhoto({
            // modal options
        });

        $("a[rel^='prettyPhoto[gal"+i+"small]']").prettyPhoto({
            // modal options
        }); 
    }

コアスクリプトについて疑問がある場合は、次のようにします。

Jquery コア 1.7.2
モーダル prettyPhoto スクリプト (Lightbox クローン)

jquery - 表示/非表示とモーダルの問題

0 に答える 0

Related

Reference