加载不同的画廊滑块，具体取决于项目

Question

我的画廊中有三个箱子项目（画廊最终会增长），每个项目点击时必须打开一个弹出式画廊滑块，并在其中包含图像。所以这将是三个不同的滑块，也许在未来更多。

我该如何区别每个箱子廊和其他？所以点击它只是一个独立的画廊，而不是所有的图像？

这是我的标记：

<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> 

Answer 1

章安格像

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

你的HTML这样当openSlider被调用，它需要在OBJ obj的参考然后改变你的JS代码一样

function openslider(event, obj){ 
    if($(obj).attr(id) == "gallery1") 
    $('.modal_container').fadeIn(); 
    if($(obj).attr(id) == "gallery2") 
    $('.the_other_modal_container').fadeIn(); 
} 

，因此您可以根据ID的你有做出选择在<a>锚标记

编辑：

如果你有很多的画廊，即很多IF条件，你可以简单的选择一个ID方案像

<a id="box_1" ...> 

，然后选择数字部分，并在您.model_container使用它

function openslider(event, obj){ 
    var id = $(obj).attr(id).split("_")[1]; 
    $('#gallery_'+'id).fadeIn(); 
    } 

因此，简而言之，给IDS到你的锚标记，且画廊该方案

<a id="box_1"> 
<div id="gallery_1"> 

<a id="box_2"> 
<div id="gallery_2"> 

... 

等