Welcome to My Blog. If you are a New Visitor Please Subscribe For Latest Updates!

jQuery Image Gallery Box

Author: Unknown , Be the first to comment!
Rate this Post:
{[['']]}


I am here with a beautiful jQuery Lightbox Widget for Image Gallery, i am sure this widget is available in only professional websites and you are looking for it.
This widget is easy to Install in Blogger.


Follow These Steps;

  1. Login to Blogger
  2. Goto Template
  3. Click on edit HTML
  4. Expand Widget
  5. Find </head> and Paste the following Code above it.



<style>
#container{
width:600px;
margin:20px auto;
}

div.nomargin{
margin-right:0px;
}
.pic{
float:left;
margin:0 15px 15px 0;
border:5px solid gold;
width:260px;
height:200px;
}
.pic a{
width:260px;
height:200px;
text-indent:-99999px;
display:block;
}

/**
* jQuery lightBox plugin
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
* and adapted to me for use like a plugin from jQuery.
* @name jquery-lightbox-0.5.css
* @author Leandro Vieira Pinho - http://leandrovieira.com
* @version 0.5
* @date April 11, 2008
* @category jQuery plugin
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
* @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
*/
#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 img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
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%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
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;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#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;
}
.reflex
{
position: relative;
margin:0 auto;
text-align:left;
color:#000;
letter-spacing:2px;
font:50px Mistral,sans serif;
text-shadow:0 0 30px rgba(168,203,12, 0.4),
1px 1px 0px #D0FF00,
-1px -1px 0px #D0FF00;
}
</style>
Now look for </body> and paste the following code above/before it;

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script src='http://yourjavascript.com/50311220128/jquery.lightbox-0.5.pack.txt.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.pic a').lightBox({
imageLoading: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJz-5JoovsALMaJPSagQVSdj9NtNj7k6hnRssUgBD4YwdTgEEPbQcch8shc4hxTZZnFqykmtEIljv3ByVxt5cRM9et9gBbmSPYSQa_pz64qLbXulqzpO0c9lS-x5hxJKOzGuXj8FtaeY3/s1600/loading.gif',
imageBtnClose: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBSaMFBzv8rRtQtWWZ1jhATAN-jwPVMsLe6a30bMRxH552jS0-m6gdbQ10hJBDqK8zxZQIA_cCUucypgT58AGc7zfW0B74v7gWCW6Pp2DvsWgMeMaZ9T5Kev3-HdDoFZkArCEiEasLwpyW/s1600/close.gif',
imageBtnPrev: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU0QkKmkXp5pe_Zuf_SlNRuRCoS4Y9QWl1AVlYjtm_gfBNmFT6WVDQyaFoAHv-YL0DWnD0IQd5VOCIDQw83P2IWuCIotNSF6E9buCSw8WV5e0JP8Y5mBYentmr5ZaoHU6jZttTyGwxjwGZ/s1600/prev.gif',
imageBtnNext: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioCsgB1hyofs2FCe3u_0aOUEqN55jwypIDKrodvPSZMNgfr5GaDhtefW_nsxVMXkjuUCCbG_eqCWeE_hCJdp7Z7mk4BDBqbGSH33h7Ru4swhIrVei_ZkoMWnnnSW8vrXu4Ufqsom5UY4Jo/s1600/next.gif'
});
});
//]]>
</script>
Now Use this code to Create a new Post and follow these steps;

  1. Create New Post
  2. Goto HTML
  3. Clear all the Code
  4. Paste the following code
You can replace images URL with your Own URL's


<div id="container">
<div id="gallery">
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwRc4y3qG2BjiMFGfj5xXu2_tFBlVdjVh2umgSDKp9Jkcxe5TfPGnLWyg_wRNlwAis6v3PL4mz_MCbgGTBMHsgTvlB8Sc6_3qFo1lG0JNYzoZ-aERcTNfPChfNWiUGeZZn-wDlTxmKGo/s1600/bw.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwRc4y3qG2BjiMFGfj5xXu2_tFBlVdjVh2umgSDKp9Jkcxe5TfPGnLWyg_wRNlwAis6v3PL4mz_MCbgGTBMHsgTvlB8Sc6_3qFo1lG0JNYzoZ-aERcTNfPChfNWiUGeZZn-wDlTxmKGo/s1600/bw.jpg" target="_blank" title="Jet">Jet</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeW9NEVZvmkJsMJt3rE-cA0XufPMQLpmU4YS24YYJUb8asJ4iSm62eKP8c5gHtaaNb81tjb-05oN-_to97hX2rQWI4RVZcbVzQsVXnrRmUG3YHyxCwq4K0vNaPd-ev-W53MoBGJLeoKI/s1600/bw-lingere.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeW9NEVZvmkJsMJt3rE-cA0XufPMQLpmU4YS24YYJUb8asJ4iSm62eKP8c5gHtaaNb81tjb-05oN-_to97hX2rQWI4RVZcbVzQsVXnrRmUG3YHyxCwq4K0vNaPd-ev-W53MoBGJLeoKI/s1600/bw-lingere.jpg" target="_blank" title="Elliptical Orbit">Elliptical Orbit
</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm_UGDhaJJgopZcbPcM2Doawx6AoFSDsA0G8B4pq2CImHE7jMjJ1BijPsmo-VTSqwZNk_SuSBqblUtiAFXZ8f9eQE03MkVd2uzOSwo5k-ZStZpgkktpQJBerV4p4dvgMOJJmwVRXTwROI/s1600/pristine-lake.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm_UGDhaJJgopZcbPcM2Doawx6AoFSDsA0G8B4pq2CImHE7jMjJ1BijPsmo-VTSqwZNk_SuSBqblUtiAFXZ8f9eQE03MkVd2uzOSwo5k-ZStZpgkktpQJBerV4p4dvgMOJJmwVRXTwROI/s1600/pristine-lake.jpg" target="_blank" title="pristine-lake">pristine-lake</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56N7lsP-WL-leMwxmeNHc3Y1YS0iscKo220K-pCCi3PKS49sj2pzPYUdOUkTM7Y_B187F2kbJsotTQo9-fiwlxq3a3_EdnNarX7fV43wOcLtQCJSwIWdJn-UlZX1kNvDYPhQKqDF3GtE/s1600/ladybug.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56N7lsP-WL-leMwxmeNHc3Y1YS0iscKo220K-pCCi3PKS49sj2pzPYUdOUkTM7Y_B187F2kbJsotTQo9-fiwlxq3a3_EdnNarX7fV43wOcLtQCJSwIWdJn-UlZX1kNvDYPhQKqDF3GtE/s1600/ladybug.jpg" target="_blank" title="ladybug">ladybug</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIkE21zfNUwZsDzLqGnWxPfaM54L4M9QEYnosOS6lLNyc1hRpgwuc8pDFFb0xtZdeqDf5R71iXVostbJtyWMw44JPLCS8kMN3muXUwHI2bL-PAW7H3deqW8_qyQwrSuovqWqJCw-MAcU/s1600/white-stallion.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIkE21zfNUwZsDzLqGnWxPfaM54L4M9QEYnosOS6lLNyc1hRpgwuc8pDFFb0xtZdeqDf5R71iXVostbJtyWMw44JPLCS8kMN3muXUwHI2bL-PAW7H3deqW8_qyQwrSuovqWqJCw-MAcU/s1600/white-stallion.jpg" target="_blank" title="white-stallion">white-stallion</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGpAkQMvuLxDKYwtp9sM_7tSYXxDR-fq9BP772yvGOGuhjAZmKluSK0omzx5L_GX5VJsVZUCd0ZPexsCBWrzhaoy2NN9tFkV5f5FttWgkGerm2JJYy31tB2QBUiHcZIyDO9E8V4MQmqgU/s1600/red-head.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGpAkQMvuLxDKYwtp9sM_7tSYXxDR-fq9BP772yvGOGuhjAZmKluSK0omzx5L_GX5VJsVZUCd0ZPexsCBWrzhaoy2NN9tFkV5f5FttWgkGerm2JJYy31tB2QBUiHcZIyDO9E8V4MQmqgU/s1600/red-head.jpg" target="_blank" title="red-head">red-head</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIA2x0kN2oPQt5LyGTBUN2yNfsD2uPP3lzbQcj3PaZhwImJch-oYMCRt2b6v1mR4lchmlKjPrW6-NrL8Se-PhsPIN5xZWj0iynK7foT8SDuL5q9AsOMdJPQYbxvhix1d6YBC0XPxvCsc/s1600/tiger.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIA2x0kN2oPQt5LyGTBUN2yNfsD2uPP3lzbQcj3PaZhwImJch-oYMCRt2b6v1mR4lchmlKjPrW6-NrL8Se-PhsPIN5xZWj0iynK7foT8SDuL5q9AsOMdJPQYbxvhix1d6YBC0XPxvCsc/s1600/tiger.jpg" target="_blank" title="tiger">tiger</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8D2EHFfAsc2101_PORsOwtclK6q8ecvMp7iUcmgvb-R3k1FOixt7rNzcmqwFZrntCFhZmC04eT3cBunMb3csgZ6nENmH5zV5q5SVE4wGXNAd5sdqA0XfJR2TTAsgR2KGgBS9pU8s08yg/s1600/promotion.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8D2EHFfAsc2101_PORsOwtclK6q8ecvMp7iUcmgvb-R3k1FOixt7rNzcmqwFZrntCFhZmC04eT3cBunMb3csgZ6nENmH5zV5q5SVE4wGXNAd5sdqA0XfJR2TTAsgR2KGgBS9pU8s08yg/s1600/promotion.jpg" target="_blank" title="promotion">promotion</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOr8C_7SJlrjPPc0wtBBy6qFEa_vOK8okWYjR8WVOQq9hi6MkAJTg2U1rpeYWvueu8f2kuJPXV3oP7icEOD2QZcffACjp1rFieOFhcNdAONzRri3jIWvBQ3vLtAX68MJfc8FesfiHGqBE/s1600/tattoo.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOr8C_7SJlrjPPc0wtBBy6qFEa_vOK8okWYjR8WVOQq9hi6MkAJTg2U1rpeYWvueu8f2kuJPXV3oP7icEOD2QZcffACjp1rFieOFhcNdAONzRri3jIWvBQ3vLtAX68MJfc8FesfiHGqBE/s1600/tattoo.jpg" target="_blank" title="tattoo">tattoo</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFm_pDwSmbwpuaEYfkXoOaOcBltO02EXyjqJ-wVU_2dB5QU6xyqQA25Hh_S-WajYKeeFZykbUtrdkLzygaJdYPUUWS8GE5M7-QQkEzeruSTgeAtUllAdeSxqDZnswC_DVS6mva3Xayzn8/s1600/wedding_catwalk.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFm_pDwSmbwpuaEYfkXoOaOcBltO02EXyjqJ-wVU_2dB5QU6xyqQA25Hh_S-WajYKeeFZykbUtrdkLzygaJdYPUUWS8GE5M7-QQkEzeruSTgeAtUllAdeSxqDZnswC_DVS6mva3Xayzn8/s1600/wedding_catwalk.jpg" target="_blank" title="wedding_catwalk">wedding_catwalk</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0MT3ST16bnGbjCXGd1SQarCwKP6AsKqqMWXFczpTbn-WVuk3kPxGAfEqZsujLnWhPtEFl-ny4PLi1HzEmxqbCq5tvUxduVOt7p82OJHJEqcRsWv-L-aO10ooteWts5ACP673FGNUE4X4/s1600/furry-feline.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0MT3ST16bnGbjCXGd1SQarCwKP6AsKqqMWXFczpTbn-WVuk3kPxGAfEqZsujLnWhPtEFl-ny4PLi1HzEmxqbCq5tvUxduVOt7p82OJHJEqcRsWv-L-aO10ooteWts5ACP673FGNUE4X4/s1600/furry-feline.jpg" target="_blank" title="furry-feline">furry-feline</a>
</div>
<div class="pic " style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzssK7J88K7td5F7wGJQOc3p2o1OL2yNduiD6OauLnlMGT_2xDajhhr_thX6GsbUzSA-Y0whW9T2-U07a6ht3S9ATzoz8vOA1kq2rW8S5-7JwRE90jysnepQZ0sV5Jejd7FA_B1_JDf5Q/s1600/lonely-anguish.jpg) no-repeat 50% 50%;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzssK7J88K7td5F7wGJQOc3p2o1OL2yNduiD6OauLnlMGT_2xDajhhr_thX6GsbUzSA-Y0whW9T2-U07a6ht3S9ATzoz8vOA1kq2rW8S5-7JwRE90jysnepQZ0sV5Jejd7FA_B1_JDf5Q/s1600/lonely-anguish.jpg" target="_blank" title="lonely-anguish">lonely-anguish</a>
</div>

SHARE THIS POST   

  • Facebook
  • Twitter
  • Myspace
  • Google Buzz
  • Reddit
  • Stumnleupon
  • Delicious
  • Digg
Categories: , ,

0 comments:

Comments will be Moderated by Blog Administrator.
Please do not Spam Here.....

Subscribe to: Post Comments (Atom)