Fancybox 图片库和 HTML 列表

Question

我正在做一个学校项目，我尝试使用 Fancybox 创建一个画廊。我的问题是：画廊已创建，您可以在侧面列表菜单中看到画廊的所有图像，所有功能都运行良好，除了无论您首先单击什么图像，甚至在模态中浏览画廊 "window" 只显示集合中的第一张图像，其他所有图像都不会显示。

我可能做错了所以这是我的代码。

这是我的 HTML（仅重要部分）：

头脚本

<!--Regular Scripts-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jq-plugins/rotation.js" type="text/javascript" ></script>
<script src="js/jq-plugins/transit.js" type="text/javascript" ></script>
<script src="js/jq-plugins/Vague.js" type="text/javascript" ></script>
<script src="js/jq-plugins/Modal_fancybox.js" type="text/javascript" whatIdo="fancybox3"></script>

列表

<ul id="gallerie">
    <li>
        <a>
            <img src="photoshop/test1.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test2.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test3.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test4.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test5.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test6.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test7.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test8.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test9.png" alt="img test"/>
        </a>
    </li>

    <li>
        <a>
            <img src="photoshop/test10.png" alt="img test"/>
        </a>
    </li>
</ul>

这是我用来修改这些图片周围的每个链接的 javascript :

$(document).ready(updateTags);
//Calls ↓


function updateTags(){
    var $LIs = $("#gallerie").children("li");

    $LIs.each(doTagUpdate);

    setupModal();
}
//Calls ↓


function doTagUpdate(index, elem){
    //caching results for performance optimization
    var $a = $(this).children("a").eq(0);
    var $img = $a.children("img").eq(0);
    var $path = $img.attr("src");

    //get filename from img
    var filename = getFileName($path);

    //set attributes and properties
    $a.attr("href", $path);
    $a.attr("data-fancybox", "gallery");
//    $a.attr("data-fancybox",filename);
//    $a.addClass("VNgallerie");
//    $a.attr("rel","gallery");
//    $a.attr("data-type","images");
}
//Calls ↓


function getFileName(path){
    var beg = 0;
    var end = 0;
    //beg and end exist for understanding purposes only

    var Fname = "";

    //get filename with extension
    for(var i = path.length ; i >= 0 ; i-=1){
        if(path.charAt(i) === '/'){
            beg=i+1;

            Fname = path.substring(beg);
            break;
        }
    }

    //remove extension
    for(var i = Fname.length ; i >= 0 ; i-=1){
        if(Fname.charAt(i) === '.'){
            end=i;

            Fname = Fname.substring(0, end);
        }
    }

    return Fname;
}







function setupModal(){
    $.fancybox.defaults.speed = sidemenu_slide_duration * 0.6;

    $(".VNgallerie").fancybox(
        {
            'image': {
                protect:true
            },
            'type': 'image',
            'helpers': {
                'title': null
            }
        }
    );
}

这是一个 JSfiddle : https://jsfiddle.net/Voltra/h8g2hcu7/10/

（注意：似乎在 fiddle 中一切正常，但我进行了相同的更改（链接到 cdn 以获得 jQuery 等完全相同的版本......）并且它没有解决我这边的问题）

Answer 1

将具有相同值的 data-fancybox 属性添加到您的链接以创建画廊。

Answer 2

首先感谢大家的回答。使用您拥有的所有信息无法解决我的问题:

当我编辑 JSfiddle 以添加更多支持来解决我的问题时，我看到它在 fiddle 中工作正常，所以我浏览了我使用的每一个样式表，发现我的错误：

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    overflow-x: hidden;



    font-family: raleway;
}

body *{
    z-index: 1;
    float:left;
}

修改所有内容的填充、边距、框大小和浮动对 fancybox 的行为方式产生了巨大影响。

因此我将规则更新为仅 select 我确信不会影响 fancybox 的元素。

当我使用使用 CSS ...

的第三方插件时，我将重新考虑我对全局 CSS 模组的使用

Fancybox 图片库和 HTML 列表

Fancybox image gallery and HTML list

jquery

fancybox

html-lists

fancybox-3