3

標準のカラーボックス ギャラリーがあるとします。

<a href="img1.jpg" rel="gallery">img1</a>
<a href="img2.jpg" rel="gallery">img2</a>
<a href="img3.jpg" rel="gallery">img3</a>

私の質問は、リンクからギャラリーを<a href="gallery#img2">link from other page</a>開く、ギャラリーページにリダイレクトする、img2 で始まるカラーボックスを開くなど、カラーボックスウィンドウに残りの rel グループを表示することは可能ですか?

私が理にかなっていることを願っています！

ありがとうございました

編集：私はそこでトリガーを少し素早くしました...私がすでに試したことの例を示すつもりでした（簡略化）：

<script>
    $(document).ready(function(){
        $.colorbox({
           rel: 'gallery',
        });
    });
</script>

結果: 何も開けません。

<script>
    $(document).ready(function(){
        $.colorbox({
           href: 'img2.jpg',
        });
    });
</script>

結果: 'href' で画像を開きますが、グループの残りは開きません。

<script>
    $(document).ready(function(){
        $.colorbox({
           rel: 'gallery',
           href: 'img2.jpg',
        });
    });
</script>

結果: 上記と同じ。

4

1 に答える 1

5

まず、私が理解していることを確認しましょう... 2 ページ、最初にギャラリーへのリンクが 2 番目に。最初のページのリンクがクリックされると、クリックされた画像に 2 番目のギャラリーが読み込まれます (例: 画像 2/4)。もしそうなら...

ギャラリーを指すページで、次のようなリンクを使用します。

<a href="gallery?img=img1">img1</a>

ギャラリー ページで、この回答の getUrlParam を使用して、JS:

//get parameter from url, returns null if not sent
function getUrlParam(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

$(function() {
    var imgId = getUrlParam("img");

    //init the gallery
    $(".gallery").colorbox({
        rel: "gallery1"
    });

    //if an image id sent, activate that colorbox item
    if(imgId) {
        $("#" + imgId).click();
    }
});

次に、すべてのギャラリー アイテムにクラスと ID があることを確認します。次に例を示します。

<img id="img1" class="gallery" href="myImage" />

それでおしまい！あなたは終わった。

コードが機能しない理由を明確にするための簡単な説明...

上記の例でhtmlrel属性が欠落していることに注意してください。「rel」カラーボックス プロパティと htmlrel属性を混同しないでください。理解できます (名前が同じ) が、この 2 つは見た目には関連性がありません (同じように考えない方が良いでしょう)。rel実際、html属性も必要ありません。だからそれを削除してください。

カラーボックスの「rel」プロパティは、すでに見つかったカラーボックス項目をグループ化するために使用されます。実際、「rel」の値は「xyz」になる可能性があります。これは単に、カラーボックス グループの任意の名前です。rel プロパティ自体は、グループに属するアイテムを探すのではなく、見つかったアイテムに名前を付けるだけです。セレクターでカラーボックス関数を使用して、アイテムを見つけます。

$(".gallery").colorbox();

このコードは、 class を持つすべての dom 要素を検索しますgallery。その rel プロパティがないと、これらすべての要素が別々になります。いずれかをクリックすると、その 1 つの画像だけが表示されます。「rel」プロパティを使用して、いずれかをクリックしたときに見つかったすべてのアイテムを表示できるようにします。

$(".gallery").colorbox({
    rel: "myWonderfulGallery"
});

したがって、2 番目と 3 番目の例のコンテキストでは、1 つの画像のみが参照されたため、1 つの画像しか表示されませんでした (href プロパティを介して - 再び、rel プロパティは画像を取得しません)。それが役立つことを願っています!

于 2012-07-29T21:08:03.527 に答える