Question

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

要点：它有一个更大的图像，当我将鼠标悬停在它们上面时，我想换掉缩略图中的内容。我希望第一张“大图”成为一个视频。我希望每个图像开关都能改变标题。

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

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

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;
}

希望这有帮助！

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

1 个答案: