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 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:

Dark Background

DEMO

White Background

DEMO

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.

Step 4. Again go to Template > Edit HTML.

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).

• Design 1 ( ImageLightbox )

• Design 2 ( Fancybox )

<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).

• Design 1 (White Background)

• 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;
            }
        }

• Design 2 (White Background)

• Design 2 (Dark Background)

/* 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 :

• Simple Image Gallery
• With Button Helper
• With Thumbnail Helper

<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 ! :)