Question

我正在使用Skeleton CSS Boilerplate构建我的网站，并且在网格中我想使用免费的灯箱“HTML5 LightBox”。但是，当我点击任何一个灯箱时，它似乎被我的第一个灯箱/ div推翻了。

它正在努力，因为我或多或少是HTML的初学者，我不知道代码中的错误可能在哪里。

图像显示正确，p class =“imgtext”也显示正确，但是，当我点击第二张图片时，我得到了网站1的灯箱。

这是前两个colums的片段，里面有相应的灯箱：

<div class="container main">
<div class="row">

    <div class="four columns portfolio">
        <div id="mydiv" style="display:none;">
            <div class="lightboxcontainer">
                <div class="lightboxleft">
                    <div class="divtext">
                        <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 1</p>
                        <p class="divdescription" style="font-size:14px;line-height:20px;">xxxWonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                    </div>
                </div>
                <div class="lightboxright">
                    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
                </div>
                <div style="clear:both;"></div>
            </div>
        </div>

        <a href="#mydiv" class="html5lightbox" data-width="800" data-height="400" >        
        <div href="#mydiv" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
            <a href="#">
                <img class="grid" src="images/rven.jpg"  />
                <p class="imgtext">
                <span>
                    <span>Website 1</span>
                </span>
                </p>
            </a>
        </div>
        </a>
    </div><!-- End of element-->

    <div class="four columns portfolio">
        <div id="mydiv" style="display:none;">
            <div class="lightboxcontainer">
                <div class="lightboxleft">
                    <div class="divtext">
                        <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 2</p>
                        <p class="divdescription" style="font-size:14px;line-height:20px;">WonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                    </div>
                </div>
                    <div class="lightboxright">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
                    </div>
                <div style="clear:both;"></div>
            </div>
        </div>

        <a href="#mydiv" class="html5lightbox" data-width="800" data-height="400" >        
        <div href="#mydiv" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
            <a href="#">
                <img src="images/sortelunger.jpg"  />
                <p class="imgtext">
                <span>
                    <span>Website 2</span>
                </span>
                </p>
            </a>
        </div>
        </a>
    </div><!-- End of element-->
</div>

如果有人有任何想法，或者可以指出我正确的方向，我会非常感激。

亲切的问候，弗雷德里克

Answer 1

在摆弄了一段时间之后，我自己想出来了。

问题是我指的是div id＆＃34; mydiv＆＃34;一路走来。如果我将第一个div id设置为＆＃34; mydiv1＆＃34;，并将href设置为mydiv1，它将自动选择正确的div。

以下是具有正确ID的代码：

<div class="container main">
<div class="row">

<div class="four columns portfolio">
    <div id="mydiv1" style="display:none;">
        <div class="lightboxcontainer">
            <div class="lightboxleft">
                <div class="divtext">
                    <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 1</p>
                    <p class="divdescription" style="font-size:14px;line-height:20px;">xxxWonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                </div>
            </div>
            <div class="lightboxright">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>

    <a href="#mydiv1" class="html5lightbox" data-width="800" data-height="400" >        
    <div href="#mydiv1" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
        <a href="#">
            <img class="grid" src="images/rven.jpg"  />
            <p class="imgtext">
            <span>
                <span>Website 1</span>
            </span>
            </p>
        </a>
    </div>
    </a>
</div><!-- End of element-->

<div class="four columns portfolio">
    <div id="mydiv2" style="display:none;">
        <div class="lightboxcontainer">
            <div class="lightboxleft">
                <div class="divtext">
                    <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 2</p>
                    <p class="divdescription" style="font-size:14px;line-height:20px;">WonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                </div>
            </div>
                <div class="lightboxright">
                    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
                </div>
            <div style="clear:both;"></div>
        </div>
    </div>

    <a href="#mydiv2" class="html5lightbox" data-width="800" data-height="400" >        
    <div href="#mydiv2" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
        <a href="#">
            <img src="images/sortelunger.jpg"  />
            <p class="imgtext">
            <span>
                <span>Website 2</span>
            </span>
            </p>
        </a>
    </div>
    </a>
</div><!-- End of element-->

<div>推翻其他<div>的

1 个答案: