Question

我认为这是一个我似乎无法弄清楚的非常简单的问题。我正在朋友的网站上工作，我使用lightGallery JQuery插件来展示一两个视频，但这就是问题所在。代码就像......

<div class="blah"> 
    <div class="more">
        <div id="lightGallery">
            <a href="#" data-src="http://www.youtube.com/watch?v=youtubeurl">link to open up video through lightGallery.</a> 
        </div>
    </div>
</div>

该代码将完美无缺。我甚至可以在它旁边添加另一个视频链接，它将包含在插件的视频库中。但是，当我需要将其包含在网页的另一部分中时，向下，第二个链接将根本不起作用。像这样。

<div class="blah"> 
    <div class="more">
        <div id="lightGallery">
            <a href="#" data-src="http://www.youtube.com/watch?v=youtubeurl">link to open up video through lightGallery.</a> 
        </div>
    </div> 
    <div class="blah2"> 
        <div class="more2">
            <a href="#" data-src="http://www.youtube.com/watch?v=2ndyoutubeurl">link to open up another video through lightGallery.</a> 
        </div>
    </div>
</div>

我想我也知道为什么。该链接必须在

下

<div id="lightGallery">

标签。但是那些与样式相关的其他/ div标签正在阻止它在两个链接上拉伸。当我尝试使用另一个div id标记两次调用lightGallery时，第二个链接仍然无法正常工作。有没有人有任何想法？

谢谢。

Answer 1

查看文档以制作轻巧的图库：

// Makes an element with the id "lightGallery" a light gallery
$("#lightGallery").lightGallery();

很明显，如果你没有将它放在光库div内，它就无法运作。所以，只需制作两个轻型画廊：

<强> JS

$(document).ready(function() {
    $("#lightGallery").lightGallery(); 
    $("#lightGallery2").lightGallery();
});

<强> HTML

<div class="blah"> 
    <div class="more">
        <div id="lightGallery">
            <a href="#" data-src="http://www.youtube.com/watch?v=youtubeurl">link to open up video through lightGallery.</a> 
        </div>
    </div> 
</div>
<div class="blah2"> 
    <div class="more2">
         <div id="lightGallery2">
            <a href="#" data-src="http://www.youtube.com/watch?v=2ndyoutubeurl">link to open up another video through lightGallery.</a> 
         </div>
    </div>
</div>

<div>标签问题？</div>

1 个答案: