javascript - 如何制作可以悬停的画廊或视频或图像缩略图并显示更大的图像？

Question

我正在尝试创建这样的图片库。 https://angel.co/payward-kraken

要点: 1. 它有一个更大的图像，当我将鼠标悬停在缩略图上时，我想将其换成缩略图中的内容。 2.我想把第一个“大图”做成视频。 3. 我希望标题随着每次图像切换而改变。

我已经能够弄清楚如何制作一个缩略图列表，我可以将鼠标悬停在上面并更改更大的图像。我还问了一个先前的问题，并得到了关于如何进行视频交换的很好的答案。我遇到的问题是如何更改字幕以及如何让视频成为第一个出现的内容。

这就是我一直在努力的..

HTML 
<div id="imgDetail">
 <video  width="320" height="240" controls>
   <source src="http://theinfluence.co/assets/img/Traackr.mp4" type="video/mp4" />
</video>
<img src="http://theinfluence.co/assets/img/traackr2.png" id="bigImg" />
<ul>
    <li>
        <img src="http://theinfluence.co/assets/img/ebuzzing1.png" class="thumb" />
    </li>
    <li>
        <img src="http://theinfluence.co/assets/img/ebuzzing2.png"  class="thumb" />
    </li>
    <li>
        <img src="http://theinfluence.co/assets/img/ebuzzing3.png" class="thumb" />
   </li>
    <li ><img src="http://theinfluence.co/assets/img/ebuzzing4.png" class="thumb   video" /></li>
   <!--- Etc--->
  </ul>
</div>

CSS

#imgDetail video
{
  display:none;
 }

ul, ol {
 margin-bottom: 10px;
 margin-top: 0;
}

Javascript

$('#imgDetail li img').not(".video").hover(function(){
    $('#imgDetail video').hide();
    $('#bigImg').show();        
    $('#bigImg').attr('src',$(this).attr('src'));
});

$('#imgDetail li img.video').hover(function(){
    $('#bigImg').hide();
    $('#imgDetail video').show();        
});

http://jsfiddle.net/Xb25p/ .

任何帮助将不胜感激。

Answer 1

要完成标题的更改，您可以将标题存储为元素本身的 data 属性。例如，您可以这样做:

<img src="http://theinfluence.co/assets/img/ebuzzing1.png" class="thumb" data-caption="My caption here"/>

在 HTML5 中，数据属性充当“隐藏输入”字段，您可以在其中实际存储和访问数据，而无需用户查看。然后，您可以在悬停函数中使用 jQuery 的 .data() 方法访问标题，如下所示:

$('#imgDetail li img.video').hover(function(){
    var caption = $(this).data('caption');
    // Use your caption here
    $('#bigImg').hide();
    $('#imgDetail video').show();        
});

对于标题元素本身，我建议使用 HTML5 的内置功能，通过使用图形:

<figure id="myFigure">
    <img src='image.jpg' />
    <figcaption>Caption here</figcaption>
</figure>

如果这样做，您可以简单地通过以下 jQuery 更改标题:

$('#imgDetail li img.video').hover(function(){
    var caption = $(this).data('caption');
    $('#myFigure > figcaption').text(caption);        

    $('#bigImg').hide();
    $('#imgDetail video').show();        
});

要先制作视频，您真正需要做的就是启动隐藏的“bigImg”元素。您可以通过在其 CSS 规则中添加这一行来做到这一点:

#bigImg {
    display: none;
}

希望这对您有所帮助!