Blogger lightbox come upwards into play whenever y'all click on whatever paradigm inward your blogspot post, it pop-up on whole enshroud similar paradigm preview box together with shows all images similar photo gallery widget. The default blogger photograph lite box is non fashionable together with responsive to mobile version but yet y'all tin sack customize blogger lightbox alongside CSS.
There are thus many blogger lightbox choice but, i came upwards alongside top jQuery lightboxes. These custom lightboxes provides basic cardinal benefits alongside additional features similar auto slideshow, responsive to desktop tablets together with mobiles, slowly to customize etc. If y'all desire to supersede your uncomplicated blogger paradigm lightbox viewer alongside a cool custom fashionable responsive jQuery lightbox plugin to present off your pictures gallery inward a fashionable trend thus merely follow the below given mensuration past times mensuration tutorial alongside images together with demo:
Dark Background
White Background
Adding jQuery LightBox To Blogger
Step 1. Log inward to your Blogger account, thus larn to Dashboard > Settings > Posts together with comments.
Step 2. Find "Showcase images alongside Lightbox" together with Select "No", Save settings.
Step 3. Then Navigate to Template > Click on setting icon nether Mobile > Set Custom, thus Save.
Step 4. Again larn to Template > Edit HTML.
Step 5. Click anywhere within the Template code, thus search for the next code ( CTRL+F )
</head>
Step 6. Add this code merely to a higher house it (any i 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, thus search for the next code ( CTRL+F )
]]></b:skin>
Step 8. Add this code merely to a higher house it (any one). Please select respective code inward accordance to Step 6.
For Example: If y'all convey used Design 1 code inward Step vi thus select either Design 1 (White Background) or Design 1 (Dark Background).
html
{
/* killing 300ms impact delay inward 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 remain infinite;
animation: imagelightbox-loading .5s remain 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 corporation #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 corporation 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 alone enshroud together with (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 alone enshroud together with (max-width: 20em)
{
.imagelightbox-arrow-left
{
left: 0;
}
.imagelightbox-arrow-right
{
right: 0;
}
}
html
{
/* killing 300ms impact delay inward 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 remain infinite;
animation: imagelightbox-loading .5s remain 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 corporation #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 corporation 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 alone enshroud together with (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 alone enshroud together with (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/AVvXsEi0bXtFSQt5dP0DT9K2ZFF6rinL3Ak7DFIgBONoreQvBBckyYqvc9qIRorHOL3QM6yptWo52gLM5FeCpYth3uUQainOA_dGbGqpWJ7LuLMKabX43-Dpwg1522YEg6k6OSHzOYGRIBY0PgNu/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/AVvXsEiLYj5QKRwAq025vJMsgQLP10zG8RnO7ywYKnUrN-QJAVvy4UeU283oMWDvfkAnw9ybsCc4wc5wodgyUWogoVHpLCbyXcrbF1AeUsXcZoP87fUGwR2t9oR9ciZVH4e0wDrbES68txP9C8s0/s1600/fancybox_loading.gif') centre centre 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/AVvXsEg88CTvvaT-6tXn6e-XvG6N9Fihwgy0fAL_utAx1oLIUNHT70af7KN3gggY7LWnrEFggmpS6TOKEMItlwNNjbjCiuYLu4g1Dd2uqSsQz6SUop4wbXOBjozQSl35bdfOwyndE5RUmIw-Ye45/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 torso {
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/AVvXsEgXfB5kLs6SHt5SGiXisQU6Y15pRC8LTvzzh6FTgmWuE1XltIbQfTaZdavWUQN4Z17JYD7munCguDohlopIWV8CxuupUlFq3KiIItMAwvzCgfgLnzawxUDgww851tJQE5r_dGC7HuQjPCtW/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 upwards 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 alone enshroud together with (-webkit-min-device-pixel-ratio: 1.5),
alone enshroud together with (min--moz-device-pixel-ratio: 1.5),
alone enshroud together with (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/AVvXsEgtYaTWtO6ICxtF41nbnmS3A_JJ6P85aAJTCDD22SviAi_j2pavX5z1mbhrz795CQ6uH4NcmCIiamH8Io7bBWB1m-HY2ORlZCUjU4Dy8Jyx0SuOqyps28A4AL8a0lrAeX_uEoFg_K63UgSh/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/AVvXsEi5xbPhMlGVNS5_LT8PMNPZJMD8r8ek67_qSO9yM74W32tTqXNiyABBWNoO9MnRyk8cnS6Ou4-vpDFmKcNgKS4XuSsBJJhRjB_79anxttDn9sjyZBJjyXdMbZCnUuFT0AvYkWJIDQsCUEp-/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 clit */
#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 corporation #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/AVvXsEjFWC32lkY5XxxPtDYSyUeztkpu6BZpqv_uWWPOoINZml5uMSg3E_QpxRhI5VjJKo8Mpc_X9jaPyQHQj9HAhO5TZunz7Pgx9tlcrFqmeq9Cd9Bdq9l032cwdLpRjWVyLbW1xn0vj2PHhf4/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 corporation #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 corporation #111;
border-right: 1px corporation #3e3e3e;
width: 35px
}
#fancybox-buttons a.btnToggleOn {
background-position: -27px -60px;
}
#fancybox-buttons a.btnClose {
border-left: 1px corporation #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 corporation #fff;
}
#fancybox-thumbs ul li:hover {
opacity: 1;
}
#fancybox-thumbs ul li a {
display: block;
position: relative;
overflow: hidden;
border: 1px corporation #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/AVvXsEi0bXtFSQt5dP0DT9K2ZFF6rinL3Ak7DFIgBONoreQvBBckyYqvc9qIRorHOL3QM6yptWo52gLM5FeCpYth3uUQainOA_dGbGqpWJ7LuLMKabX43-Dpwg1522YEg6k6OSHzOYGRIBY0PgNu/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/AVvXsEiLYj5QKRwAq025vJMsgQLP10zG8RnO7ywYKnUrN-QJAVvy4UeU283oMWDvfkAnw9ybsCc4wc5wodgyUWogoVHpLCbyXcrbF1AeUsXcZoP87fUGwR2t9oR9ciZVH4e0wDrbES68txP9C8s0/s1600/fancybox_loading.gif') centre centre 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/AVvXsEg88CTvvaT-6tXn6e-XvG6N9Fihwgy0fAL_utAx1oLIUNHT70af7KN3gggY7LWnrEFggmpS6TOKEMItlwNNjbjCiuYLu4g1Dd2uqSsQz6SUop4wbXOBjozQSl35bdfOwyndE5RUmIw-Ye45/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 torso {
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/AVvXsEgXfB5kLs6SHt5SGiXisQU6Y15pRC8LTvzzh6FTgmWuE1XltIbQfTaZdavWUQN4Z17JYD7munCguDohlopIWV8CxuupUlFq3KiIItMAwvzCgfgLnzawxUDgww851tJQE5r_dGC7HuQjPCtW/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 upwards 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 alone enshroud together with (-webkit-min-device-pixel-ratio: 1.5),
alone enshroud together with (min--moz-device-pixel-ratio: 1.5),
alone enshroud together with (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/AVvXsEgtYaTWtO6ICxtF41nbnmS3A_JJ6P85aAJTCDD22SviAi_j2pavX5z1mbhrz795CQ6uH4NcmCIiamH8Io7bBWB1m-HY2ORlZCUjU4Dy8Jyx0SuOqyps28A4AL8a0lrAeX_uEoFg_K63UgSh/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/AVvXsEi5xbPhMlGVNS5_LT8PMNPZJMD8r8ek67_qSO9yM74W32tTqXNiyABBWNoO9MnRyk8cnS6Ou4-vpDFmKcNgKS4XuSsBJJhRjB_79anxttDn9sjyZBJjyXdMbZCnUuFT0AvYkWJIDQsCUEp-/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 clit */
#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 corporation #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/AVvXsEjFWC32lkY5XxxPtDYSyUeztkpu6BZpqv_uWWPOoINZml5uMSg3E_QpxRhI5VjJKo8Mpc_X9jaPyQHQj9HAhO5TZunz7Pgx9tlcrFqmeq9Cd9Bdq9l032cwdLpRjWVyLbW1xn0vj2PHhf4/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 corporation #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 corporation #111;
border-right: 1px corporation #3e3e3e;
width: 35px
}
#fancybox-buttons a.btnToggleOn {
background-position: -27px -60px;
}
#fancybox-buttons a.btnClose {
border-left: 1px corporation #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 corporation #fff;
}
#fancybox-thumbs ul li:hover {
opacity: 1;
}
#fancybox-thumbs ul li a {
display: block;
position: relative;
overflow: hidden;
border: 1px corporation #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 y'all don't desire to take whatever special 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 to a higher house </head> To add together next items inward Design 2.Note: Use must postulate 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 modify 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 modify caption trend ( See demo caption for data ).
Step 10. Click Save Template.
Addition Features inward Lightbox :
Design 1:
Source: Image Lightbox By osvaldas- Navigation alongside impact swipe or impact friendly.
- Click on paradigm (Left or Right) volition navigate to (Previous or Next) Image.
- Works alongside keyboard shortcuts (arrows Left/Right together with Esc).
- Silently preload the side past times side 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 alongside shortcut cardinal 'f'.
- Start / Stop slideshow alongside shortcut cardinal 'space'.
- Works alongside keyboard shortcuts (arrows Left/Right together with Esc).
- Different caption styles.
Note : alt attribute value volition live considered every bit caption.
0 comments
Post a Comment