• Home
  • About
  • My Apps
    • AnReboot
    • BlitzDroid
    • SavePoint
    • Javelt
    • TagihanListrik
    • TagihanTelkom
    • CekTagihan
    • Komodonesia
    • Indonesia FlightBoard
    • Indonesia Soccer
  • Projects
    • GStaticMap WP Plugin
  • Contact
  • Privacy Policy

LORENZ BLOG

All About Web & Mobile Application Development

  • Featured Articles
  • Gadgets
    • Android
    • Blackberry
  • Programming
    • Android
    • PHP
    • Java Script
    • MySQL
    • Postgresql
    • Flex
    • Web
  • Software
    • Mac OS
    • Windows
    • Linux
  • Web
You are Here » Home >> Information Technology >> Programming >> Java Script >> How to Create Image Overlay Using Javascript

How to Create Image Overlay Using Javascript

December 13, 2009 by Lorensius Londa 9 Comments

Image overlay on a web page could be done easily using Lightbox javascript library that could be downloaded here. The library uses Prototype Framework and Scriptaculous effects library. In this tutorial, i’ll use Lightbox library version 2.0, the latest version at the time on this writing.

Image Overlay Using Lightbox

Image Overlay Using Javascript Lightbox

A.  How to Setup

  • Include the three javascript libraries (prototype.js, scriptaculous.js and lightbox.js) inside the HEAD section on your html page.
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript" src="script/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="script/lightbox.js"></script>
  • Include the Lightbox CSS file
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  • Make sure you have set the correct path to the following image files: prevlabel.gif, nextlabel.gif, loading.gif, and closelabel.gif on the CSS file.

B. How to Apply

On Single Image

If you want to make overlay image on a single image, add rel="lightbox" attribute to the link tag to activate the lightbox

<a href="images/mandala1.jpg" rel="lightbox" title="Approaching Juanda">
<img src="images/mandala-small1.jpg" border="0" class="image">
</a>

To show image description on the overlay image, add title tag to the link tag.

On Group of Images

To make overlay on a set of related images in a group,  append the group name in a square bracket after the rel attribute , rel=”lightbox[groupname]”.

<a href="images/mandala1.jpg" rel="lightbox[mandala]" title="Approaching Juanda">
<img src="images/mandala-small1.jpg" border="0" class="image">
</a>

<a href="images/mandala2.jpg" rel="lightbox[mandala]" title="Banking Right, intercept ILS RWY10">
<img src="images/mandala-small2.jpg" border="0" class="image">
</a>

<a href="images/mandala3.jpg" rel="lightbox[mandala]" title="Ready to Land">
<img src="images/mandala-small3.jpg" border="0" class="image">
</a>

<a href="images/mandala4.jpg" rel="lightbox[mandala]" title="Touchdown, spoilers deployed">
<img src="images/mandala-small4.jpg" border="0" class="image">
</a>

View live demo here

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Related posts:

  1. How to Create Scrollable Image Slider Using JavaScript
  2. How to Create Flash Like Image Slideshow with JavaScript
  3. How to Overlay Video Using JQuery Tools and Flowplayer
  4. How to Crop Image Using JavaScript and PHP

Filed Under: Information Technology, Java Script, Programming Tagged With: imaga overlay javascript, image, image overlay, javascript, light view, lightbox, overlay image javascript

About Lorensius Londa

Passionate web and mobile application developer. Co-founder of TRUSTUDIO, loves programming, Android, aviation, travelling, photography, coffee and gym mania.

Comments

  1. JavaScriptBank.com says

    December 15, 2009 at 7:13 am

    very cool & good js, thank you very much for sharing.

    Can I share this post on my JavaScript library?

    Awaiting your response. Thank

    Reply
    • lorenz says

      December 15, 2009 at 4:27 pm

      Yes, you can share this article on your website..:-)

      Reply
  2. TodayGadgets says

    December 21, 2009 at 1:50 pm

    Thank you!

    Reply
  3. SheppardVERONICA21 says

    April 12, 2010 at 2:12 am

    Various people all over the world get the mortgage loans from different creditors, because it’s easy and fast.

    Reply
  4. Sahil kakkar says

    November 2, 2010 at 3:16 pm

    is their is anyone who can give me the code of crop +above image overlay as in orkut

    Reply
  5. Sahil kakkar says

    November 2, 2010 at 3:20 pm

    Is their isanywho can send me the code of Crop application with image overlay as in orkut when we crop our profile pic

    Reply
  6. Giggle says

    April 8, 2012 at 8:35 am

    Fun2Do things, all the time

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

About Me

Passionate web and mobile application developer. Co-founder of TRUSTUDIO, loves programming, Android, aviation, travelling, photography, coffee and gym mania. Read More…

  • Facebook
  • Github
  • Google+
  • Instagram
  • Twitter
  • YouTube

Featured Articles

Blue Bamboo P25 Printer Android Demo Application With Source Code

Simple JSON RPC Client for Android

How to Send Message to Google Cloud Messaging (GCM) Server Using JSON and PHP

How to Use Multi-User Feature in Android Jelly Bean

Recent Comments

  • mang jojot on About
  • Hussain on How to Programmatically Scan or Discover Android Bluetooth Devices
  • Kiran Ahuja on How to Programmatically Pair or Unpair Android Bluetooth Device
  • Edwin Alvaradko on How to Make Android Map Scrollable Inside a ScrollView Layout

Recent Posts

  • Eclipse Issue on Os X Yosemite – To open “Eclipse” you need to install the legacy Java SE 6 runtime
  • Blue Bamboo P25 Printer Android Demo Application With Source Code
  • How to Programmatically Pair or Unpair Android Bluetooth Device
  • How to Programmatically Scan or Discover Android Bluetooth Devices

Latest Tweets

  • I just finished running 12.89 km in 1h:23m:28s with #Endomondo #endorphins https://t.co/hYgBSfmGxS2 hours ago
  • I just finished walking 1.77 km in 22m:40s with #Endomondo #endorphins https://t.co/AMKDdnwTq02 days ago

Copyright © 2019 · Londatiga.Net . All Rights Reserved