javascript - Jquery Fancybox 如何添加额外的导航按钮？

Question

我正在使用 fancybox 2 在我的网站上显示照片库。 html 具有指向摄影和图形设计等画廊的链接，并且图像列在 js 文件中。

在这个链接的图片中https://dl.dropboxusercontent.com/u/107031749/fancyboksi/help.JPG是我现在所拥有的。我已经设计了导航。我正在使用定制的“简单的虚线导航”。 我需要橙色箭头方面的帮助(绿色的下一个/上一个和关闭按钮运行良好，没有问题)。单击橙色箭头时，应显示下一个或前 10 个链接。一个图库中可以有将近 50 张图片，所以我需要这个功能。 (由于样式的原因，它现在显示 19 个链接。我稍后会修复它。)

我没有太多的 javascript 技能，我通常是复制和粘贴。下面是js代码的一部分。从“var karuselli_next =...”到“$("#oikea_btn").attr("title", karuselli_next);"行是需要修复的。

        function addLinks() {
        var list = $("#linksit");

        if (!list.length) {
            list = $('<ul id="linksit">');

            for (var i = 0; i < this.group.length; i++) {
                $('<li data-index="' + i + '"><label>' + (i+1) + '</label></li>').click(function() { $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
            }
            list.appendTo( 'body' );
            $("#linksit").wrap('<div id="karuselli">' + '<div id="navi_linksit">' + '<div class="linksit">'); // Lisää divit + ul#linksit sisällä
            $(".linksit").before('<a id="vasen_btn" class="vasen_btn" href="javascript:;" />'); // Lisää nuoli vasemmalle
            $(".linksit").before('<a id="oikea_btn" class="oikea_btn" href="javascript:;" />'); // Lisää nuoli oikealle

        }
        list.find('li').removeClass('active').eq( this.index ).addClass('active');

            var karuselli_next = $("#oikea_btn");
            var karuselli_prev = $("#vasen_btn");

            karuselli_next = $(".fancybox").eq( this.index + 10 ).attr("title");
            karuselli_prev = $(".fancybox").eq( this.index - 10 ).attr("title");
            $("#vasen_btn").attr("title", karuselli_prev);
            $("#oikea_btn").attr("title", karuselli_next);

        if (typeof this.title2 != 'undefined') {
            this.title = '<span class="finkku"><p class="kieli_gall">Suomi</p>' + this.title + '</span>' + "<br>" + '<span class="enkku"><p class="kieli_gall">English</p>' + this.title2 + '</span>'+ "<br>" + '<span class="img_num">' + (this.index + 1) + '<span class="img_num2">' + '(' + this.group.length + ')' + '</span>' + '</span>';
        } else {
            this.title = '<span class="finkku">' + this.title + '</span>' + "<br>" + '<span class="img_num">' + (this.index + 1) + '<span class="img_num2">' + '(' + this.group.length + ')' + '</span>' + '</span>';
        };
    }

    function removeLinks() {
        $("#linksit").remove();
        $("#karuselli").remove();
    }

谢谢你的帮助!

这是 jsFiddle http://jsfiddle.net/cattimir/gmqw37r3/1/

Answer 1

我根本没有使用过你的代码，因为我没有从你那里得到更多的代码。缺少可用的 jsFiddle...

我用 simplePagination jQuery plugin 对分页进行了编码.

我已经使用了 fancybox(不确定你是否真的需要 fancybox)，因为我没有使用 fancybox 的任何功能。无论如何，如果您需要它，它应该像在代码中一样工作。

您可以在 jsFiddle 找到演示. (以下代码与 jsFiddle 代码相同。)

我认为这应该是您要找的，只需添加您的 css 样式即可。

$(document).ready(function () {
    var $pagination = $('#container').simplePagination({
        previous_content: '<i class="fa fa-arrow-left"></i>', //e.g. '<'
        next_content: '<i class="fa fa-arrow-right"></i>', //e.g. '>'
        number_of_visible_page_numbers: 6,
        items_per_page: 1,
        pagination_container: 'ul',
        html_prefix: 'simple-pagination',
        navigation_element: 'a', //button, span, div, et cetera
    });


    /*
    $.fancybox({
        content: $pagination,
        prevEffect: 'none',
        nextEffect: 'none',
        scrolling: 'no',
        closeBtn: false,
        type: 'image', // required for lorempixel to work
    });

    $(".fancybox-overlay").unbind(); // disable dismiss if overlay clicked
    */
});

a {
    color: #216ed9;
    text-decoration: none;
}
a h1 {
    padding: 2rem;
    color: #216ed9;
    text-align: center;
}
a:hover {
    text-decoration: underline;
}
/*
a[class^="simple-pagination-navigation-"] + a[class^="simple-pagination-navigation-"] {
    margin-right: 0;
}*/
 a[class*="simple-pagination-navigation-disabled"] {
    color: black;
    cursor: default;
}
/*
Styles used to page things look nice :)
*/
 * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
body {
    font: 1rem/1rem Helvetica, sans-serif;
    background-color: #164B1f;
}
#header {
    border-radius: .5rem;
}
.my-navigation div {
    /*float: left;*/
    display: inline-block;
}
.my-navigation {
    text-align: center;
}
.nav-wrap {
    padding-top: 0.5em;
    margin: 0px auto;
}

.simple-pagination-page-numbers a {
    width: 2rem;
    padding: 0.5em;
    text-align: center;
}

.simple-pagination-page-numbers {
}
.simple-pagination-previous, .simple-pagination-next {
    padding-bottom: 0.5em;
}
#container {
    text-align: center;
}
.gallery {
    list-style: none;
    margin: 0px auto;
}
.gallery img {
    box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.25);
}
/*
.simple-pagination-navigation-previous {
    float: left;
}
.simple-pagination-navigation-next {
    float: right;
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/ddenhartog/jquery-simple-pagination/master/jquery-simple-pagination-plugin.js"></script>
<div id="container">
    <div class="my-navigation">
        <!--<div class="simple-pagination-first"></div>-->
        <div class="nav-wrap">
            <div class="simple-pagination-previous"></div>
            <div class="simple-pagination-page-numbers"></div>
            <div class="simple-pagination-next"></div>
            <!--<div class="simple-pagination-last"></div>--></div>
    </div>
    <ul class="gallery">
        <li>
            <img src="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" alt="" />
        </li>
        <li>
            <img src="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" alt="" />
        </li>
        <li>
            <img src="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_m.jpg" alt="" />
        </li>
        <li>
            <img src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" alt="" />
        </li>
        <li>
            <img src="http://lorempixel.com/240/160/sports/1/" alt="" />
        </li>
        <li>
            <img src="http://lorempixel.com/240/160/sports/2/" alt="" />
        </li>
        <li>
            <img src="http://lorempixel.com/240/160/sports/3/" alt="" />
        </li>
        <li>
            <img src="http://lorempixel.com/240/160/sports/4/" alt="" />
        </li>
        <li>
            <img src="http://lorempixel.com/240/160/sports/5/" alt="" />
        </li>
    </ul>
    <!-- not needed here <div class="simple-pagination-page-x-of-x"></div>
    <div class="simple-pagination-showing-x-of-x"></div>
    -->
</div>