How to create Prev and Next buttons

1

Hello, I'm trying to create a photo gallery with FancyBox that I downloaded and I would like to insert the Next and Back buttons but to go through 04 images with a single click. I'm attaching this address ( link ) for friends to check out what I plan to do.

Below I relate the code I'm using:

    <!-- Inicio da Página Fotos -->

    <div id="fotos" class="sections full-width-wrapper bg_5">
        <div class="centered-wrapper">
        <div class="section-header">
            <?php include 'menu_pags.php';?>            
        </div>

    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="js/jquery.fancybox.css?v=2.1.5" media="screen" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('.fancybox').fancybox();

            /*
             *  Different effects
             */

            // Change title type, overlay closing speed
            $(".fancybox-effects-a").fancybox({
                helpers: {
                    title : {
                        type : 'outside'
                    },
                    overlay : {
                        speedOut : 0
                    }
                }
            });

            // Disable opening and closing animations, change title type
            $(".fancybox-effects-b").fancybox({
                openEffect  : 'none',
                closeEffect : 'none',

                helpers : {
                    title : {
                        type : 'over'
                    }
                }
            });

            // Set custom style, close if clicked, change title type and overlay color
            $(".fancybox-effects-c").fancybox({
                wrapCSS    : 'fancybox-custom',
                closeClick : true,

                openEffect : 'none',

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    overlay : {
                        css : {
                            'background' : 'rgba(238,238,238,0.85)'
                        }
                    }
                }
            });

            // Remove padding, set opening and closing animations, close if clicked and disable overlay
            $(".fancybox-effects-d").fancybox({
                padding: 0,

                openEffect : 'elastic',
                openSpeed  : 150,

                closeEffect : 'elastic',
                closeSpeed  : 150,

                closeClick : true,

                helpers : {
                    overlay : null
                }
            });

            /*
             *  Button helper. Disable animations, hide close button, change title type and content
             */

            $('.fancybox-buttons').fancybox({
                openEffect  : 'none',
                closeEffect : 'none',

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

                closeBtn  : false,

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    buttons : {}
                },

                afterLoad : function() {
                    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                }
            });


            /*
             *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
             */

            $('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,
                arrows    : false,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });

            /*
             *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
            */
            $('.fancybox-media')
                .attr('rel', 'media-gallery')
                .fancybox({
                    openEffect : 'none',
                    closeEffect : 'none',
                    prevEffect : 'none',
                    nextEffect : 'none',

                    arrows : false,
                    helpers : {
                        media : {},
                        buttons : {}
                    }
                });

            /*
             *  Open manually
             */

            $("#fancybox-manual-a").click(function() {
                $.fancybox.open('1_b.jpg');
            });

            $("#fancybox-manual-b").click(function() {
                $.fancybox.open({
                    href : 'iframe.html',
                    type : 'iframe',
                    padding : 5
                });
            });

            $("#fancybox-manual-c").click(function() {
                $.fancybox.open([
                    {
                        href : '1_b.jpg',
                        title : 'My title'
                    }, {
                        href : '2_b.jpg',
                        title : '2nd title'
                    }, {
                        href : '3_b.jpg'
                    }
                ], {
                    helpers : {
                        thumbs : {
                            width: 75,
                            height: 50
                        }
                    }
                });
            });


        });
    </script>

    <style type="text/css">
        .fancybox-custom .fancybox-skin {box-shadow: 0 0 50px #222;}
        body {margin: 0 auto;}
    </style>

    <div id="single-gallery" class="full-width-wrapper">
        <div id="photos-container" class="full-width-container">
            <div class="slides_container" style="overflow: hidden; position: relative; display: block; margin:0 auto;">
                <div style="position: relative; width: 1000px; height: 466px; left: 0px;">

                    <p>
                        <a class="fancybox first" href="img/box.jpg" data-fancybox-group="gallery" title=" ">
                        <img width="232" height="232" src="img/box.jpg" alt="" />
                        </a>

                        <a class="fancybox" href="img/escada.jpg" data-fancybox-group="gallery" title=" ">
                        <img width="232" height="232" src="img/escada.jpg" alt="" />
                        </a>

                        <a class="fancybox" href="img/porta-pivotante_laqueada.jpg" data-fancybox-group="gallery" title=" ">
                        <img width="232" height="232" src="img/porta-pivotante_laqueada.jpg" alt="" />
                        </a>

                        <a class="fancybox" href="img/porta-pivotante_laqueada2.jpg" data-fancybox-group="gallery" title=" ">
                        <img width="232" height="232" src="img/porta-pivotante_laqueada2.jpg" alt="" />
                        </a>

                        <a class="fancybox" href="img/box.jpg" data-fancybox-group="gallery" title=" ">
                        <img width="232" height="232" src="img/box.jpg" alt="" />
                        </a>

                        <a class="fancybox" href="img/escada.jpg" data-fancybox-group="gallery" title=" ">
                        <img width="232" height="232" src="img/escada.jpg" alt="" />
                        </a>

                        <a class="fancybox" href="img/porta-pivotante_laqueada.jpg" data-fancybox-group="gallery" title=" ">
                        <img width="232" height="232" src="img/porta-pivotante_laqueada.jpg" alt="" />
                        </a>

                        <a class="fancybox" href="img/porta-pivotante_laqueada2.jpg" data-fancybox-group="gallery" title=" ">
                        <img width="232" height="232" src="img/porta-pivotante_laqueada2.jpg" alt="" />
                        </a>
                    </p>

                    </div>
                </div>
            </div>
        </div>
    </div>

Thanks for the help of your friends.

    
asked by anonymous 08.05.2016 / 18:59

1 answer

0

Friends, I managed to solve it. And the code looks like this:

    <div id="fotos" class="sections full-width-wrapper bg_5">
    <div class="centered-wrapper">
    <div class="section-header">
        <?php include 'fancybox/menu_pags.php';?>           
    </div>


   <div style="margin-top:130px; float:left;">
    <?php include'fancybox/js/config_show_room.php'; ?>
   </div>


    <div id="single-gallery" class="full-width-wrapper">
    <div id="photos-container" class="full-width-container">
        <div class="slides_container" style="overflow: hidden; position: relative; display: block; margin:0 auto;">
            <div class="photos-slide" style="position: absolute; top: 0; left: 932px; z-index: 0; display: none;">
            <span class="filler"></span>

    <a class="fancybox" href="fancybox/img/escada.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/escada.jpg" alt="" /></a>

    <a class="fancybox" href="fancybox/img/porta-pivotante_laqueada.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/porta-pivotante_laqueada.jpg" alt="" /></a>

    <a class="fancybox" href="fancybox/img/escada.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/escada.jpg" alt="" /></a>

    <a class="fancybox" href="fancybox/img/porta-pivotante_laqueada2.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/porta-pivotante_laqueada2.jpg" alt="" /></a>

    <a class="fancybox" href="fancybox/img/porta-pivotante_laqueada.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/porta-pivotante_laqueada.jpg" alt="" /></a>

    <a class="fancybox" href="fancybox/img/escada.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/escada.jpg" alt="" /></a>

            </div>
            <div class="photos-slide" style="position: absolute; top: 0px; left: 932px; z-index: 0; display: none;">
            <span class="filler"></span>

    <a class="fancybox" href="fancybox/img/escada.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/escada.jpg" alt="" /></a>

    <a class="fancybox" href="fancybox/img/porta-pivotante_laqueada.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/porta-pivotante_laqueada.jpg" alt="" /></a>

    <a class="fancybox" href="fancybox/img/escada.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/escada.jpg" alt="" /></a>

    <a class="fancybox" href="fancybox/img/porta-pivotante_laqueada2.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/porta-pivotante_laqueada2.jpg" alt="" /></a>

    <a class="fancybox" href="fancybox/img/porta-pivotante_laqueada.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/porta-pivotante_laqueada.jpg" alt="" /></a>

    <a class="fancybox" href="fancybox/img/escada.jpg" data-fancybox-group="gallery" title=" ">
    <img width="232" height="232" src="fancybox/img/escada.jpg" alt="" /></a>

   </div></div></div>
   <a href="#" class="prev"></a><a href="#" class="next"></a>
   </div></div>

And continue using JavaScript and Style that I mentioned earlier.

Hugs to all.

    
12.05.2016 / 21:38