SEO Tips and all things Blogging

jQuery Custom Image Lightbox

j

  This time I shared about how to install a custom image in the lightbox blog.Surely at least you already know the workings of  lightbox image.Image lightbox or image viewer is a feature blogger who serves enlarge any image on the blog post when we click on the size / resolution of the actual.
 Well here I will try to share the lightbox with a different look than the default lightbox blogger, you just need to add the jQuery and CSS code.
  

You need turn off the function of innate lightbox blogger. 
Go to Blog> Settings> Posts and Comments> View images with Lightbox and select “no”.
  

Here I will give you two color choices are black and white. Ok, just the way it is applied.

1. Open blog> Click the Template> Edit HTML> Paste one of the following CSS code just above]]> </ b: skin> or </ style>

 CSS lightbox with a white background.

/* CSS Image Lightbox White */
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0;}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#fff;width: 250px;height:250px;margin:0 auto;}
#lightbox-container-image{padding:10px;box-shadow: 0px -10px 34px 0px rgba(0,0,0,0.15);}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}
#lightbox-container-image-box &gt; #lightbox-nav{left:0;}
#lightbox-nav a{outline:none;}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;display:block;}
#lightbox-nav-btnPrev{left:10%;float:left;}
#lightbox-nav-btnNext{right:10%;float:right;}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width:100%;padding:0 10px 0;box-shadow: 0px 25px 34px -18px rgba(0,0,0,0.15);}
#lightbox-container-image-data{padding:0 10px;color:#8f8f8f;}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;}
#lightbox-image-details-caption{font-weight:bold;}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}

CSS lightbox with a black background

/* CSS Image Lightbox Black */
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#222;width:250px;height:250px;margin:0 auto;}
#lightbox-container-image{padding:10px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box &gt; #lightbox-nav{left:0;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;display:block}
#lightbox-nav-btnPrev{left:10%;float:left}
#lightbox-nav-btnNext{right:10%;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#222;margin:0 auto;line-height:1.4em;overflow:auto;max-width:100%;padding:0 10px 0;}
#lightbox-container-image-data{padding:0 10px;color:#acacac}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}

2. Choose one and add the following jQuery code just above the </ body>

jQuery lightbox with white background:

 <script src=’https://googledrive.com/host/0BxgcAWWTg9yaeHJQenpQdUhNWjA‘ type=’text/javascript’/>

jQuery lightbox with a black background

<script src=’https://googledrive.com/host/0BxgcAWWTg9yaN1FreEpGcjdpWUU’ type=’text/javascript’/>

3. Save the template and see the results. For a demo, please see here:FunPicture  .A few of I, may be useful.

3 comments

By domdom rung
SEO Tips and all things Blogging

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories

Recent Posts

Recent Comments

Archives