Step by step tutorial (with demo and images). Add Top Custom Stylish Responsive jQuery Image Lightbox for blogger with additional cool features.

Top jQuery LightBoxes For Blogger (with Demo)

custom stylish responsive jQuery lightbox for blogger

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:

Adding jQuery LightBox To Blogger

Disable Default lightbox

Firstly we will disable blogger default lightbox to prevent any issues or clashes.

  1. Log in to your Blogger account, then go to Settings > Posts.

  2. Find "Image lightbox" and disable it.

  3. Add jQuery Scripts

    Next we will add jquery and lightbox scripts to the blogger theme using CDN. These scripts are commpressed to reduce the page size so your pages can load faster. You can also convert others inline scripts and CSS code in your theme to external file to make your blog load more faster.

  4. Now go to Theme > Edit HTML.

    Edit blogger template to add lightbox in blogger
  5. Click anywhere inside the Theme code, then search for the following code:
    Ctrl+F </head>

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

    <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js'></script>
    <script src='https://cdn.jsdelivr.net/gh/Saurabhjrl/howbloggerz/users/javascript/ImageLightbox.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js'></script>
    <script src='https://cdn.jsdelivr.net/gh/Saurabhjrl/howbloggerz/users/javascript/fancybox.min.js'></script>

    Recommended: If you already have have jquery script in your theme then you can remove the first script.

  7. Add Style sheet

    In next steps we will add CSS code for the lightbox.

  8. Again click anywhere inside the Theme code, then search for the following code
    Ctrl+F ]]></b:skin>

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

    For Example: If you have used Design 1 code in Step 5 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdecE9X2gx4_mBR-KYrMo90yIiF20joczQdkcBsoGidHgkfH6PAqpvD8oSgeZXv6XFQGQgcTZFOYcR-hAtzKyeWB_WtPSSSk9hRTu86wAIql5eHbGtMLsBsKbN_68Ti7NXaI6vpqFGmgrK/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS0ey1H3r_H6J1J84B806IYFTohfSv35vWLf9nh4hhJi_awGfXlFnV-L421K48DuPlpstjvL0fdWtnRAySADq0XmYu9ybC7lJrKhU13eovR43rO502Ts5P8XOVZgSkgSpDrRwunEYuEXsh/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4aSDRGDqXw9tsnrf990cIvAftULf860P42l0yct9mni309HHFn__JFUcoywhji8jVyeHwlmqCYY3zwwPEJ0J0fzDrEP_Wfmjy-wR0Q9CU9LELF_m4oGtiu7GTwnxcTTXmlqMUV4eTtx3/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2rAfwA7DHQhMHx5NtQEpUOv9VstmcVuR3sBLq-SPJp6PVDF3c_Ez34PHpzWep0_gYGEFNpKsgnvoCbh9d0C90jBv0IQGKkHOeVWf9WqmFolkUVIhg0f5uJPVcDBJg7DfSr0MEkx1JrYo/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA0gfJEJYaiWiOT59kCcz5R4nn20eKG6-b19SRKJ-6L2nBnTe7rPasUSkS0PUuzVULRxBu-Ep0sWWVsemtLAOA3CAi5Kqto7pX9mt-DDlXn-m8D9aa085sXe4wH5cOjZqz0ucifPHhm2qt/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMi16sZWPYp4wnv_avAeg2u1KQepr-qlh2xFyn0_n7Kc0eSB9OoSqOXJlgWx8QTtsj4z0Eb7ISoj74aTMuHYwEQMeDL6_r3Lzi7ViL0eMk-LPJS-7n5twkeu6zkEjWM4PROHrrQ6TFvLOx/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1hzvtj4ARCvbawXLxUCc4iO0BWsZxbb25V8yb_UE0VfL9n-w8LufZZZPpxUgqkOtN1LUIjpwwrhACJ8ecunP53Uf8icm0xUARJhSPN6AX3haVm2vC1OFT7GVm0iXiygOzRWKWE7KAyM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdecE9X2gx4_mBR-KYrMo90yIiF20joczQdkcBsoGidHgkfH6PAqpvD8oSgeZXv6XFQGQgcTZFOYcR-hAtzKyeWB_WtPSSSk9hRTu86wAIql5eHbGtMLsBsKbN_68Ti7NXaI6vpqFGmgrK/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS0ey1H3r_H6J1J84B806IYFTohfSv35vWLf9nh4hhJi_awGfXlFnV-L421K48DuPlpstjvL0fdWtnRAySADq0XmYu9ybC7lJrKhU13eovR43rO502Ts5P8XOVZgSkgSpDrRwunEYuEXsh/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4aSDRGDqXw9tsnrf990cIvAftULf860P42l0yct9mni309HHFn__JFUcoywhji8jVyeHwlmqCYY3zwwPEJ0J0fzDrEP_Wfmjy-wR0Q9CU9LELF_m4oGtiu7GTwnxcTTXmlqMUV4eTtx3/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2rAfwA7DHQhMHx5NtQEpUOv9VstmcVuR3sBLq-SPJp6PVDF3c_Ez34PHpzWep0_gYGEFNpKsgnvoCbh9d0C90jBv0IQGKkHOeVWf9WqmFolkUVIhg0f5uJPVcDBJg7DfSr0MEkx1JrYo/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA0gfJEJYaiWiOT59kCcz5R4nn20eKG6-b19SRKJ-6L2nBnTe7rPasUSkS0PUuzVULRxBu-Ep0sWWVsemtLAOA3CAi5Kqto7pX9mt-DDlXn-m8D9aa085sXe4wH5cOjZqz0ucifPHhm2qt/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMi16sZWPYp4wnv_avAeg2u1KQepr-qlh2xFyn0_n7Kc0eSB9OoSqOXJlgWx8QTtsj4z0Eb7ISoj74aTMuHYwEQMeDL6_r3Lzi7ViL0eMk-LPJS-7n5twkeu6zkEjWM4PROHrrQ6TFvLOx/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1hzvtj4ARCvbawXLxUCc4iO0BWsZxbb25V8yb_UE0VfL9n-w8LufZZZPpxUgqkOtN1LUIjpwwrhACJ8ecunP53Uf8icm0xUARJhSPN6AX3haVm2vC1OFT7GVm0iXiygOzRWKWE7KAyM/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;
    }

    Note: This is an inline CSS code but you can convert it into external file for better page optimization.

  10. 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 ).
  11. 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!

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

Love it? Don't forget to Subscribe
  • FESTAS para PALMO e MEIO
    FESTAS para PALMO e MEIO
    21 August 2016 at 21:25
    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
    Saurabh Jarial
    Saurabh Jarial
    2 September 2016 at 21:00
    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.
  • FESTAS para PALMO e MEIO
    FESTAS para PALMO e MEIO
    21 August 2016 at 21:47
    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
    Saurabh Jarial
    Saurabh Jarial
    11 November 2016 at 22:24
    Hi,
    For this please refer to the community of coding experts Stackoverflow
    Good Luck!
  • Juan Gartner
    Juan Gartner
    2 November 2016 at 05:40
    it is not working for me, in fact, no light box runs on my blog do you know what could be causing that?
    Saurabh Jarial
    Saurabh Jarial
    11 November 2016 at 22:18
    Hello Juan

    Sorry for the inconvenience.
    Code has been UPDATED.
    Follow all steps again.
    Juan Gartner
    Juan Gartner
    30 November 2016 at 09:53
    I did everything again, but now I see that not even your demo is working, guess the script could be broken (?)
    Saurabh Jarial
    Saurabh Jarial
    6 December 2016 at 17:30
    Try Again
  • Unknown
    Unknown
    7 February 2017 at 20:17
    i had follow you instruction but always failed. http://faridznurakbar.blogspot.co.id
    Saurabh Jarial
    Saurabh Jarial
    9 February 2017 at 20:10
    Hi Akbar
    Please Save the changes so I can have a look at your problem.
  • JaiperStudio
    JaiperStudio
    6 May 2017 at 01:58
    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.
    Saurabh Jarial
    Saurabh Jarial
    10 May 2017 at 07:39
    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.
  • Someone somewhere
    Someone somewhere
    9 September 2017 at 17:39
    Thanks bro
    Saurabh Jarial
    Saurabh Jarial
    11 September 2017 at 23:04
    My pleasure :)
  • ANhIMA
    ANhIMA
    28 September 2017 at 14:26
    not works for me :(
    Saurabh Jarial
    Saurabh Jarial
    30 September 2017 at 12:32
    Apply the changes and let me know via Contact page
  • Unknown
    Unknown
    9 December 2017 at 19:30
    Hi"
    I followed your instructions but nothing, it doesn't work in my blog.
    How can I solve the problem?
    Saurabh Jarial
    Saurabh Jarial
    11 December 2017 at 22:25
    Contact me via contact box and mention your blog address in it.

    Note: Don't revert back the changes made so I can have a look at your problem.
  • Laura Souza
    Laura Souza
    12 December 2017 at 03:15
    worked perfect :3
  • Diskuid
    Diskuid
    11 December 2018 at 20:25
    It works, thanks!
  • Trader
    Trader
    8 January 2019 at 22:47
    How would I get lightbox to recognize photos imported via RSS. I got a script which places the most recent posts images at the top of the page but cannot get lightbox to recognize them. https://500images.blogspot.com/
    Saurabh Jarial
    Saurabh Jarial
    4 May 2019 at 12:35
    This will not work because those images link to blog posts not with the image itself.
  • Saku Kyuroku
    Saku Kyuroku
    26 February 2019 at 10:54
    Nicely works here! Thanks for the awesome work!
    Saurabh Jarial
    Saurabh Jarial
    4 May 2019 at 12:12
    My pleasure!
  • sam
    sam
    7 July 2019 at 14:08
    that`s cool, thanks for sharing
  • Francesco Cassini
    Francesco Cassini
    13 July 2019 at 22:11
    Hi, you lightbox is simply astonishing! I've seen a lot of and your is the best for my needs. Anyway I would load simply html page inside the frame and not only images or videos. Do you think it's possible make this?
    Thank you in advance and again compliments!!
    Francesco
    Saurabh Jarial
    Saurabh Jarial
    25 July 2019 at 19:49
    That Something we call Modals. You can find many over the internet.
  • 귀말
    귀말
    5 September 2020 at 06:58
    I have one question. I used fancybox and can I change background opacity? or change background image? I want to make it little darker. and I really like this lightbox. thanks ^^
    Saurabh Jarial
    Saurabh Jarial
    16 September 2020 at 20:19
    .fancybox-overlay {
    opacity: 1;
    background: #000;
    }

    Add the above code just below the step 8 code and adjust the opacity value between 0.1 - 1

    Don't forget to subscribe
    Thanks
  • casb
    casb
    28 October 2020 at 22:03
    HI there!, works like a boss.

    Is there a simple way to make this default on mobile and bloggers lightbox on desktop?

    I like bloggers because images appear almost instantaneous and really slide in, without the blank in the middle, here I have to wait for the fade in/slide left and the fade out/slide right. I have set the delays to 0 and loading display none, no luck. Let me know if you want the url.

    Thanks!!
    Saurabh Jarial
    Saurabh Jarial
    27 November 2020 at 20:56
    Hi!
    Can you share the link and other details via contact us form?
    Thanks.
  • Georgia Kennedy
    Georgia Kennedy
    11 November 2020 at 08:21
    Hello, I'm using Design 1 on a customized Simple theme on Blogger. Here is my blog: daregirls.us

    The lightbox works beautifully on the desktop; however, on mobile, the lightbox shows up when an image is clicked, but the images are not showing. Can you help?
    Saurabh Jarial
    Saurabh Jarial
    3 December 2020 at 19:17
    I visited your blog and Everything is working fine!
  • M.Luqman Khan
    M.Luqman Khan
    10 January 2021 at 16:06
    Sir, how can I add a link to the big image that opens in the lightbox after once clicking the thumbnail?
    Saurabh Jarial
    Saurabh Jarial
    10 January 2021 at 18:56
  • Łukasz Spychała
    Łukasz Spychała
    15 December 2021 at 00:33
    Hello, can you update your lightbox to https://blogger.googleusercontent.com domain of photos?
    Now it doesn't work :(
  • Łukasz Spychała
    Łukasz Spychała
    15 December 2021 at 01:39
    And only using arrows, photos skip in lightbox gallery. Using keyboard or click left/right side the photo is okey, problem caused by arrows only. Thanks!