Question

我在图库中有一些缩略图，当用户点击它们时，我希望它在预览框中显示视频。我已经设置了javascript来在预览框中显示图像，因为我的图库和视频中有两个部分。

我是否只是在javascript中复制视频图像的功能？我知道我也需要嵌入视频，但我不确定将它们放在HTML中的位置，因为我只希望它们在单击缩略图时显示在预览框中。

注意：我试图把它放在一个小提琴中，但它很难用破碎的图像链接。

这是我的代码：

HTML

<div id="display"><img id="displayimg"></div>



 <div class="select">
    <div class="imagesection">
        <div class="galleryrow">
            <img id="selectimg" src="../assets/images/gallery/image1.png" onclick='javascript:display(this)'>
            <img id="selectimg" src="../assets/images/gallery/image2.png" onclick='javascript:display(this)'>
            <img id="selectimg" src="../assets/images/gallery/image3.png" onclick='javascript:display(this)'>
        </div>

        <div class="galleryrow">
            <img id="selectimg" src="../assets/images/gallery/image4.png" onclick='javascript:display(this)'>   
            <img id="selectimg" src="../assets/images/gallery/image5.png" onclick='javascript:display(this)'>
            <img id="selectimg" src="../assets/images/gallery/image6.png" onclick='javascript:display(this)'>
        </div>
    </div>

    <div class="videosection">
        <div class="galleryrow">
            <img id="selectimg" src="../assets/images/gallery/video1.png" onclick='javascript:display(this)'>
            <img id="selectimg" src="../assets/images/gallery/video2.png" onclick='javascript:display(this)'>
            <img id="selectimg" src="../assets/images/gallery/video3.png" onclick='javascript:display(this)'>
        </div>

        <div class="galleryrow">
            <img id="selectimg" src="../assets/images/gallery/video4.png" onclick='javascript:display(this)'>
            <img id="selectimg" src="../assets/images/gallery/video5.png" onclick='javascript:display(this)'>
            <img id="selectimg" src="../assets/images/gallery/video6.png" onclick='javascript:display(this)'>
        </div>
    </div>

<!--END OF SELECT-->
</div>

CSS

    #display{
    margin: 0 auto;
    height:468px;
    width:627px;
    padding-top:37px;
}

#display img{
    height:100%;
    width:100%; 
}

.select{
    padding-top:78px;

}

.select img{
    width:146px;
}

.galleryrow {
    display:block;
}

.videosection {
    float:left;
    margin-left:30px;
}

.imagesection {
    float:left;
}

JAVASCRIPT

function display(imgElement){
    document.getElementById('displayimg').setAttribute('src',imgElement.getAttribute('src'));
}

Answer 1

我会做以下事情：

在<a href>个标记

<img>

为视频设置目标iframe
将iframe命名为目标

例如：

<iframe name="iframe1" class="myClass"></iframe>
<a href="http://www.youtube.com/embed/myVideo1" target="iframe1"><img id="selectimg" src="../assets/images/gallery/image1.png"></a>

您的视频应该在目标

顺便说一下，如果你为每个图像保留相同的id，你将会遇到一些html错误（使用验证器来跟踪这些错误）...我会想出一个一致的命名系统。例如，每个图像被连续编号以匹配文件名。设id =＆＃34; selectimg1＆＃34;对应于image1.png，id =＆＃34; selectimage2＆＃34;对应于image2.png等。

单击图像以显示视频

1 个答案: