
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.
Log in to your Blogger account, then go to Settings > Posts.
Find "Image lightbox" and disable it.
Now go to Theme > Edit HTML.
Click anywhere inside the Theme code, then search for the following code:
Ctrl+F</head>
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.
Again click anywhere inside the Theme code, then search for the following code
Ctrl+F]]></b:skin>
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://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; }
Note: This is an inline CSS code but you can convert it into external file for better page optimization.
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 ).
Click Save Template.
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.
Add Style sheet
In next steps we will add CSS code for the lightbox.
Addition Features in Lightbox :
Design 1:
Source: Image Lightbox By osvaldas
- Navigation with touch swipe or touch friendly.
- Click on image (Left or Right) will navigate to (Previous or Next) Image.
- Works with keyboard shortcuts (arrows Left/Right and Esc).
- Silently preload the next image.
- Support png, jpg, jpeg, gif formats.
Design 2:
Source: fancyBox - jQuery Lightbox
- Image Slideshow.
- Click on image (Left or Right) will navigate to (Previous or Next) Image.
- Toggle image to fullscreen with shortcut key 'f'.
- Start / Stop slideshow with shortcut key 'space'.
- Works with keyboard shortcuts (arrows Left/Right and Esc).
- 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 ! :)
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
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.
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
For this please refer to the community of coding experts Stackoverflow
Good Luck!
Sorry for the inconvenience.
Code has been UPDATED.
Follow all steps again.
Please Save the changes so I can have a look at your problem.
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.
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.
I followed your instructions but nothing, it doesn't work in my blog.
How can I solve the problem?
Note: Don't revert back the changes made so I can have a look at your problem.
Thank you in advance and again compliments!!
Francesco
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
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!!
Can you share the link and other details via contact us form?
Thanks.
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?
Now it doesn't work :(