javascript - 点击图片显示视频

Question

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

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

注意:我试图把它放在 fiddle 中，但很难处理损坏的图像链接。

这是我的代码:

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

我会做以下事情:

1. 地点<a href>围绕每个 <img>标签
2. 为视频设置目标 iframe
3. 命名作为目标的 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>

您的视频应该在目标设置的 iframe 中播放

顺便说一句，如果您为每张图片保留相同的 ID，您将遇到一些 html 错误(使用验证器来跟踪这些错误)...我会想出一个一致的命名系统。例如，每个图像都连续编号以匹配文件名。让id="selectimg1"对应image1.png，id="selectimage2"对应image2.png等