• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • 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

Facebooktwitterredditpinterestlinkedinmailby feather

Related posts:

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

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.

Reader Interactions

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 *

Primary Sidebar

About Me

A husband, father of two, passionate software developer, diy lover and home baker who loves to learn new things. Read More…

  • Facebook
  • GitHub
  • Google+
  • Instagram
  • Twitter
  • YouTube

Featured Articles

How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

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

Footer

Recent Comments

  • Aditya Dabas on About
  • Ayten Göksenin Barutçu on How to Make Android Map Scrollable Inside a ScrollView Layout
  • mang jojot on About
  • Hussain on How to Programmatically Scan or Discover Android Bluetooth Devices

Recent Posts

  • How to Fix Blank Screen on WordPress Add/Edit Post Page
  • How to Programmatically Restart the ESP32 Board
  • How to Get Hardware Info of ESP32
  • How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Latest Tweets

To protect our users from spam and other malicious activity, this account is temporarily locked. Please log in to https://twitter.com to unlock your account.

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in