Presentación de imágenes con jQuery javascript y css..

Hola amigos les traigo una nueva publicación esta vez consiste en la presentación de imágenes con un plugin de jQuery….

Si lo que necesitas es mostrar una galería de imágenes en vuestras web’s muchas veces para captar la atención del usuario, no nos vendría mal este Plugin jQuery.

Esta implementación es bástante sencilla y su creador fue Danny Markov .. En primer lugar, usted tiene que insertar una imágenen el HTML como lo haría normalmente. Después de esto, hay que añadir un atributo de datos-data-slideshow– y establecer una serie de imágenes que desea convertirse en un pase de diapositivas.

Archivos a utilizar:

index.html

plugin.js

javascript.js

estilo.css

jQuery.js

Dentro del index utilizariamos las librerías a utilizar colocando en orden dentro del head ejm:

<link rel="stylesheet" type="text/css" href="estilo/estilo.css">
<script src="plugin.js"></script>
<script src="javascript.js"></script>
<script src="jquery.js"></script>

Mostramos la imágen dentro del body y sus atributo data-slideshow …

<img src="imagenes/principal.jpg" data-slideshow='imagenes/img1.jpg|imagenes/img2.jpg|imagenes/img3.jpg' alt="Galeria">

El código del plugin.js

(function ($) {
    $.fn.slideShow = function (options) {

//           Supplying default options

        options = $.extend({
            timeOut: 3000,
            showNavigation: true,
            pauseOnHover: true,
            swipeNavigation: true
        }, options);


//        Variables
        var intervals = [],
            slideshowImgs = [],
            originalSrc,
            img,
            cont,
            width,
            height,

//        Creates an object with all the elements with a 'data-slideshow' attribute

            container = this.filter(function () {
                return $(this).data('slideshow');
            });

//        Cycle through all the elements from the container object
//        Later on we'll use the "i" variable to distinguish the separate slideshows from one another

        for (var i = 0; i < container.length; i++) {

            cont = $(container[i]);

            width = container.eq(i).outerWidth(true);
            height = container.eq(i).outerHeight(true);

//            For every separate slideshow, create a helper <div>, each with its own ID.
//            In those we'll store the images for our slides.

            var helpdiv = $('<div id="slideshow-container-' + i + '" class="slideshow" >');

            helpdiv.height(height);
            helpdiv.width(width);

//            If this option is enabled, call a function that appends buttons

            if (options.showNavigation) {
                createNavigation();
            }

//            Append the original image to the helper <div>

            originalSrc = cont.attr('src');
            img = $('<div class="slide" style="background-image: url(' + originalSrc + ')">');
            img.appendTo(helpdiv);

//            Append the images from the data-slideshow attribute

            slideshowImgs[i] = cont.attr('data-slideshow').split("|");

            for (var j = 0; j < slideshowImgs[i].length; j++) {

                img = $('<div class="slide" style="background-image: url(' + slideshowImgs[i][j] + ')">');
                img.appendTo(helpdiv);

            }

//            Replace the original element with the helper <div>

            cont.replaceWith(helpdiv);

//            Activate the slideshow

            automaticSlide(i)

        }


        // Functions

//          Slideshow auto switch

        function automaticSlide(index) {

            // Hide all the images except the first one
            $('#slideshow-container-' + index + ' .slide:gt(0)').hide();

            // Every few seconds fade out the first image, fade in the next one,
            // then take the first and append it to the container again, where it becomes last

            intervals[index] = setInterval(function () {
                    $('#slideshow-container-' + index + ' .slide:first').fadeOut("slow")
                        .next('.slide').fadeIn("slow")
                        .end().appendTo('#slideshow-container-' + index + '');
                },
                options.timeOut);
        }


//           Pause on hover and resume on mouse leave

        if (options.pauseOnHover) {
            (function hoverPause() {
                $('.slideshow').on({
                    'mouseenter.hover': function () {
                        clearInterval(intervals[($(this).attr('id').split('-')[2])])
                    },
                    'mouseleave.hover': function () {
                        automaticSlide($(this).attr('id').split('-')[2])
                    }
                });
            })()
        }


//          We use this to prevent the slideshow from resuming once we've stopped it

        function hoverStop(id) {
            $('#' + id + '').off('mouseenter.hover mouseleave.hover');
        }


//          Create the navigation buttons

        function createNavigation() {

//            The buttons themselves
            var leftArrow = $('<div class="leftBtn slideBtn hide">');
            var rightArrow = $('<div class="rightBtn slideBtn hide">');
//            Arrows for the buttons
            var nextPointer = $('<span class="pointer next"></span>');
            var prevPointer = $('<span class="pointer previous"></span>');

            prevPointer.appendTo(leftArrow);
            nextPointer.appendTo(rightArrow);

            leftArrow.appendTo(helpdiv);
            rightArrow.appendTo(helpdiv);
        }

//          Slideshow manual switch

        if (options.showNavigation) {

//            This shows the navigation when the mouse enters the slideshow
//            and hides it again when it leaves it

            $('.slideshow').on({
                'mouseenter': function () {
                    $(this).find('.leftBtn, .rightBtn').removeClass('hide')
                },
                'mouseleave': function () {
                    $(this).find('.leftBtn, .rightBtn').addClass('hide')
                }
            });

//            Upon click, stop the automatic slideshow and change the slide

            $('.leftBtn').on('click', function () {

                // Clear the corresponding interval to stop the slideshow
                // (intervals is an array, so we give it the number of the slideshow container)

                clearInterval(intervals[($(this).parent().attr('id').split('-')[2])]);

                // Make the last slide visible and set it as first in the slideshow container

                $(this).parent().find('.slide:last').fadeIn("slow")
                    .insertBefore($(this).parent().find('.slide:first').fadeOut("slow"));

                hoverStop($(this).parent().attr('id'));
            });

            $('.rightBtn').on('click', function () {

                // Clear the corresponding interval to stop the slideshow
                clearInterval(intervals[($(this).parent().attr('id').split('-')[2])]);

                // Fade out the current image and append it to the parent, making it last
                // Fade in the next one

                $(this).parent().find('.slide:first').fadeOut("slow")
                    .next('.slide').fadeIn("slow")
                    .end().appendTo($(this).parent());

                hoverStop($(this).parent().attr('id'));
            });
        }

//              Change slide on swipe

        // Same as the 'on click' functions, but we use hammer.js this time

        if (options.swipeNavigation) {
            $('.slideshow').hammer().on({
                "swiperight": function () {
                    clearInterval(intervals[($(this).attr('id').split('-')[2])]);

                    $(this).find('.slide:last').fadeIn("slow")
                        .insertBefore($(this).find('.slide:first').fadeOut("slow"))

                },
                "swipeleft": function () {
                    clearInterval(intervals[($(this).attr('id').split('-')[2])]);

                    $(this).find('.slide:first').fadeOut("slow")
                        .next('.slide').fadeIn("slow")
                        .end().appendTo($(this));
                }
            })
        }

    }
}(jQuery)
    )
;


javascript.js nos sirve para inicializar el efecto no dude en cambiar su configuración …

(function ($) {
    $('#activate').on('click', function () {
        $('div, img').slideShow({
            timeOut: 2000,
            showNavigation: true,
            pauseOnHover: true,
            swipeNavigation: true
        });

        var navbar=$('.navbar')

        navbar.animate({top: '-100px'}, function () {
            navbar.hide();
        });

    })
}(jQuery));

estilo.css con su clase slideshow para contener todas las imágenes y mostramos unas flechas blancas con su cursor pointer…

/*Slideshow container*/

.slideshow {
    position: relative;
    max-width: 100%;
}

/*Slideshow images*/

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/*Buttons*/

.slideBtn {
    position: absolute;
    z-index: 10;
    width: 50px;
    height: 100%;
    cursor: pointer;
}

.leftBtn {
    left: 0px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.rightBtn {
    right: 0px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

/*Arrow pointers*/

.pointer {
    position: absolute;
    top: 50%;
    margin-top: -32px;
    z-index: 9001;
    left: 12px;
    opacity: 0.8;
}

.previous {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid white;

}

.next {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid white;
    right: 12px;
    left: auto;
}

/*Helper style classes*/

.hide {
    visibility: hidden;
}

El archivo jQuery tendrás que descargar de su web de autor:

Este plugin cuenta con una activación de imagenes como verás en el demo después de su activación comienza el efecto apareciendo y desapareceindo una tras otra las imagenes este ejemplo cuenta con hammer.js el cual cuenta con un deslizamiento de imágenes en cuanlquier dispositivo táctil en su descarga podrás ver sus archivos y configuración..

Relacionado