複数のギャラリーの画像をカラーボックスに結合する方法

Question

このカラーボックスの使用に関する問題については、専門家の助言が必要です。

私は、表示されたアルバムの画像をクリックすることによって各ギャラリーがトリガーされる画面に表示されるギャラリーのセットを持っています。問題は、同じ画面に表示された3つのギャラリーすべての画像を結合し、各アルバムのビューにすべての画像を表示していることです。 アルバムのトリガーごとに 'rel'属性を変更しようとしましたが、それでも動作させることができませんでした。

var rel = $(this).attr('rel'); 

$(".album_view").colorbox({ 
    rel: rel, 
    maxWidth: "800px", 
    maxHeight: "600px", 
    width: "auto", 
    height: "auto" 
}); 

とhtmlで、それは次のようになります：

<a href="https://www.website.com/album/folder1/image1.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ><img src="https://www.website.com/album/folder1/image1.jpg" width="464" height="261" /></a> 
<a href="https://www.website.com/album/folder1/image2.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ></a> 
<a href="https://www.website.com/album/folder1/image3.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ></a> 
<a href="https://www.website.com/album/folder1/image4.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ></a> 
... 
... 
... 
<a href="https://www.website.com/album/folder2/image1.jpg" class="album_view" rel="album_view_2324" target="album_post_2324" ><img src="https://www.website.com/album/folder2/image1.jpg" width="464" height="261" /></a> 
<a href="https://www.website.com/album/folder2/image2.jpg" class="album_view" rel="album_view_2324" target="album_post_2324" ></a> 
<a href="https://www.website.com/album/folder2/image3.jpg" class="album_view" rel="album_view_2324" target="album_post_2324" ></a> 
... 
... 
... 

あなたがそれを見ると、アルバムの最初のイメージがあったし、その次れる

は、コードがどのように見えると言いますスライドショーのために（relのために）ロードするだけです。 最初のアルバムまたは2番目のアルバムをクリックすると、各アルバムのショーに7枚の画像（4枚+ 2枚のアルバム）が表示されます:(

上記のようにパラメータを変更しようとしましたが、それはうまくいきませんでした

私はここで行方不明です私もこれでプロていないです助けてください どれチップ/アドバイス/例をいただければ幸いです

EDIT：？。。。9月15日に、2017.次を追加しました：

アルバムにクリック/ロードされたときに呼び出されます。

<link rel="stylesheet" 
href="https://www.XYZsite.com/css/photo_gallery.css" /> 
<script 
src="https://www.XYZsite.com/js/gallery_js/photo_gallery_jquery.js"> 
</script> 
<script> 
    $(document).ready(function(){ 
    $(".image_view").colorbox({rel:'nofollow', maxWidth:"800px", maxHeight:"600px", width:"auto", height:"auto"}); 
    $('.image_view').click(function(e){ 
     //alert($(this).attr('title')); 
     $('#popup_title').html($(this).attr('title')); 
     $('#popup_content').html($(this).attr('content')); 
    }); 

    $(".album_view").colorbox({maxWidth:"100%", maxHeight:"600px", width:"auto", height:"auto", current:"{current}/{total}"}); 
    $('.album_view').click(function(e){ 
     $('#popup_title').html($(this).attr('title')); 
     $('#popup_content').html($(this).attr('content')); 
    }); 
}); 

任意のアルバムが掲載されている場合、後のコードで、それはスクリーン上に第一の画像を表示し、残りの部分を表示する色を呼び出すべきです。 （後に2つのテスト画像がある）

<div id="album_post_1156" style="margin-top:8px;" class="bulletin_message_pic l hide_post1156" style=""> 
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/ea5d2f1c4608232e07d3aa3d998e5135/c1-jpg_071724.jpg" class="album_view" rel="album_view" ><img src="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/ea5d2f1c4608232e07d3aa3d998e5135/c1-jpg_071724.jpg" width="400" height="300" /></a> 
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/ea5d2f1c4608232e07d3aa3d998e5135/c2-jpg_071721.jpg" class="album_view" rel="album_view" title="Pic title"></a> 
</div> 

同じページには、4つのテスト画像がある別のアルバムポストがあります。私は最初のアルバムの画像やセカンドアルバムの画像をクリックすると

<div id="album_post_1024" style="margin-top:8px;" class="bulletin_message_pic l hide_post1024" style=""> 
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/c9f0f895fb98ab9159f51fd0297e236d/p02gsc0n.jpg" class="album_view" rel="album_view" ><img src="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/c9f0f895fb98ab9159f51fd0297e236d/p02gsc0n.jpg" width="464" height="261" /></a> 
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/c9f0f895fb98ab9159f51fd0297e236d/s0775904_sc7.jpg" class="album_view" rel="album_view" title="Pic title"></a> 
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/c9f0f895fb98ab9159f51fd0297e236d/tc32lew56_large.jpg" class="album_view" rel="album_view" title="Pic title"></a> 
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/c9f0f895fb98ab9159f51fd0297e236d/tcl60e55_large.jpg" class="album_view" rel="album_view" title="Pic title"></a> 
</div> 

ので、問題がある、それはすべての（2 + 4）6枚の画像を示しています。これは、同じ「REL」グループと同じ上記のカラーボックスのスクリプトを呼び出します（両方のアルバムから）一緒に同じカラーボックスのウィンドウに、その後、それは特定のアルバムの画像を表示する必要があります。

そしてまた、それも、むしろそれはワンサイズ幅/高さのすべてを見せて、自動的に画像の実際の幅/高さごとに画像ウィンドウが表示されない:(

私はここで何をしないのですが？です「REL」と「自動」が助けてください間違っているか、他の何か？

に設定属性。

Answer 1

あなたのアンカー要素は、すでにrel属性を持っているので、カラーボックスには何も渡す必要はありません。これであなたのコードを交換してみてください：

$(".album_view").colorbox({ 
    maxWidth: "800px", 
    maxHeight: "600px", 
    width: "auto", 
    height: "auto" 
}); 

あなたは、いくつかの定数値は、すべて「.album_view」要素に適用されることになったカラーボックスを渡すことによって、アンカー要素の相対値を置き換えました。私は、あなたのrel変数の値が 'this'が何であるかを知らないと何がわからないのか分かりませんが、それがすべてが一緒にグループ化されている理由です。