Top jQuery LightBoxes For Blogger (with Demo)

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

14 comments:

  1. Hello Saurabh.

    1st all, thanks for sharing this jquery lightbox. It's pretty nice.

    which are the css and html codes to add a title without hyperlink in caption?
    which are the css and html codes to add a title with hyperlink in caption?

    will be great(ful) to know it.

    Best regards,

    Ruben

    ReplyDelete
    Replies
    1. Hi Ruben

      Step 6 code is the required javaScript for lightbox (hosted on google drive) and Step 8 code is CSS for lightbox.

      Note: No HTML is their for lightbox, JavaScripts are used to interact with your webpage HTML code.

      Suggestions: For any type of further modification in lightbox take help from community of experts (Stackoverflow).

      For any further help comment or Contact me.

      Delete
  2. Hello again.

    It is possible to open on lightbox an image with hotspot(imagemap)?

    If yes, how to do it in terms of css and/or html codes?

    Best regards,

    Ruben

    ReplyDelete
    Replies
    1. Hi,
      For this please refer to the community of coding experts Stackoverflow
      Good Luck!

      Delete
  3. it is not working for me, in fact, no light box runs on my blog do you know what could be causing that?

    ReplyDelete
    Replies
    1. Hello Juan

      Sorry for the inconvenience.
      Code has been UPDATED.
      Follow all steps again.

      Delete
    2. I did everything again, but now I see that not even your demo is working, guess the script could be broken (?)

      Delete
  4. i had follow you instruction but always failed. http://faridznurakbar.blogspot.co.id

    ReplyDelete
    Replies
    1. Hi Akbar
      Please Save the changes so I can have a look at your problem.

      Delete
  5. Hi.
    I am using the fancy box and want to add caption and title to the pictures but somehow it does not get displayed. I am using blogger and added captions to the pictures but not displaying. What code do I need to do so?
    This is my link: http://jaiperweb.blogspot.com/
    Thank you.

    ReplyDelete
    Replies
    1. Hi Almighty

      I visited your blog and found that you have not added the provided code in your blog. Please follow all the steps and then let me know via contact form.

      Delete

Every comment is appreciated but keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!

Request Post