Top jQuery LightBoxes For Blogger (with Demo)

Blogger lightbox come into play whenever you click on any image in your blogspot post, it pop-up on whole screen like image preview box and...

Blogger lightbox come into play whenever you click on any image in your blogspot post, it pop-up on whole screen like image preview box and shows all images like photo gallery widget. The default blogger photo light box is not stylish and responsive to mobile version but still you can customize blogger lightbox with CSS.

There are so many blogger lightbox alternative but, i came up with top jQuery lightboxes. These custom lightboxes provides basic key benefits with additional features like auto slideshow, responsive to desktop tablets and mobiles, easy to customize etc. If you want to replace your simple blogger image lightbox viewer with a cool custom stylish responsive jQuery lightbox plugin to show off your pictures gallery in a stylish manner then just follow the below given step by step tutorial with images and demo:

custom stylish responsive jQuery lightbox for blogger

Dark Background

custom stylish responsive jQuery lightbox for blogger dark theme




White Background

custom stylish responsive jQuery lightbox for blogger white theme


Adding jQuery LightBox To Blogger


Step 1. Log in to your Blogger account, then go to Dashboard > Settings > Posts and comments.

Step 2. Find "Showcase images with Lightbox" and Select "No", Save settings.

Step 3. Then Navigate to Template > Click on setting icon under Mobile > Set Custom, then Save.


Set Custom mobile template in blogger for lightbox



Step 4. Again go to Template > Edit HTML.


Edit blogger template to add lightbox in blogger

Step 5. Click anywhere inside the Template code, then search for the following code ( CTRL+F )

</head>

Step 6. Add this code just above it (any one design of your choice).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/44nrvf9a6dtv7a8/ImageLightbox-USER.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script src='https://dl.dropboxusercontent.com/s/ooie16ljsg11jtu/fancybox-USER.js' type='text/javascript'></script>


Step 7. Again click anywhere inside the Template code, then search for the following code ( CTRL+F )

]]></b:skin>

Step 8. Add this code just above it (any one). Please select respective code in accordance to Step 6.

For Example: If you have used Design 1 code in Step 6 then choose either Design 1 (White Background) or Design 1 (Dark Background).

        html
        {
            /* killing 300ms touch delay in IE */
            -ms-touch-action: manipulation;
            touch-action: manipulation;
        }
                        button
                        {
                            border: none;
                            cursor: pointer;
                        }


        /* IMAGE LIGHTBOX SELECTOR */

        #imagelightbox
        {
            cursor: pointer;
            position: fixed;
            z-index: 10000;

            -ms-touch-action: none;
            touch-action: none;

            -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 );
            box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 );
        }


        /* ACTIVITY INDICATION */

        #imagelightbox-loading,
        #imagelightbox-loading div
        {
            border-radius: 50%;
        }
        #imagelightbox-loading
        {
            width: 2.5em;
            height: 2.5em;
            background-color: rgba( 0, 0, 0, .5 );
            position: fixed;
            z-index: 10003;
            top: 50%;
            left: 50%;
            margin: -1.25em 0 0 -1.25em;
            -webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 );
            box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 );
        }
            #imagelightbox-loading div
            {
                margin: 25%;
                width: 1.25em;
                height: 1.25em;
                background-color: #fff;

                -webkit-animation: imagelightbox-loading .5s ease infinite;
                animation: imagelightbox-loading .5s ease infinite;
            }

            @-webkit-keyframes imagelightbox-loading
            {
                from { opacity: .5;    -webkit-transform: scale( .75 ); }
                50%     { opacity: 1;    -webkit-transform: scale( 1 ); }
                to     { opacity: .5;    -webkit-transform: scale( .75 ); }
            }
            @keyframes imagelightbox-loading
            {
                from { opacity: .5;    transform: scale( .75 ); }
                50%     { opacity: 1;    transform: scale( 1 ); }
                to     { opacity: .5;    transform: scale( .75 ); }
            }


        /* OVERLAY */

        #imagelightbox-overlay
        {
            background-color: rgba( 255, 255, 255, .9 );
            position: fixed;
            z-index: 9998;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }


        /* "CLOSE" BUTTON */

        #imagelightbox-close
        {
            width: 2.5em;
            height: 2.5em;
            text-align: left;
            background-color: #666;
            border-radius: 50%;
            position: fixed;
            z-index: 10002;
            top: 2.5em;
            right: 2.5em;

            -webkit-transition: color .3s ease;
            transition: color .3s ease;
        }
            #imagelightbox-close:hover,
            #imagelightbox-close:focus
            {
                background-color: #111;
            }
            #imagelightbox-close:before,
            #imagelightbox-close:after
            {
                width: 2px;
                background-color: #fff;
                content: '';
                position: absolute;
                top: 20%;
                bottom: 20%;
                left: 50%;
                margin-left: -1px;
            }
            #imagelightbox-close:before
            {
                -webkit-transform: rotate( 45deg );
                -ms-transform: rotate( 45deg );
                transform: rotate( 45deg );
            }
            #imagelightbox-close:after
            {
                -webkit-transform: rotate( -45deg );
                -ms-transform: rotate( -45deg );
                transform: rotate( -45deg );
            }


        /* CAPTION */

        #imagelightbox-caption
        {
            text-align: center;
            color: #fff;
            background-color: #666;
            position: fixed;
            z-index: 10001;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0.625em;
        }


        /* NAVIGATION */

        #imagelightbox-nav
        {
            background-color: rgba( 0, 0, 0, .5 );
            border-radius: 20px;
            position: fixed;
            z-index: 10001;
            left: 50%;
            bottom: 3.75em;
            padding: 0.313em;

            -webkit-transform: translateX( -50% );
            -ms-transform: translateX( -50% );
            transform: translateX( -50% );
        }
            #imagelightbox-nav button
            {
                width: 1em;
                height: 1em;
                background-color: transparent;
                border: 1px solid #fff;
                border-radius: 50%;
                display: inline-block;
                margin: 0 0.313em;
            }
            #imagelightbox-nav button.active
            {
                background-color: #fff;
            }


        /* ARROWS */

        .imagelightbox-arrow
        {
            width: 3.75em;
            height: 7.5em;
            background-color: rgba( 0, 0, 0, .5 );
            vertical-align: middle;
            display: none;
            position: fixed;
            z-index: 10001;
            top: 50%;
            margin-top: -3.75em;
        }
        .imagelightbox-arrow:hover,
        .imagelightbox-arrow:focus
        {
            background-color: rgba( 0, 0, 0, .75 );
        }
        .imagelightbox-arrow:active
        {
            background-color: #111;
        }
            .imagelightbox-arrow-left
            {
                left: 2.5em;
            }
            .imagelightbox-arrow-right
            {
                right: 2.5em;
            }
            .imagelightbox-arrow:before
            {
                width: 0;
                height: 0;
                border: 1em solid transparent;
                content: '';
                display: inline-block;
                margin-bottom: -0.125em;
            }
                .imagelightbox-arrow-left:before
                {
                    border-left: none;
                    border-right-color: #fff;
                    margin-left: -0.313em;
                }
                .imagelightbox-arrow-right:before
                {
                    border-right: none;
                    border-left-color: #fff;
                    margin-right: -0.313em;
                }

        #imagelightbox-loading,
        #imagelightbox-overlay,
        #imagelightbox-close,
        #imagelightbox-caption,
        #imagelightbox-nav,
        .imagelightbox-arrow
        {
            -webkit-animation: fade-in .25s linear;
            animation: fade-in .25s linear;
        }
            @-webkit-keyframes fade-in
            {
                from    { opacity: 0; }
                to        { opacity: 1; }
            }
            @keyframes fade-in
            {
                from    { opacity: 0; }
                to        { opacity: 1; }
            }

        @media only screen and (max-width: 41.250em)
        {
            #imagelightbox-close
            {
                top: 1.25em;
                right: 1.25em;
            }
            .imagelightbox-arrow
            {
                width: 2.5em;
                height: 3.75em;
                margin-top: -2.75em;
            }
            .imagelightbox-arrow-left
            {
                left: 1.25em;
            }
            .imagelightbox-arrow-right
            {
                right: 1.25em;
            }
        }

        @media only screen and (max-width: 20em)
        {
            .imagelightbox-arrow-left
            {
                left: 0;
            }
            .imagelightbox-arrow-right
            {
                right: 0;
            }
        }
        html
        {
            /* killing 300ms touch delay in IE */
            -ms-touch-action: manipulation;
            touch-action: manipulation;
        }
                        button
                        {
                            border: none;
                            cursor: pointer;
                        }


        /* IMAGE LIGHTBOX SELECTOR */

        #imagelightbox
        {
            cursor: pointer;
            position: fixed;
            z-index: 10000;

            -ms-touch-action: none;
            touch-action: none;

            -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 );
            box-shadow: 0 0 3.125em rgba(129, 129, 129, 0.8);
        }


        /* ACTIVITY INDICATION */

        #imagelightbox-loading,
        #imagelightbox-loading div
        {
            border-radius: 50%;
        }
        #imagelightbox-loading
        {
            width: 2.5em;
            height: 2.5em;
            background-color: rgba( 0, 0, 0, .5 );
            position: fixed;
            z-index: 10003;
            top: 50%;
            left: 50%;
            margin: -1.25em 0 0 -1.25em;
            -webkit-box-shadow: 0 0 3.125em rgba(252, 252, 252, 0.8);
            box-shadow: 0 0 3.125em rgba(252, 252, 252, 0.8);
        }
            #imagelightbox-loading div
            {
                margin: 25%;
                width: 1.25em;
                height: 1.25em;
                background-color: #fff;

                -webkit-animation: imagelightbox-loading .5s ease infinite;
                animation: imagelightbox-loading .5s ease infinite;
            }

            @-webkit-keyframes imagelightbox-loading
            {
                from { opacity: .5;    -webkit-transform: scale( .75 ); }
                50%     { opacity: 1;    -webkit-transform: scale( 1 ); }
                to     { opacity: .5;    -webkit-transform: scale( .75 ); }
            }
            @keyframes imagelightbox-loading
            {
                from { opacity: .5;    transform: scale( .75 ); }
                50%     { opacity: 1;    transform: scale( 1 ); }
                to     { opacity: .5;    transform: scale( .75 ); }
            }


        /* OVERLAY */

        #imagelightbox-overlay
        {
            background-color: rgba(86, 86, 86, 0.5);
            position: fixed;
            z-index: 9998;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }


        /* "CLOSE" BUTTON */

        #imagelightbox-close
        {
            width: 2.5em;
            height: 2.5em;
            text-align: left;
            background-color: #C9C9C9;
            border-radius: 50%;
            position: fixed;
            z-index: 10002;
            top: 2.5em;
            right: 2.5em;

            -webkit-transition: color .3s ease;
            transition: color .3s ease;
        }
            #imagelightbox-close:hover,
            #imagelightbox-close:focus
            {
                background-color: #fff;
            }
            #imagelightbox-close:before,
            #imagelightbox-close:after
            {
                width: 2px;
                background-color: #000;
                content: '';
                position: absolute;
                top: 20%;
                bottom: 20%;
                left: 50%;
                margin-left: -1px;
            }
            #imagelightbox-close:before
            {
                -webkit-transform: rotate( 45deg );
                -ms-transform: rotate( 45deg );
                transform: rotate( 45deg );
            }
            #imagelightbox-close:after
            {
                -webkit-transform: rotate( -45deg );
                -ms-transform: rotate( -45deg );
                transform: rotate( -45deg );
            }

        /* CAPTION */

        #imagelightbox-caption
        {
            text-align: center;
            color: #fff;
            background-color: #666;
            position: fixed;
            z-index: 10001;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0.625em;
        }


        /* NAVIGATION */

        #imagelightbox-nav
        {
            background-color: rgba( 0, 0, 0, .5 );
            border-radius: 20px;
            position: fixed;
            z-index: 10001;
            left: 50%;
            bottom: 3.75em;
            padding: 0.313em;

            -webkit-transform: translateX( -50% );
            -ms-transform: translateX( -50% );
            transform: translateX( -50% );
        }
            #imagelightbox-nav button
            {
                width: 1em;
                height: 1em;
                background-color: transparent;
                border: 1px solid #fff;
                border-radius: 50%;
                display: inline-block;
                margin: 0 0.313em;
            }
            #imagelightbox-nav button.active
            {
                background-color: #fff;
            }


        /* ARROWS */

        .imagelightbox-arrow
        {
            width: 3.75em;
            height: 7.5em;
            background-color: rgba(255, 255, 255, 0.72);
            vertical-align: middle;
            display: none;
            position: fixed;
            z-index: 10001;
            top: 50%;
            margin-top: -3.75em;
        }
        .imagelightbox-arrow:hover,
        .imagelightbox-arrow:focus
        {
            background-color: rgba(167, 167, 167, 0.8);
        }
        .imagelightbox-arrow:active
        {
            background-color: #A5A5A5;
        }
            .imagelightbox-arrow-left
            {
                left: 2.5em;
            }
            .imagelightbox-arrow-right
            {
                right: 2.5em;
            }
            .imagelightbox-arrow:before
            {
                width: 0;
                height: 0;
                border: 1em solid transparent;
                content: '';
                display: inline-block;
                margin-bottom: -0.125em;
            }
                .imagelightbox-arrow-left:before
                {
                    border-left: none;
                    border-right-color: #000;
                    margin-left: -0.313em;
                }
                .imagelightbox-arrow-right:before
                {
                    border-right: none;
                    border-left-color: #000;
                    margin-right: -0.313em;
                }

        #imagelightbox-loading,
        #imagelightbox-overlay,
        #imagelightbox-close,
        #imagelightbox-caption,
        #imagelightbox-nav,
        .imagelightbox-arrow
        {
            -webkit-animation: fade-in .25s linear;
            animation: fade-in .25s linear;
        }
            @-webkit-keyframes fade-in
            {
                from    { opacity: 0; }
                to        { opacity: 1; }
            }
            @keyframes fade-in
            {
                from    { opacity: 0; }
                to        { opacity: 1; }
            }

        @media only screen and (max-width: 41.250em)
        {
            #imagelightbox-close
            {
                top: 1.25em;
                right: 1.25em;
            }
            .imagelightbox-arrow
            {
                width: 2.5em;
                height: 3.75em;
                margin-top: -2.75em;
            }
            .imagelightbox-arrow-left
            {
                left: 1.25em;
            }
            .imagelightbox-arrow-right
            {
                right: 1.25em;
            }
        }

        @media only screen and (max-width: 20em)
        {
            .imagelightbox-arrow-left
            {
                left: 0;
            }
            .imagelightbox-arrow-right
            {
                right: 0;
            }
        }


/* fancyBox Main */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
    position: relative;
    background: #f9f9f9;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch;
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 15px;
    white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('https://2.bp.blogspot.com/-V755Gx8-aHo/VvLBeoE0lfI/AAAAAAAAAgI/OpsdezqDFgkS2nN1F5vWYbBvfedfEg04A/s1600/fancybox_sprite.png');
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8060;
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url('https://1.bp.blogspot.com/-FBR9kEb_gaI/VvLB3gVvDLI/AAAAAAAAAgU/ha179LldSXYq9ZlC4exnXj77ZY8EPuq2w/s1600/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    background: transparent url('https://2.bp.blogspot.com/-PIoTiFEzeK0/VvLB3HBpVLI/AAAAAAAAAgM/cTIi7zRnHt4ZH3RfyB_Z3aQexOfGAl8ng/s1600/blank.gif'); /* helps IE */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
}

.fancybox-prev {
    left: 0;
}

.fancybox-next {
    right: 0;
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px;
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px;
}

.fancybox-nav:hover span {
    visibility: visible;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url('https://2.bp.blogspot.com/-t6wceVBTl8s/VvLB3S7QVhI/AAAAAAAAAgQ/1I-YNtB_t4kDWjIOwhYl1p9DCzPAiedbQ/s1600/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center;
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}

.fancybox-title-inside-wrap {
    padding-top: 10px;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8);
}

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){

    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
        background-image: url('https://2.bp.blogspot.com/-f59tFoWHbqw/VvLB4SmY8gI/AAAAAAAAAgY/PWzmVZLWqTcWWFrQJJkOM69XKzpQ7xTaA/s1600/fancybox_sprite%25402x.png');
        background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
    }

    #fancybox-loading div {
        background-image: url('https://4.bp.blogspot.com/-LH86XZ6LOSE/VvLDfZsH5HI/AAAAAAAAAgo/t3MhJb6mNq4GQFTk2k4RRjgjR1LHBBeXw/s1600/fancybox_loading%25402x.gif');
        background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
    }
}
 /* fancyBox helper button */

#fancybox-buttons {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 8050;
}

#fancybox-buttons.top {
    top: 10px;
}

#fancybox-buttons.bottom {
    bottom: 10px;
}

#fancybox-buttons ul {
    display: block;
    width: 166px;
    height: 30px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border: 1px solid #111;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
       -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    background: rgb(50,50,50);
    background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
    background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
}

#fancybox-buttons ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#fancybox-buttons a {
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-color: transparent;
    background-image: url('https://4.bp.blogspot.com/-qU-5UJI6QGU/VvPAKxDIltI/AAAAAAAAAhw/ZEqAL6b0L2ouAnI8ssoBNZDJ4KoRwze9A/s1600/fancybox_buttons.png');
    background-repeat: no-repeat;
    outline: none;
    opacity: 0.8;
}

#fancybox-buttons a:hover {
    opacity: 1;
}

#fancybox-buttons a.btnPrev {
    background-position: 5px 0;
}

#fancybox-buttons a.btnNext {
    background-position: -33px 0;
    border-right: 1px solid #3e3e3e;
}

#fancybox-buttons a.btnPlay {
    background-position: 0 -30px;
}

#fancybox-buttons a.btnPlayOn {
    background-position: -30px -30px;
}

#fancybox-buttons a.btnToggle {
    background-position: 3px -60px;
    border-left: 1px solid #111;
    border-right: 1px solid #3e3e3e;
    width: 35px
}

#fancybox-buttons a.btnToggleOn {
    background-position: -27px -60px;
}

#fancybox-buttons a.btnClose {
    border-left: 1px solid #111;
    width: 35px;
    background-position: -56px 0px;
}

#fancybox-buttons a.btnDisabled {
    opacity : 0.4;
    cursor: default;
}

 /* fancybox thumbnail helper */

#fancybox-thumbs {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 8050;
}

#fancybox-thumbs.bottom {
    bottom: 2px;
}

#fancybox-thumbs.top {
    top: 2px;
}

#fancybox-thumbs ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

#fancybox-thumbs ul li {
    float: left;
    padding: 1px;
    opacity: 0.5;
}

#fancybox-thumbs ul li.active {
    opacity: 0.75;
    padding: 0;
    border: 1px solid #fff;
}

#fancybox-thumbs ul li:hover {
    opacity: 1;
}

#fancybox-thumbs ul li a {
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid #222;
    background: #111;
    outline: none;
}

#fancybox-thumbs ul li img {
    display: block;
    position: relative;
    border: 0;
    padding: 0;
    max-width: none;
}
/* fancyBox Main */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
    position: relative;
    background: rgba(26, 26, 26, 0.70);
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 0px 25px rgba(132, 132, 132, 0.5);
       -moz-box-shadow: 0 0px 25px rgba(132, 132, 132, 0.5);
            box-shadow: 0 0px 25px rgba(132, 132, 132, 0.5);
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch;
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 15px;
    white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('https://2.bp.blogspot.com/-V755Gx8-aHo/VvLBeoE0lfI/AAAAAAAAAgI/OpsdezqDFgkS2nN1F5vWYbBvfedfEg04A/s1600/fancybox_sprite.png');
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8060;
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url('https://1.bp.blogspot.com/-FBR9kEb_gaI/VvLB3gVvDLI/AAAAAAAAAgU/ha179LldSXYq9ZlC4exnXj77ZY8EPuq2w/s1600/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    background: transparent url('https://2.bp.blogspot.com/-PIoTiFEzeK0/VvLB3HBpVLI/AAAAAAAAAgM/cTIi7zRnHt4ZH3RfyB_Z3aQexOfGAl8ng/s1600/blank.gif'); /* helps IE */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
}

.fancybox-prev {
    left: 0;
}

.fancybox-next {
    right: 0;
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px;
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px;
}

.fancybox-nav:hover span {
    visibility: visible;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url('https://2.bp.blogspot.com/-t6wceVBTl8s/VvLB3S7QVhI/AAAAAAAAAgQ/1I-YNtB_t4kDWjIOwhYl1p9DCzPAiedbQ/s1600/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center;
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}

.fancybox-title-inside-wrap {
    padding-top: 10px;
    Color : #ffffff;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8);
}

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){

    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
        background-image: url('https://2.bp.blogspot.com/-f59tFoWHbqw/VvLB4SmY8gI/AAAAAAAAAgY/PWzmVZLWqTcWWFrQJJkOM69XKzpQ7xTaA/s1600/fancybox_sprite%25402x.png');
        background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
    }

    #fancybox-loading div {
        background-image: url('https://4.bp.blogspot.com/-LH86XZ6LOSE/VvLDfZsH5HI/AAAAAAAAAgo/t3MhJb6mNq4GQFTk2k4RRjgjR1LHBBeXw/s1600/fancybox_loading%25402x.gif');
        background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
    }
}

/* fancyBox helper button */

#fancybox-buttons {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 8050;
}

#fancybox-buttons.top {
    top: 10px;
}

#fancybox-buttons.bottom {
    bottom: 10px;
}

#fancybox-buttons ul {
    display: block;
    width: 166px;
    height: 30px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border: 1px solid #111;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
       -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    background: rgb(50,50,50);
    background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
    background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
}

#fancybox-buttons ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#fancybox-buttons a {
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-color: transparent;
    background-image: url('https://4.bp.blogspot.com/-qU-5UJI6QGU/VvPAKxDIltI/AAAAAAAAAhw/ZEqAL6b0L2ouAnI8ssoBNZDJ4KoRwze9A/s1600/fancybox_buttons.png');
    background-repeat: no-repeat;
    outline: none;
    opacity: 0.8;
}

#fancybox-buttons a:hover {
    opacity: 1;
}

#fancybox-buttons a.btnPrev {
    background-position: 5px 0;
}

#fancybox-buttons a.btnNext {
    background-position: -33px 0;
    border-right: 1px solid #3e3e3e;
}

#fancybox-buttons a.btnPlay {
    background-position: 0 -30px;
}

#fancybox-buttons a.btnPlayOn {
    background-position: -30px -30px;
}

#fancybox-buttons a.btnToggle {
    background-position: 3px -60px;
    border-left: 1px solid #111;
    border-right: 1px solid #3e3e3e;
    width: 35px
}

#fancybox-buttons a.btnToggleOn {
    background-position: -27px -60px;
}

#fancybox-buttons a.btnClose {
    border-left: 1px solid #111;
    width: 35px;
    background-position: -56px 0px;
}

#fancybox-buttons a.btnDisabled {
    opacity : 0.4;
    cursor: default;
}

/* fancybox thumbnail helper */

#fancybox-thumbs {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 8050;
}

#fancybox-thumbs.bottom {
    bottom: 2px;
}

#fancybox-thumbs.top {
    top: 2px;
}

#fancybox-thumbs ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

#fancybox-thumbs ul li {
    float: left;
    padding: 1px;
    opacity: 0.5;
}

#fancybox-thumbs ul li.active {
    opacity: 0.75;
    padding: 0;
    border: 1px solid #fff;
}

#fancybox-thumbs ul li:hover {
    opacity: 1;
}

#fancybox-thumbs ul li a {
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid #222;
    background: #111;
    outline: none;
}

#fancybox-thumbs ul li img {
    display: block;
    position: relative;
    border: 0;
    padding: 0;
    max-width: none;
}



Step 9. Configuration :

Design 1 :

Add Following codes Just Above ]]></b:skin>  To remove following items from Design 1.

Note: If you don't want to remove any item from design 1 please skip this step.

1. To Remove Overlay:  #imagelightbox-overlay { display: none; }
2. To Remove Close Button:  #imagelightbox-close  { display: none; }
3. To Remove Arrows:  .imagelightbox-arrow { display: none !important; }
4. To Remove Navigation:  #imagelightbox-nav { display: none; }
5. To Remove Caption:  #imagelightbox-caption { display: none; }

Design 2 :

Add following codes just above </head> To add following items in Design 2.

Note: Use must need to add anyone of the following :

<script type='text/javascript'>
    $(document).ready(function() {

        $('.post-body a[href]:has(img)').attr('rel', 'gallery').fancybox({

            openEffect: 'fade',
            closeEffect: 'fade',

            prevEffect: 'elastic',
            nextEffect: 'elastic',

            padding: 15,
            arrows: true,
            closeBtn: true,
            helpers: {
                title: {
                    type: 'float',
                },
            },

            beforeShow: function() {
                var alt = this.element.find('img').attr('alt');

                this.inner.find('img').attr('alt', alt);

                this.title = alt;
            },
        });
    });
</script>
<script type='text/javascript'>
    $(document).ready(function() {

        $('.post-body a[href]:has(img)').attr('rel', 'gallery').fancybox({

            openEffect: 'fade',
            closeEffect: 'fade',

            prevEffect: 'elastic',
            nextEffect: 'elastic',

            padding: 15,
            arrows: true,
            closeBtn: false,
            helpers: {
                title: {
                    type: 'inside',
                },
                buttons: {},
            },

            afterLoad: function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            },
        });
    });
</script>
<script type='text/javascript'>
    $(document).ready(function() {

        $('.post-body a[href]:has(img)').attr('rel', 'gallery').fancybox({

            openEffect: 'fade',
            closeEffect: 'fade',

            prevEffect: 'elastic',
            nextEffect: 'elastic',

            padding: 15,
            arrows: false,
            closeBtn: true,
            helpers: {
                title: {
                    type: 'over',
                },
                thumbs: {
                    width: 50,
                    height: 50,
                },
            },

            beforeShow: function() {
                var alt = this.element.find('img').attr('alt');

                this.inner.find('img').attr('alt', alt);

                this.title = alt;
            }
        });
    });
</script>

Design 2 Customization ( Optional ) :

  • Adjust the value of openEffect / closeEffect / prevEffect / nextEffect to ( 'elastic', 'fade' or 'none' ) to change Animation effect.
  • Adjust the value of padding to adjust image border.
  • Adjust the value of arrows / closeBtn to ( true or false ) to ( enable or disable ) respective functions.
  • Adjust the value type to ( 'float', 'inside', 'outside' or 'over' ) to change caption style ( See demo caption for information ).

Step 10. Click Save Template.

Addition Features in Lightbox :

Design 1:

Source: Image Lightbox By osvaldas

  1. Navigation with touch swipe or touch friendly.
  2. Click on image (Left or Right) will navigate to (Previous or Next) Image.
  3. Works with keyboard shortcuts (arrows Left/Right and Esc).
  4. Silently preload the next image.
  5. Support png, jpg, jpeg, gif formats.

Design 2:

Source: fancyBox - jQuery Lightbox

  1. Image Slideshow.
  2. Click on image (Left or Right) will navigate to (Previous or Next) Image.
  3. Toggle image to fullscreen with shortcut key 'f'.
  4. Start / Stop slideshow with shortcut key 'space'.
  5. Works with keyboard shortcuts (arrows Left/Right and Esc).
  6. Different caption styles.

Note : alt attribute value will be considered as caption.

Great! Enjoy Now.

Now click on any image in your blog posts, you will see your own cool design of Lightbox in web as well as mobile version of you blog. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz ! :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,69,Blogging tips,198,Bugs and Errors,34,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,305,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
SEO and SEM Guide For Bloggers: Top jQuery LightBoxes For Blogger (with Demo)
Top jQuery LightBoxes For Blogger (with Demo)
https://2.bp.blogspot.com/-81koyo1qZS4/VuT-fv5dx5I/AAAAAAAAAYw/5uncZI011JAXGFIDTqRutzTmgjpAX6MoA/s1600/Stylish-jQuery-Lightbox-for-blogger.png
https://2.bp.blogspot.com/-81koyo1qZS4/VuT-fv5dx5I/AAAAAAAAAYw/5uncZI011JAXGFIDTqRutzTmgjpAX6MoA/s72-c/Stylish-jQuery-Lightbox-for-blogger.png
SEO and SEM Guide For Bloggers
https://www.experiencelab.info/2016/03/top-jquery-lightboxes-for-blogger-with.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2016/03/top-jquery-lightboxes-for-blogger-with.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy