Lightbox JS v2

Hello again my fellow learners, once again I am publishing another interested article. In developing a website images are always there may be we put it in a gallery page or to any other page that an image is needed. But those images are not really attractive if we won’t put some spice on it. That’s why I come up of sharing this to you.

One of our projects are website development, last 2007 one of our clients Pueblo por la Playa a real estate  and country club  in Pagbilao, Quezon, Philippines developed by the Cotta Realty gave us the chance to developed and hosted it’s official website.

I’m one of the developer of the said website and as we are in the latter part of the development I notice that the images has no interactivity between the viewer on one of the pages of the website. With the help of my daily partner Google, I searched on the internet on how I can put an interactivity on the images for the viewer. After searching the internet I saw this Lightbox JS v2 wherein the images can be showed in a nice and good way.

Before continuing please feel free to download the Lightbox JS v2 here>>.

Part 1 – Setup

1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,

builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

<link rel="stylesheet" href="css/lightbox.css" type="text/css" 

media="screen" />

3. Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 – Activate

1. Add a rel=”lightbox” attribute to any link tag to activate the lightbox. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">

image #1</a>

Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

No limits to the number of image sets per page or how many images are allowed in each set.

It’s my chance to say thank you to Lokesh Dhakar the developer of this amazing tools. Cheers!

I hope that I gave another knowledge and inspiring article to all of you. Please don’t hesitate to always visit my blog. It’s my honor to serve and share my little know how to all of you. Until my next article.

 

Flash with XML in Joomla (Embedding Tip)

Hello everyone, while I’m doing the Tayabas KIOSk one of our company projects in Tayabas City, Quezon, Philippines. I’d run into a problem on how I will embed my flash with xml into Joomla Website.  And after many hours of spending my time googling it Ifound an answer:

Instructions:

1. Create an html file wherein the flash is embedded there.
2. In embedding the flash with XML to Joomla use the Wrapper Module in embedding the created html and voilah! Your flash with XML is now ready and functioning.

Thanks to ‘Assive’ from Flash Den Forum.

Good Luck! Thank you for your time visiting this blog. For your thanks please feel free to put comments here. Till my next article.. I am now signing off.

 

How Will I Spend My Time On August 25

On August 25 will be a holiday because of the observance of Ninoy Aquino Day, but I’m planning to do things rather than sleeping on my bed nor sitting on our sofa and watching movies. Last August 22 I received an e-mail from Sikap Inc. one of the partner of Tita Gemma’s organization, indicated there is a message and an attachment for Tita Gemma. The first thing that I’m planning to do is to meet Tita Gemma to give the soft copy of the e-mail from Sikap Inc. After that, I want to spend the rest of my time at our office even thougb it’s holiday there’s no problem for me to go to our office because I have a key. I want to take that time to continue developing the KIOSK (Information System) for Tayabas City. And after spending my time at the office I’ll treat myself to eat on a restaurant.

 

My First Web Blog

This is my first time of creating my own web blog. Now a days I always curious about blogs and why do other people make blogs. That’s me myself want to know what’s behind the blogging. I’m still under the stage of learning regarding blogging and I’m hoping to learned it as soon as possible as I can. For now I’ll end this here and wait for my blog updates. Thank you for sharing your time to read this.

 

Hello world!

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!