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>

Answer 2

您找到代码的解决方案了吗？如果没有，这是您改进的代码，带有您想要的分页。 只是样式需要改进，但 js 代码现在可以工作了。

我已经重新编码了很多，这就是为什么我的答案来得很晚。

我添加了函数refreshPagination 来管理分页。我首先尝试让 simplePagination jQuery 插件工作，但没有成功。

如果您想增加显示的页面链接数，您只需更改变量pagination_size。

可以通过将分页功能重构为一个单独的对象来改进代码，但它可以正常工作。

我还添加了单个图像下一个/上一个单击将检查分页是否需要修改，如果它在afterLoad 方法中前进到下一个图像。

这就是调用addLinks.bind(this)(curPagination); 函数之前所有if 条件检查的内容。 我将fancybox 对象绑定到addLinks 调用以访问fancybox 索引等。 您还可以将addLinks 方法添加到fancybox 对象，这样您就可以使用this.addLinks(curPagination) 调用它，这样会更简洁。无论如何，它也适用于绑定。

您可以在下方和此处jsFiddle 找到演示。

(function($) {
//function galleriaGraafinen(graafinen){
var images = [{
    href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}, {
    href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
    title: 'Kuvateksti',
    title2: 'Caption'
}];

var curPagination = 0, // current pagination position
    pagination_size = 5, // constant for pagination
    activeIndex = 0,
    $listItems = []; // currently visible pagination items

$.fancybox.open(images, {

    beforeShow: function () {
        /* Disable right click */
        $.fancybox.wrap.bind("contextmenu", function (e) {
            return true;
        });
    },

    openEffect: 'none',
    closeEffect: 'none',

    prevEffect: 'none',
    nextEffect: 'none',

    afterLoad: function (current, previous) {

        // curPagination 0  5     10 ...
        // index      01234 56789 10...
        var lastIndex = (curPagination + pagination_size) - 1; // 4 9 14
        //console.log(this.index, 'after load', curPagination, lastIndex);

        // find correct pagination 
        // 0...4 --> pagination = 0
        // 5...9 --> pagination = 5
        // 10...14 --> pagination = 10

        // check if pagination is required?
        if (this.index < curPagination || this.index > lastIndex) {
            // index is not in current pagination range --> adjust pagination
            // increasing from 0
            if (this.index > lastIndex) {
                // check if we're at the end of the group?
                if (curPagination <= this.group.length - 2 * pagination_size) curPagination += pagination_size; //next clicked
                else curPagination = this.group.length - pagination_size;
            } else {
                // back navigation of pagination
                if (this.index <= curPagination) {
                    if (this.index >= pagination_size) {
                        curPagination -= pagination_size;
                    } else {
                        curPagination = 0;
                    }
                }
            }

            // decreasing from 0 --> roll-over to last element
            if (this.index == this.group.length - 1) curPagination = this.group.length - pagination_size;
        }

        addLinks.bind(this)(curPagination);
    },
    beforeClose: removeLinks,

    margin: [45, 15, 40, 15],
    padding: 0,

    helpers: {
        title: {
            type: 'outside'
        },

        /*			thumbs : {
				width   : 20,
				height  : 20,
				position : 'top'
				},*/

        overlay: {
            locked: true,
            closeClick: false
        }
    }
});

function addLinks(pos) {

    var self = this;
    curPagination = pos || 0;

    activeIndex = this.index; // store currently active image index

    function refresh_pagination(pos) {
        var itemCount = 0;
        $('#linksit').empty();
        $listItems = [];
        $.each(self.group, function (i, value) {
            if (i >= pos && itemCount < pagination_size) {
                itemCount++;
                $listItems[i] = $('<li/>')
                    .attr('data-index', i)
                    .append($('<label/>')
                    .text(i + 1))
                    .click(function () {
                    $.fancybox.jumpto($(this).data('index'));
                });

                // check if current element is active?
                if (i == activeIndex) {
                    //console.log('found index', i);
                    $listItems[i].addClass('active');
                }
            }
        });

        $('#linksit').html($listItems);
    }
    refresh_pagination(curPagination);

    var $list = $('<ul/>')
        .removeClass('active')
        .attr('id', 'linksit')
        .html($listItems);

    //console.log($('#linksit').length);
    if (!$('#linksit').length) {
        // pagination not in DOM --> add it
        $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:;"></a>'); // Lisää nuoli vasemmalle --> back button
        $(".linksit").after('<a id="oikea_btn" class="oikea_btn" href="javascript:;"></a>'); // Lisää nuoli oikealle --> next button
        
        // click handlers for pagination
        
        $('#vasen_btn').click(function () {
            //back pagination
            //console.log(curPagination);
            if (curPagination > pagination_size) curPagination -= pagination_size;
            else curPagination = 0;

            refresh_pagination(curPagination);
        });
        $('#oikea_btn').click(function () {
            //next pagination
            //console.log(curPagination);
            if (curPagination <= self.group.length - 2 * pagination_size) curPagination += pagination_size;
            else curPagination = self.group.length - pagination_size;
            refresh_pagination(curPagination);
        });
    } else {
        // pagination links already in DOM --> update them
        $('#linksit').html($listItems);
    }

    //console.log($listItems);
    
    // add titles

    if ( this.title2 ) {
        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();
}
//};
    
//window.galleriaTridmalli = galleriaGraafinen;
    
})(jQuery);

@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);
 .fancybox-title, .fancybox-title a:link, .fancybox-title a:visited {
    font-size: 18px !important;
    font-family:'Shadows Into Light Two' !important;
    color: #303030 !important;
}
.fancybox-title-outside-wrap {
    margin-top: 20px !important;
}
.fancybox-wrap {
    margin-top: 25px !important;
}
.fancybox-skin {
    background-color: #ffffff !important;
    padding: 10px !important;
    border-radius: 8px !important;
}
.fancybox-overlay {
    background: url("http://kaasimir.name/schaibaa/ruutu_bg.jpg") !important;
}
.fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url("http://kaasimir.name/schaibaa/fancybox_sprite_oma.png") !important;
}
.fancybox-close {
    top: -5px !important;
    right: -93px !important;
    width: 75px !important;
    height: 50px !important;
}
.fancybox-nav span {
    width: 100px !important;
    height: 70px !important;
    visibility: visible !important;
}
.fancybox-nav {
    width: 200px !important;
}
.fancybox-prev {
    left: -140px !important;
}
.fancybox-next {
    right: -140px !important;
}
.fancybox-prev span {
    background-position: 0 -50px !important;
}
.fancybox-next span {
    background-position: 0 -128px !important;
}
#karuselli {
    display: block;
    position: relative;
    top: -40px;
    width: 40%;
    height: auto;
    margin: 0 auto;
    z-index: 99999 !important;
}
/* added font-awesome icons at the end of css --> image is missing */
 #navi_linksit a.vasen_btn {
    cursor: pointer;
    position: absolute !important;
    left: -50px;
    z-index: 99999 !important;
    display: block !important;
    /*width: 44px !important;
    height: 22px !important;
    content: url("http://kaasimir.name/schaibaa/nuoli_vasen.png") !important;
    */
    float: left !important;
}
#navi_linksit a.oikea_btn {
    cursor: pointer;
    position: absolute !important;
    right: -50px;
    z-index: 99999 !important;
    display: block !important;
    /*width: 44px !important;
    height: 22px !important;
    content: url("http://kaasimir.name/schaibaa/nuoli_oikea.png") !important;
    */
    float: right !important;
}
div.linksit {
    position: absolute;
    width: 80%;
    height: 30px;
    text-align: center;
    z-index: 99991;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
ul#linksit {
    position: relative;
    overflow: hidden;
    list-style: none;
    text-align: center;
    z-index: 99990;
    line-height: 1.2;
    padding: 0;
    left: 0;
    top: 0;
    margin: 0;
    display: inline-flex;
}
ul#linksit li {
    display: inline;
    padding: 0 4px !important;
}
ul#linksit li label {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(179, 179, 179, 1);
    cursor: pointer;
    margin-bottom: 6px;
}
ul#linksit li.active label {
    background-color: orange !important;
    width: 20px;
    height: 20px;
}
/* Caption */
 .finkku {
    color: #303030;
    display: block;
    padding-bottom: 5px;
}
.enkku {
    color: #303030;
    display: block;
}
p.kieli_gall {
    color: #aa66aa;
    margin: 0 15px 0 0;
    display: inline;
}
/* Image number */
 .img_num {
    color: orange;
    font-size: 40px;
    position: absolute;
    top: -80px;
    left: 30px;
}
.img_num2 {
    color: orange;
    font-size: 20px;
    position: absolute;
    top: 8px;
    right: -40px;
}
/* pagination next/prev link styling */
 a.oikea_btn, a.vasen_btn {
    width: 10%;
}
a.oikea_btn:link, a.vasen_btn:link {
    text-decoration: none;
    text-underline: none;
}
.oikea_btn:before {
    font-family: FontAwesome;
    content:"\f054";
}
.vasen_btn:before {
    font-family: FontAwesome;
    content:"\f053";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<div>Graphic design <a href="#" onclick="javascript:galleriaTridmalli('tridmalli')">Link</a>

</div>
<div>Photography <a href="#">Link</a>

</div>
<div>Illustration <a href="#">Link</a>

</div>