Question

我正在使用这个名为justified gallery的精彩jquery插件。下面是使用此插件的简化html语法，后跟javascript语法。

HTML

<div id="my-gallery">
    <a href="path/to...............">
        <img src="path/to/............1.jpg" />
    </a>
    <a href="path/to...............">
        <img src="path/to/............2.jpg" />
    </a>
    .......
</div>

JAVASCRIPT

<script>jQuery("#my-gallery").justifiedGallery({
    rowHeight : 120,
    margins : 0 
});</script>

ISSUE - 使用上面的代码，插件工作得很好但仅适用于html语法的第一个实例。这意味着，如果我在同一页面上尝试<div id="my-gallery">......</div>两次或更多次，它只适用于第一个实例。由于同一页面上会有多个画廊，我需要循环播放。

我可以很好地处理PHP，但尚未开始学习javascript，因此无法破解javascript。如果它只是php，我会为每个库生成不同的ID，类似下面的代码。

$arr = array('first_gallery', 'second_gallery', 'third_gallery'); 
$i = 0;
foreach($arr as $a){
echo '<div id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;   
}

上面的代码会在view-source中产生。

<div id="my-gallery-0">first_gallery</div><br>
<div id="my-gallery-1">second_gallery</div><br>
<div id="my-gallery-2">third_gallery</div><br>

所以问题是，我的逻辑是否正确解决这个问题，如果是，那么（因为我的javascript是nill）我如何在我的javascript环境中解决这个问题。任何回应，如果赞赏。 TIA。

Answer 1

不允许您使用具有相同ID的多个元素...因此，如果有两个或更多<div id="my-gallery">，则无效HTML。

而是给每个人一个class，并使用该类名作为jQuery中的选择器。

<div id="my-gallery1" class="my-gallery-class">
   ...
</div>
<div id="my-gallery2" class="my-gallery-class">
   ...
</div>

$(function(){
  $(".my-gallery-class").each(function(){
    $(this).justifiedGallery({
      rowHeight : 120,
      margins : 0 
    });
  });
});

Answer 2

改为使用班级。 An ID must be unique. 拥有多个相同的ID是无效的HTML。输出如下：

$arr = array('first_gallery', 'second_gallery', 'third_gallery'); 

foreach($arr as $a){
  echo '<div class="my-gallery">'.$a. '</div><br>';
}

然后使用Javascript就像这样。（请注意，可能需要document ready event！）

<script>
  $(document).ready(function() {
    $(".my-gallery").justifiedGallery({
       rowHeight : 120,
       margins : 0 
  });
</script>

不鼓励在HTML中使用br来实现此目的。如果您的元素是块元素并且没有浮动或绝对定位，那么您将不再需要br。如果你想在它们之间留出一些空间，你可以设置边距是CSS（并删除br）：

.my-gallery {margin: 24px auto;}

如果你想在画廊项目上保留唯一的ID（我不知道为什么，对我来说似乎毫无意义和不必要的标记，但无论如何）你可以这样做：

$arr = array('first_gallery', 'second_gallery', 'third_gallery'); 
$i = 0;
foreach($arr as $a){
  echo '<div class="my-gallery" id="my-gallery-'.$i.'">'.$a. '</div><br>';
  $i++;   
}

Answer 3

正如其他人所建议的那样，您可以为每个图库提供一个公共类，并在JavaScript中使用它

例如：

<div class="gallery" id="my-gallery-0">first_gallery</div><br>
<div class="gallery" id="my-gallery-1">second_gallery</div><br>
<div class="gallery" id="my-gallery-2">third_gallery</div><br>


<script>
    jQuery(".gallery").justifiedGallery({
    rowHeight : 120,
    margins : 0 
});
</script>

如何获得justifiedGallery插件以使用多个画廊？

3 个答案: