Top Jquery Lightboxes For Blogger (With Demo)
Blogger lightbox come upwardly into play whenever you lot click on whatever paradigm inwards your blogspot post, it pop-up on whole enshroud similar paradigm preview box as well as shows all images similar photo gallery widget. The default blogger photograph low-cal box is non fashionable as well as responsive to mobile version but even thus you lot tin terminate customize blogger lightbox amongst CSS.
There are thus many blogger lightbox option but, i came upwardly amongst top jQuery lightboxes. These custom lightboxes provides basic cardinal benefits amongst additional features similar auto slideshow, responsive to desktop tablets as well as mobiles, slow to customize etc. If you lot desire to supersede your uncomplicated blogger paradigm lightbox viewer amongst a cool custom fashionable responsive jQuery lightbox plugin to present off your pictures gallery inwards a fashionable trend as well as thus merely follow the below given measuring yesteryear measuring tutorial amongst images as well as demo:
Step 1. Log inwards to your Blogger account, as well as thus become to Dashboard > Settings > Posts as well as comments.
Step 2. Find "Showcase images amongst Lightbox" as well as Select "No", Save settings.
Step 3. Then Navigate to Template > Click on setting icon nether Mobile > Set Custom, as well as thus Save.
Step 4. Again become to Template > Edit HTML.
Step 5. Click anywhere within the Template code, as well as thus search for the next code ( CTRL+F )
Step 6. Add this code merely inwards a higher house it (any 1 pattern of your choice).
Step 7. Again click anywhere within the Template code, as well as thus search for the next code ( CTRL+F )
Step 8. Add this code merely inwards a higher house it (any one). Please select respective code inwards accordance to Step 6.
For Example: If you lot convey used Design 1 code inwards Step six as well as thus select either Design 1 (White Background) or Design 1 (Dark Background).
Step 9. Configuration :
Note: If you lot don't desire to take whatever exceptional from pattern 1 delight 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; }
Note: Use must request to add together anyone of the next :
Design two Customization ( Optional ) :
Step 10. Click Save Template.
Note : alt attribute value volition live considered every bit caption.
There are thus many blogger lightbox option but, i came upwardly amongst top jQuery lightboxes. These custom lightboxes provides basic cardinal benefits amongst additional features similar auto slideshow, responsive to desktop tablets as well as mobiles, slow to customize etc. If you lot desire to supersede your uncomplicated blogger paradigm lightbox viewer amongst a cool custom fashionable responsive jQuery lightbox plugin to present off your pictures gallery inwards a fashionable trend as well as thus merely follow the below given measuring yesteryear measuring tutorial amongst images as well as demo:
Dark Background
White Background
Adding jQuery LightBox To Blogger
Step 1. Log inwards to your Blogger account, as well as thus become to Dashboard > Settings > Posts as well as comments.
Step 2. Find "Showcase images amongst Lightbox" as well as Select "No", Save settings.
Step 3. Then Navigate to Template > Click on setting icon nether Mobile > Set Custom, as well as thus Save.
Step 4. Again become to Template > Edit HTML.
Step 5. Click anywhere within the Template code, as well as thus search for the next code ( CTRL+F )
</head>
Step 6. Add this code merely inwards a higher house it (any 1 pattern 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 within the Template code, as well as thus search for the next code ( CTRL+F )
]]></b:skin>
Step 8. Add this code merely inwards a higher house it (any one). Please select respective code inwards accordance to Step 6.
For Example: If you lot convey used Design 1 code inwards Step six as well as thus select either Design 1 (White Background) or Design 1 (Dark Background).
html
{
/* killing 300ms touching on delay inwards 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 repose infinite;
animation: imagelightbox-loading .5s repose 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 venture #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 venture 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 solely enshroud as well as (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 solely enshroud as well as (max-width: 20em)
{
.imagelightbox-arrow-left
{
left: 0;
}
.imagelightbox-arrow-right
{
right: 0;
}
}
html
{
/* killing 300ms touching on delay inwards 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 repose infinite;
animation: imagelightbox-loading .5s repose 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 venture #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 venture 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 solely enshroud as well as (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 solely enshroud as well as (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 bridge {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikme3QDmbAjEUcwKIfpmEwB2TklgILg7jz09RqzJIBWRvJrlZh0aeVOIstk8eng4zyKGrA123kFwKosuBpe9kIZ7FwH71sg0Q5r8syR_plFPKmMiJiTGyHN2V2bZz576a72UeEpw5WqoXF/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/AVvXsEiYOzfzgYFr7hZNv9FSbM3mu4Olu9Ixu6iMRIsVsmLmb2PCw_9F9DKROnGRCbXYsKWZHMPU-XWRYY1_fhbjZ9d36cD2MAO7QScP-nkkeQHh4xQLie51hWzPCpuNXlaGp-vXO3mw3UibU4Qu/s1600/fancybox_loading.gif') oculus midpoint 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/AVvXsEgpnUMAjaITQGiMOzooSNcqfB1J1IoLRRfx2f_Coo4k2ormUys9ARkePQ5DG9FWmMSF8BXmquouLaNUavR0ID6i8z67dytl4Blr2vR2w6uZpcWsBOGAdVqxMxF4gB0WeGDqrClThXgakW9Y/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 bridge {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev bridge {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next bridge {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover bridge {
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 trunk {
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/AVvXsEhC8P1tavj4mMr820HJlMOPew3wB5tzIjyikzGTtmg8r2ra-QeToV6ebxzb4g68sNltK8d7b9UQXWkvnsgv83yl2P1l1jrjivZ7-KTWfi3wWJh4YyER46MHMNdHF8kYxe8Mt7mYtahoLXjh/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 spider web browsers that doesn't back upwardly 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 solely enshroud as well as (-webkit-min-device-pixel-ratio: 1.5),
solely enshroud as well as (min--moz-device-pixel-ratio: 1.5),
solely enshroud as well as (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next bridge {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivYI6mbQMmu8Wd_ECWThKIBH3l1rAgLcJdduMillOjeWO8PPUW4FjuLkmkQWsHg-XkL3h-lGpQiIhCkFw9PvUIdtSceBt67DNILc97NtyUW5_CPi32UBxTxC8gSc_d_e1TmGrRWxgcnUh-/s1600/fancybox_sprite%25402x.png');
background-size: 44px 152px; /*The size of the normal image, one-half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifBFt_tmBML8Mmigc5-3zQfYeHR2eZbnW5wPmE7Y2r0O3p6QaGhyHa5d28GRnBUc6FFbtNBBjs0a4WcXS_VOHoynZHei_HF0kv7a7fZTCH6nkzPZYZrWRoOyocrgeehDUD4KfbXxo933u4/s1600/fancybox_loading%25402x.gif');
background-size: 24px 24px; /*The size of the normal image, one-half the size of the hi-res image*/
}
}
/* fancyBox helper push */
#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 venture #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/AVvXsEh-hDIJwOANLtmSigrPbFXJ4TGe-a-euv-3YGm_A07kNdWR3Z_bECdWxELGh4rxrmfugfvZ6e8J1ywzOLg8b2UuMPje5Vtqmog5T3OaNjZ9EPLnkM-tqVa2DgQa0Ei_8sIUpfuvPkZ1qq0/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 venture #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 venture #111;
border-right: 1px venture #3e3e3e;
width: 35px
}
#fancybox-buttons a.btnToggleOn {
background-position: -27px -60px;
}
#fancybox-buttons a.btnClose {
border-left: 1px venture #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 venture #fff;
}
#fancybox-thumbs ul li:hover {
opacity: 1;
}
#fancybox-thumbs ul li a {
display: block;
position: relative;
overflow: hidden;
border: 1px venture #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 bridge {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikme3QDmbAjEUcwKIfpmEwB2TklgILg7jz09RqzJIBWRvJrlZh0aeVOIstk8eng4zyKGrA123kFwKosuBpe9kIZ7FwH71sg0Q5r8syR_plFPKmMiJiTGyHN2V2bZz576a72UeEpw5WqoXF/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/AVvXsEiYOzfzgYFr7hZNv9FSbM3mu4Olu9Ixu6iMRIsVsmLmb2PCw_9F9DKROnGRCbXYsKWZHMPU-XWRYY1_fhbjZ9d36cD2MAO7QScP-nkkeQHh4xQLie51hWzPCpuNXlaGp-vXO3mw3UibU4Qu/s1600/fancybox_loading.gif') oculus midpoint 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/AVvXsEgpnUMAjaITQGiMOzooSNcqfB1J1IoLRRfx2f_Coo4k2ormUys9ARkePQ5DG9FWmMSF8BXmquouLaNUavR0ID6i8z67dytl4Blr2vR2w6uZpcWsBOGAdVqxMxF4gB0WeGDqrClThXgakW9Y/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 bridge {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev bridge {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next bridge {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover bridge {
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 trunk {
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/AVvXsEhC8P1tavj4mMr820HJlMOPew3wB5tzIjyikzGTtmg8r2ra-QeToV6ebxzb4g68sNltK8d7b9UQXWkvnsgv83yl2P1l1jrjivZ7-KTWfi3wWJh4YyER46MHMNdHF8kYxe8Mt7mYtahoLXjh/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 spider web browsers that doesn't back upwardly 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 solely enshroud as well as (-webkit-min-device-pixel-ratio: 1.5),
solely enshroud as well as (min--moz-device-pixel-ratio: 1.5),
solely enshroud as well as (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next bridge {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivYI6mbQMmu8Wd_ECWThKIBH3l1rAgLcJdduMillOjeWO8PPUW4FjuLkmkQWsHg-XkL3h-lGpQiIhCkFw9PvUIdtSceBt67DNILc97NtyUW5_CPi32UBxTxC8gSc_d_e1TmGrRWxgcnUh-/s1600/fancybox_sprite%25402x.png');
background-size: 44px 152px; /*The size of the normal image, one-half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifBFt_tmBML8Mmigc5-3zQfYeHR2eZbnW5wPmE7Y2r0O3p6QaGhyHa5d28GRnBUc6FFbtNBBjs0a4WcXS_VOHoynZHei_HF0kv7a7fZTCH6nkzPZYZrWRoOyocrgeehDUD4KfbXxo933u4/s1600/fancybox_loading%25402x.gif');
background-size: 24px 24px; /*The size of the normal image, one-half the size of the hi-res image*/
}
}
/* fancyBox helper push */
#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 venture #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/AVvXsEh-hDIJwOANLtmSigrPbFXJ4TGe-a-euv-3YGm_A07kNdWR3Z_bECdWxELGh4rxrmfugfvZ6e8J1ywzOLg8b2UuMPje5Vtqmog5T3OaNjZ9EPLnkM-tqVa2DgQa0Ei_8sIUpfuvPkZ1qq0/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 venture #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 venture #111;
border-right: 1px venture #3e3e3e;
width: 35px
}
#fancybox-buttons a.btnToggleOn {
background-position: -27px -60px;
}
#fancybox-buttons a.btnClose {
border-left: 1px venture #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 venture #fff;
}
#fancybox-thumbs ul li:hover {
opacity: 1;
}
#fancybox-thumbs ul li a {
display: block;
position: relative;
overflow: hidden;
border: 1px venture #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 take next items from Design 1.Note: If you lot don't desire to take whatever exceptional from pattern 1 delight 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 two :
Add next codes merely inwards a higher house </head> To add together next items inwards Design 2.Note: Use must request to add together anyone of the next :
<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 two Customization ( Optional ) :
- Adjust the value of openEffect / closeEffect / prevEffect / nextEffect to ( 'elastic', 'fade' or 'none' ) to alter Animation effect.
- Adjust the value of padding to accommodate paradigm 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 alter caption trend ( See demo caption for data ).
Step 10. Click Save Template.
Addition Features inwards Lightbox :
Design 1:
Source: Image Lightbox By osvaldas- Navigation amongst touching on swipe or touching on friendly.
- Click on paradigm (Left or Right) volition navigate to (Previous or Next) Image.
- Works amongst keyboard shortcuts (arrows Left/Right as well as Esc).
- Silently preload the adjacent image.
- Support png, jpg, jpeg, gif formats.
Design 2:
Source: fancyBox - jQuery Lightbox- Image Slideshow.
- Click on paradigm (Left or Right) volition navigate to (Previous or Next) Image.
- Toggle paradigm to fullscreen amongst shortcut cardinal 'f'.
- Start / Stop slideshow amongst shortcut cardinal 'space'.
- Works amongst keyboard shortcuts (arrows Left/Right as well as Esc).
- Different caption styles.
Note : alt attribute value volition live considered every bit caption.