Skip to main content

Lightbox image viewer


Description: Lightbox JS is an elegant, unobtrusive script that overlays a larger version of an image on the current page for display when clicked on- an image thumbnail viewer if you will. It's a snap to setup and works on all modern browsers.
Demo: (links are set to open in a popup window):
 Haunting trees Ocean View
Directions
Step 1: Insert the below code in the HEAD section of your page:
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>
Step 2: Create your "thumbnail" HTML code. Three basic flavours are supported:
<a href="dog.jpg" rel="lightbox" ><img src="dog_thumb.jpg" /></a>
<a href="cat.jpg" rel="lightbox" title="Caption- cute cat!"><img src="cat_thumb.jpg" /></a>
<a href="dan.jpg" rel="lightbox" title="My best friend Dan">Dan</a>
As you can see, the thumbnail code just consists of a standard <A> tag with its "href" attribute set to the image to show, an extra attribute rel="lightbox" to separate this link from ordinary links, and finally, an optional "title" attribute that will show a caption if set. You're free to use either a thumbnail image or text link as the interface to launching the enlarged image.
Step 3: Last but certainly not least, this script is made up of a few external files/images, as referenced in the code of Step 1. Download lightbox.zip, and upload its contents to a folder on your site. Then make sure the paths used in the code of step 1 correctly points to this directory. FYI, lightbox.zip contains these files:
That's it! Enjoy this superb script.

Notes

Inside lightbox.js, there are two configurable variables:
var loadingImage = 'loading.gif'; //path to the "loading animation" image
var closeButton = 'close.gif'; //path to the "close" button image

Labels:

Comments

Post a Comment

Popular posts from this blog

உடல் எடையை குறைக்க வேண்டுமா ?

இன்றைய அவசர உலகின் மிக பெரிய பிரச்சனையாக இருப்பது உடல் எடை அதிகரிப்பது தான்.மனம் போன போக்கில் உணவு கட்டு பாடு இல்லாமல் கண்டதையும் உள்ளே தள்ளுவதும்,உக்காந்த இடத்திலேயே கணணி முன் நேரத்தை விரயமாக்குவதும் தான் இந்த பிரச்சனைக்கு மூல காரணமாகும். அது சரி இந்த பிரச்சனையை எப்படி இல்லாமல் செய்வது அல்லது உடல் எடையை எவ்வாறு குறைப்பது என்பதை பற்றி பாப்போம் , பல வருட ஆரய்சிக்குபின் மருத்துவர்கள்   உடல் எடைய குறைக்க மிகவும் சுலபமான உடற்பயிற்சியை கண்டுபிடித்துள்ளனர்.இது  100% பயனளிக்க கூடியது, எந்த இடத்திலும் எந்தநேரத்திலும் மிக சுலபமா செய்ய கூடிய உடற் பயிற்சியாகும்.இந்த உடற்பயிற்சிகள் படத்துடன் கீழே தரப்பட்டுள்ளது நீங்களும் முயற்சித்து பாருங்கள கண்டிப்பாக பலன் கிடைக்கும்... முதலில் நாற்காலியில் உட்கார்ந்து இட  பக்கம் பார்கவும் .. ..        அடுத்து  நாற்காலியில் உட்கார்ந்து வல  பக்கம் பார்கவும்  ....  நண்பர்கள் யாரவது மச்சி வாடா சின்ன பீஸ் ,இங்க பாரு சூப்பர் அய்டம்னு சொல்லி கால்ல விழுந்து கூப்பிட்டலோ மேற்கூறிய உடற் பயி...
Post a Comment
Read more

38 (new) web tools to keep you busy

For many of us, the internet represents our daily job, income resource or biggest hobby. Every day we check our emails, read our feeds, visit our websites, find and discuss new things and GOD knows what else. It requires a lot of tools to do all this stuff and sometimes, we forget to search for easier solutions losing valuable time or keeping down the production graph. It's very hard to keep track with everything that's new and popular and this is why we do monthly searches for the best web tools out there. Enjoy!  45+ Web Operating Systems "There are many more web operating systems hoping to bring all your usual desktop applications online in one place - here are more than 45 of our favorites."  15 Ways To Create Website Screenshots "15 Ways To Create Website Screenshots"  Open Source Windows "The promise of open source software is best quality, flexibility and reliability. The only way to have TRUE "Open Source Windows"is...
Post a Comment
Read more

(Loot again) Get Mi Earphones & Mi Backpack In Just Rs.1

How to Get Mi Band , Mi Earphones & Mi Backpack In Just Rs.1 1, First Of All Just  Click On Below Links 1 By 1  Click 1->  Mi City Backpack Dark Grey Minimalist sleek design  -In Just Rs.1 Click 2->  Mi Earphones Silver Dynamic bass sound  -In Just Rs.1 2. Now Open All Links 1 By 1 3. After Opening The Link Click On “ Click to Bring The Price Down ” Then Click “ I Want it too ” 4. Login into Your Mi Account ( Or Sign Up  –  New Mi Account Giving Huge Price drop Like Rs.50 Or Rs.70 Drop , So Recommend You to Make New Account ) 5. Now You will See 3 Products There In this  Mi 24 Hour Madness Sale  6. Click On “ Participate ” Now Button & Share The Link With Your Friends When Each Friend Click On Your Link , You Will See Some Price cut in Your Products… Finally After Enough Click Your Product Will be Available For Just Rs.1  7. Start Referring , Start Looting MI
Post a Comment
Read more