Lightbox Jump Start PRO

Lightbox is a small JavaScript library that allows us to overlay series of images on top of our web page. Lightbox was developed by Lokesh Dhakar, it uses jQuery and modernizr and is available for free.

The following video overviews this library using the examples we can find in its official website at http://lokeshdhakar.com/projects/lightbox2.

The following video clip overviews a very simple code sample for using the Lightbox JavaScript library.

The code shown in this video clip is available below. Make sure you fix the relative links to the JavaScript and the CSS files.

<!DOCTYPE html>
<html lang="en-us">
	<head>
		<title>Lightbox Jump Start</title>
		<script src="js/modernizr.custom.js"></script>
		<link rel="stylesheet" href="css/lightbox.css" media="screen"/>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="js/lightbox-2.6.min.js"></script>
	</head>
	<body>
		<div>
			<a href="img/pix1.jpg" data-lightbox="myphotos" title="bow river">
				<img src="img/pix1.jpg" width="150" height="150"/>
			</a>
			<a href="img/pix2.jpg" data-lightbox="myphotos" title="banff">
				<img src="img/pix2.jpg"  width="150" height="150"/>
			</a>
			<a href="img/pix3.jpg" data-lightbox="myphotos" title="spitz">
				<img src="img/pix3.jpg" width="150" height="150"/>
			</a>
			<a href="img/pix4.jpg" data-lightbox="myphotos" title="interlaken">
				<img src="img/pix4.jpg" width="150" height="150"/>
			</a>
			<a href="img/pix5.jpg" data-lightbox="myphotos" title="central park">
				<img src="img/pix5.jpg" width="150" height="150"/>
			</a>				
		</div>
	</body>
</html>

You can find the complete sample with all the other files it uses as well as slides and video clips for learning how to use this library in my new Lightbox Basics free course at http://abelski.lifemichael.com.

Share:

The Visitor Design Pattern

The Visitor Design Pattern

The visitor design pattern allows us to add operations to objects that already exist without modifying their classes and without extending them.

Front End Development

FED Academic Course in HIT Summer 2023

FED stands for Front End Development. It is one of the hottest topics these days. The academic FED course I deliver focuses mostly on the more complex topics.

What are Anti Patterns?

Anti Patterns

Unlike design patterns, anti patterns just seem to be a solution. However, they are not a solution and they cause additional costs.

Virtual Threads in Java Professional Seminar

Virtual Threads in Java

The use of virtual threads can assist us with improving the performance of our code. Learn how to use virtual threads effectively.

What is Functional Programming Banner?

The Power of Functional Programming

The Functional programming paradigm treats computation as the evaluation of mathematical functions and avoids changing state and mutable data.

What is Computer Programming Paradigm?

What is Computer Programming Paradigm?

The programming paradigm defines the way in which programs are written, organized, and executed.

NoSQL Databases Courses, Seminars, Consulting, and Development

MongoDB Design Patterns Meetup

The use of MongoDB involves with various cases in which we can overcome performance issues by implementing specific design patterns.

image of woman and database

Record Classes in Java

Learn how to define record classes in Java, and when to use record classes in your code. Stay up to date with the new Java features.

Accessibility | Career | Conferences | Design Patterns | JavaScript | Meetups | PHP | Podcasts | Python | Self Learning

Teaching Methodologies | Fullstack | C++ | C# | CSS | Node.js | Angular | Java | Go | Android | Kotlin | Swift | Academy

Front End Development | Scala | Architectures | Cloud | Big Data | Internet of Things | Kids Learn Programming

The Beauty of Code

Coding is Art! Developing Code That Works is Simple. Develop Code with Style is a Challenge!

Update cookies preferences