jQuery Fancybox如何添加额外的导航按钮？

Question

I am using fancybox 2 to display photo galleries on my website. The html has the links to galleries like photography & graphic design and the images are listed in a js-file.

In the picture in this link https://dl.dropboxusercontent.com/u/107031749/fancyboksi/help.JPG is what I have at the moment. I have already styled the navigation. I'm using a customized "simple dotted navigation". I need help with the orange arrows (The green next/previous & close buttons are working great, no problem with them). When clicked on an orange arrow, the next or previous 10 links should be displayed. There can be almost 50 images in one gallery, so I need this feature. (It's showing 19 links now because of the styling. I'll fix that later.)

I don't have much javascript skills, I copy & paste usually. Below is a part from the js code. The lines starting from "var karuselli_next =..." to the line "$("#oikea_btn").attr("title", karuselli_next);" are the ones that need fixing.

        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();
    }

Thank you for the help!

Here's the jsFiddle http://jsfiddle.net/cattimir/gmqw37r3/1/

Answer 1

I haven't used your code at all, because I haven't had more code from you. A working jsFiddle was missing...

I have coded the pagination with simplePagination jQuery plugin .

I've commeted the fancybox (not sure if you really need the fancybox), because I haven't used any feature of the fancybox. Anyway if you need it, it should work like it is in the code.

You can find the demo at jsFiddle . (The code below is identical to the jsFiddle code.)

I think it should be what you are looking for, just add your css styling.

 $(document).ready(function () { var $pagination = $('#container').simplePagination({ previous_content: '<i class="fa fa-arrow-left"></i>', //eg '<' next_content: '<i class="fa fa-arrow-right"></i>', //eg '>' 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

Have you found a solution for your code? If not, here is your improved code with the pagination like you wanted it. Just styling has to be improved but the js code is working now.

I have re-coded a lot that's why my answer comes pretty late.

I've added the function refreshPagination to manage the pagination. I have first tried to get the simplePagination jQuery plugin to work but with-out success.

If you'd like to increase the displayed page links count you'll only have to change the variable pagination_size .

The code could probably be improved by refactoring the pagination feature into a seperate object but it is working like it is.

I've also added that a single image next/prev click will check if the pagination needs to be modified if it's advancing to the next image in the afterLoad method.

That's what all the if conditions are checking before calling the addLinks.bind(this)(curPagination); function. I'm binding the fancybox object to the addLinks call to have access to the fancybox index etc. You could also add the addLinks method to the fancybox object, so you could call it with this.addLinks(curPagination) that would be cleaner. Any way, it's also working with binding.

You can find the demo below and here at 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>