0

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

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

这是我的 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 等......）并且它并没有解决我的问题）

4

2 回答 2

0

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

于 2017-03-25T19:43:39.353 回答
0

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

当我编辑 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 模块的使用......

于 2017-03-26T21:01:52.233 回答