javascript - アイテムに応じて異なるギャラリー スライダーを読み込む

Question

ギャラリーには 3 つのボックス アイテムがあります (ギャラリーは最終的に拡大します)。各アイテムをクリックすると、画像が含まれるポップアップ ギャラリー スライダーを開く必要があります。つまり、3 つの異なるスライダーであり、将来的にはさらに増える可能性があります。

各ボックス ギャラリーを他のボックス ギャラリーと区別するにはどうすればよいですか? クリックすると、すべての画像ではなく、独立したギャラリーだけになりますか?

これは私のマークアップです:

    <a class="box small" onclick="openslider()" href="javascript:void(0)">
        <img src="/1.jpg" width="200" height="200" />
        <h5>Title 1</h5>
        <p>Description 1</p>
    </a>

    <a class="box small" onclick="openslider()" href="javascript:void(0)">
        <img src="/2.jpg" width="200" height="200" />
        <h5>Title 2</h5>
        <p>Description 2</p>
    </a>

    <a class="box small" onclick="openslider()" href="javascript:void(0)">
        <img src="/3.jpg" width="200" height="200" />
        <h5>Title 3</h5>
        <p>Description 3</p>
    </a>

JS:

function openslider(){
    $('.modal_container').fadeIn();
}

スライダーのマークアップ:

<div class="slider_box gallery1">
    <div class="slider">
        <img src="/img/slider.jpg" alt="slider" width="587" height="414" />
        <img src="/img/slider2.jpg" alt="slider2" width="800" height="564" />
        <img src="/img/slider3.jpg" alt="slider3" width="587" height="414" />
        <img src="/img/slider4.jpg" alt="slider4" width="800" height="564" />
    </div>
</div>