如何用fancybox显示混合的图像和视频？有可能的？ [英] How to show a mix of images and videos with fancybox? It is possible?

问题描述

这是我用于fancybox的脚本javascript：

This is my script javascript for fancybox:

<link rel="stylesheet" href="source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

这是我的部分图片列表：

And this is my section with list of images:

<section id="images">
              <ul>
                  <li>
                       <a class="fancybox" rel="group"  href="images/pic4.jpg" title="Image 1"><img  src="imagens/pic4.jpg" alt="Image 1" title="Image 1"></a>
                       <a class="fancybox" rel="group"  href="images/pic5.jpg" title="Image 2"><img  src="imagens/pic5.jpg" alt="Image 2" title="Image 2"></a>
                       <a class="fancybox" rel="group"  href="images/pic6.jpg" title="Image 3"><img  src="imagens/pic6.jpg" alt="Image 3" title="Image 3"></a>

                    </li>

                      <li>
                        <a class="fancybox" rel="group"  href="images/pic7.jpg" title="Image 4"><img  src="imagens/pic7.jpg" alt="Image 4" title="Image 4"></a>
                        <a class="fancybox" rel="group"  href="images/pic8.jpg" title="Image 5"><img  src="imagens/pic8.jpg" alt="Image 5" title="Image 5"></a>
                        <a class="fancybox" rel="group"  href="images/pic10.jpg" title="Image 6"><img  src="imagens/pic10.jpg" alt="Image 6" title="Image 6"></a>

                    </li>

                 </ul>

</section>

但是我想在我的图片列表中还有像thi这样的视频s：

But i want to have in my images list also videos like this:

<li>
         <a class="fancybox" rel="group"  href="videos/vid1.mp4" title="Video 1"><**video**  src="videos/vid1.mp4" alt="Video 1" title="Video 1"></a>
         <a class="fancybox" rel="group"  href="videos/vid2.mp4" title="Video 2"><**video**  src="videos/vid2.mp4" alt="Video 2" title="Video 2"></a>
         <a class="fancybox" rel="group"  href="images/pic10.jpg" title="Image 10"><img  src="images/pic10.jpg" alt="Image 10" title="Image 10"></a>

 </li>

但这不起作用，任何人都可以现在，如果可以将列表中的图像和视频与fancybox混合使用？我已经尝试过灯箱，但我也没有成功！

But this isnt working, anyone know if it is possible mix images and videos in lists with fancybox? I already tried with lightbox but i also didnt have sucess!

推荐答案

（文件）.ready（function（）{

(document).ready(function() {

（。fancybox）。fancybox（）;
}）;
< / script >

(".fancybox").fancybox(); }); </script>

这是我的部分图片列表：

And this is my section with list of images:

<section id="images">
              <ul>
                  <li>
                       <a class="fancybox" rel="group"  href="images/pic4.jpg" title="Image 1"><img  src="imagens/pic4.jpg" alt="Image 1" title="Image 1"></a>
                       <a class="fancybox" rel="group"  href="images/pic5.jpg" title="Image 2"><img  src="imagens/pic5.jpg" alt="Image 2" title="Image 2"></a>
                       <a class="fancybox" rel="group"  href="images/pic6.jpg" title="Image 3"><img  src="imagens/pic6.jpg" alt="Image 3" title="Image 3"></a>

                    </li>

                      <li>
                        <a class="fancybox" rel="group"  href="images/pic7.jpg" title="Image 4"><img  src="imagens/pic7.jpg" alt="Image 4" title="Image 4"></a>
                        <a class="fancybox" rel="group"  href="images/pic8.jpg" title="Image 5"><img  src="imagens/pic8.jpg" alt="Image 5" title="Image 5"></a>
                        <a class="fancybox" rel="group"  href="images/pic10.jpg" title="Image 6"><img  src="imagens/pic10.jpg" alt="Image 6" title="Image 6"></a>

                    </li>

                 </ul>

</section>

但是我想在我的图片列表中还有像thi这样的视频s：

But i want to have in my images list also videos like this:

<li>
         <a class="fancybox" rel="group"  href="videos/vid1.mp4" title="Video 1"><**video**  src="videos/vid1.mp4" alt="Video 1" title="Video 1"></a>
         <a class="fancybox" rel="group"  href="videos/vid2.mp4" title="Video 2"><**video**  src="videos/vid2.mp4" alt="Video 2" title="Video 2"></a>
         <a class="fancybox" rel="group"  href="images/pic10.jpg" title="Image 10"><img  src="images/pic10.jpg" alt="Image 10" title="Image 10"></a>

 </li>

But this isnt working, anyone k now if it is possible mix images and videos in lists with fancybox? I already tried with lightbox but i also didnt have sucess!

But this isnt working, anyone know if it is possible mix images and videos in lists with fancybox? I already tried with lightbox but i also didnt have sucess!

<a   class="fancyboxvideo fancybox.iframe" href="url ?>" data-fancybox-group="iframe"  >
<video width="300px" height="300px" >
<source src="./matagujri_admin/subproject_video/<?php echo

这篇关于如何用fancybox显示混合的图像和视频？有可能的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！