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:

Startup PIcture

Lessons Learned from Running a Startup: The Bootstrap Way

If you consider running a startup the bootstrap way then you might get some insight from the lessons I learned.

java programmer

Beyond Java – Evolving to Scala and Kotlin

Learn about the considerations we should take into account when choosing whether to move forward from Java to Kotlin or to Scala.

Python for Kids Book Cover

Python for Kids: Coding Made FUN

The Python for Kids: Coding Made FUN is a new book that focuses on teaching kids how to code in Python. You can find it on Amazon.

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.

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