Question

我正在开展一个学校项目，并尝试使用Fancybox创建一个图库。我的问题是：创建了图库，你可以在侧面列表菜单上看到图库的所有图像，所有功能都工作得很好，不管你不是先点击什么图像，甚至是在模态中浏览图库＃34 ;窗口＆＃34;只显示该组的第一个图像，甚至不显示所有其他图像。

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

这是我的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/

（注意：似乎一切都在小提琴中工作正常但我做了相同的更改（链接到cdn以获得完全相同的jQuery版本等等）并且它没有解决我的问题端）

Answer 1

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

Answer 2

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

当我编辑JSfiddle以添加更多支持来解决我的问题时，我看到它在小提琴中运行良好，所以我浏览了我使用的每一个样式表并发现了我的错误：

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



    font-family: raleway;
}

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

在所有内容上修改填充，边距，大小调整和浮动都会对fancybox的行为产生巨大影响。

因此我更新了规则，只选择了我确定不会影响fancybox的元素。

当我使用使用CSS的第三方插件时，我会重新考虑我对全局CSS mod的使用......

Fancybox图库和HTML列表

2 个答案: