Build a jQuery Lightbox Effect – Best Tutorials

by Martin Angelov
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

Tutorial Demo

Preview

Super Simple Lightbox with CSS and jQuery

by Jim Nielsen
Rather than using a bloated plugin that has features you’ll never use, this tutorial shows you how to create a super simple lightbox for handling images. It’s perfect for image galleries, portfolios, and more!

Tutorial Demo

Preview

jQuery: Lightbox Tutorial

by Gabriele Romanato
In this tutorial I’m going to show you a simple implementation of a lightbox effect with jQuery. To understand the techniques presented here, you should be familiar with the concept of CSS positioning. Anyway, don’t worry about it because I’ll try to explain it to you in the clearest way possible.

Tutorial Demo

Preview

Building a Lightbox with jQuery

by Dryan
I often get the question, “what lightbox do you use?”, to which I respond, “the one I built last week.” Then earlier today I mentioned to someone on Twitter that building a lightbox is a good way to learn jQuery. That got me thinking that I should write a tutorial, and here it is.

Tutorial Demo

Preview

jQuery Image Gallery – Lightbox Tutorial

by Dreamweaver Tutorial
Build an image gallery with the jQuery Lightbox Gallery plugin. Create a photo gallery with thumbnail images, link to the larger images and animate them into a jQuery slideshow gallery with previous and next buttons so your web visitors can shuffle through the photos.

Tutorial Demo

Preview

Creating a Custom jQuery LightBox Effect from Scratch

by Frank Perez
In this tutorial we will be going over an easy way of creating a lightweight LightBox effect that you can use any of your websites. This tutorial will use some effects to give your LightBox some style such as fading in and out. Lets start by setting up our document with some basic HTML markup.

Tutorial Demo

Preview

Custom Portfolio Page For Your WordPress Theme

by nuresponse
In this tutorial you’ll watch as I modify the TwentyTen theme (that comes with WordPress 3.0+) to;
- Use built in WP functions to include & exclude posts from the loop based on category.
- Display Portfolio Posts on a custom page template – Portfolio Page.
- Add a new post_thumbnail size to the functions.php file & display this custom sized Featured Image on the portfolio page along with the post excerpt.
- Display all other Posts on a new Custom Page Template – Blog Page.
- Display featured image from the post on the Blog Page.

Tutorial Demo

Preview

Create a Lightbox effect only with CSS – no javascript needed

by Emanuele Feronato
There are tons of Lightbox scripts in the web, each one with its unique features and limitations, but all require massive use of Javascript or the installation of javascript frameworks. In this example does not want to compete with those scripts, but if you are looking for a simple, 100% CSS, 0% javascript lightbox, this may help you.

Tutorial Demo

Preview

by aeroalquimia
Lightbox Evolution is a tool for displaying images, html content, maps, and videos in a “lightbox” style that floats overtop of web page. Using Lightbox Evolution, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

Download Demo

Preview

Teaser Pop for WordPress

by fpCollective
The best way to make your sites Pop in just a few minutes.
- Does not require any knowledge with PHP or Javascript.
- You can use it to show an image with optional link or a SWF .
- It’s tested in firefox, internet explorer (6, 7, 8, 9), chrome, safari and opera.
- PHP 5 and GD 2 .0+
- Jquery 1.3 (1.4+ recommended)
- Worpress 2.7 (3.0+ recomended)

Download Demo

Preview

Picasa LightBox Plugin for WordPress

by bogdan
Picasa LightBox is a WordPress plugin that lets you easily add Picasa images to your WordPress posts and pages.

Download Demo

Preview

Lightbox-2 for WordPress

by Rupert Morris
Lightbox 2 allows you to present images in a slick window, while darkening the rest of the page. It makes your site look professional, and adds very little to page load times. It does not require any browser plugins to work, and works on just about every web browser out there! When a browser doesn’t support javascript, the code fails gracefully.

Download Demo

Preview

Lightbox Gallery

by Hiroaki Miyashita
The Lightbox Gallery plugin changes the view of galleries to the lightbox.
- Lightbox display of Gallery
- Tooltip view of caption of images
- Displays the associated metadata with images
- Divides Gallery into several pages
- Extends the default Gallery options
- Additional settings are set in the option page
- Switch to the Highslide JS display

Download Demo

Preview

Flexible Lightbox

by Alain
This plugin allows to use the Lightbox features for images and wordpress galleries without touching the html code. It includes an option ‘Open using lightbox’ on the Setting Panel to be used before inserting the single images on your post.

Download Demo

Preview

Leave a Reply