Back to Top
The nuts and bolts for
Creative web development

DMXzone Lightbox

“Great looking photos in a modal stylish popup”

Ever wanted to open your great looking photos in a modal stylish popup, catch the user's full attention? Meet the DMXzone Lightbox - It offers amazing Lightbox popup designs that catch the eye and amaze the user with its slick designs and easy usage!

The DMXzone Lightbox has been created with fully customizable design presets allowing you to explore your creativity and fit the Lightbox perfectly into your site design. With a single click you can add Lightbox functionality to any existing elements like images, links or forms! With the build-in DMXzone Resizer the Lightbox will directly resize your images, create thumbnails and even combine images in galleries, while getting a live preview of the Lightbox inside Dreamweaver. Enjoy your great Lightbox designed and drawn specifically for you.

The DMXzone Lightbox is the first ever Canvas based Lightbox control! With Canvas the design of your Lightbox is fully drawn online! No more including weird corner images to make it look good!

Features

  •  Fully customizable design presets, with great round corners, all drawn in real time with canvas! No more faking corners with images
 
  •  Configuring/editing already designs with the interactive DMXzone Lightbox Presets Explorer
  •  Ability to combine images in galleries that open in the Lightbox dialog
  • Automatically resize images and generate thumbnails by using the build-in DMXzone Image Resizer The extension has a built-in super fast, multithreaded image processor in Dreamweaver, that will resize your images and make thumbnails in an eye blink. Original images can be automatically resized to fit the specified size while the proportions are maintained. Without any external applications, no more Fireworks or Photoshop needed.
  •  Use Lightbox to open regular, existing links in the Lightbox dialog
  •  Great integration in Dreamweaver offering fully interactive live preview of the Lightbox options and designs within Dreamweaver!
  •  Build-in own Floater in Dreamweaver - all Lightbox elements are inspected by its own Floater, so you don't lose the ability to edit your images and links in Dreamweaver but rather you get additional options
  •  Web standards based
    The gallery complies to the latest web standards of the W3C
  • JavaScript Unobtrusive
    Images will always display correctly, even if your users don't use JavaScript or have a very old browser

  • Search Engine Friendly
    Due to the advanced incorporated technology this gallery is the ultimate search engine friendly gallery so the gallery titles and descriptions are well indexed by search engines
  •  Interoperability with the DMXzone Behavior Connector
      • Open pages with your DMXzone Lightbox that contain other DMXzone extensions such as Advanced Tooltips, Advanced Layer Popup, Flash MP3 Player, etc.
      • Control the DMXzone Lightbox with your own customized interface, using behaviours.

  • Slideshow option with automatic thumbnail popup
      • Create great slideshows with the DMXzone Lightbox Gallery option.

  • Images are resized while constraining proportions
      • Original images can be automatically resized to fit the specified size while the proportions are maintained using Dreamweaver or Fireworks

  • Integrated in Dreamweaver
      • Interactive dialog in Dreamweaver with all the options you'll need
 
 
 
  • Preview in Dreamweaver
      • You can see a live preview within Dreamweaver of how your gallery, link, or item will look like and navigate within the photos and links just as a user would on the web!

Showcases


  • Restaurant Daily Menu Showcase

    This is another showcase where we used Responsive Bootstrap 3 Portfolio Template and turned it into a restaurant menu page with great image effects on mouse over.

  • Responsive Bootstrap 3 Portfolio Showcase

    This showcase has been created with the Responsive Bootstrap 3 Portfolio, DMXzone Bootstrap 3 to be fully responsive, HTML5 Image Enhancer for the amazing gray scale image effects, and DMXzone ...

  • Beach Villa Showcase

    For this showcase we used DMXzone Bootstrap for the responsive layout of the page and DMXzone Lightbox to offer a larger image preview on click.

  • Grand Hotel Showcase

    For this stunning hotel showcase we used the Advanced CSS Animator to create drop effect of the website sections on page load and also to animate the navigation menu buttons. Also the features images ...

  • Furniture Store Showcase

    For this product page showcase we used 5 DMXzone extensions to complete it and make it fully functional. the discounted items are presented in a HTML5 Parallax Slider with button navigation. The ...

  • Photographer Portfolio Showcase

    For this showcase we worked with 3 DMXzone extensions. The menu was built with the Fish Eye Menu. Below we have various images, on which we used the HTML5 Image Enhancer to give them reflections and ...

  • Beach Hotel Showcase

    For this showcase we used DMXzone Lightbox in order to show a larger preview of the images in the HTML5 3D Flipping Gallery. Once an image is clicked the lightbox opens automatically.

  • Lux Decor Mobile Showcase

    For this showcase we used DMXzone Lightbox that displays the gallery images, DMXzone Google Maps to show the available locations, Ajax Autocomplete to help you when you type your current location and ...

  • Watch Shop Showcase

    In this showcase we are logged in as an admin and show you how to edit your website, combining DMXzone Lightbox and Advanced HTML Editor 3. All you need to do is click the 'Edit info' button and a ...

  • Destination Availability Showcase

    In this showcase we used CSS edited and customized Universal CSS Navigation Menu, DMXzone Lightbox that the images are opening in and DMXzone Google Maps that shows the hotel's location. The Ajax ...

  • Online Reservation System Showcase

    This showcase is created with the Event Calendar Super Bundle PHP, which is also available in ASP, and will show you how to create a fantastic online reservation system for your business.

  • Facebook Christmas Catalog Showcase

    In this showcase you can see how easy it is to create a product catalog using 3 Dreamweaver extensions. All products are displayed in the updated Ajax DataGrid and on click a DMXzone Lightbox opens ...

  • DMXzone Fresh Fruits Showcase

    Click on the image below to see the CSS Image Gallery in Lightbox window.

  • Metallica - Francais Pour Une Nuit

    The showcase contains most of the videos that have been included in Metallica's last DVD - Francais Pour Une Nuit. The videos open in a Lightbox directly streamed from Youtube.

  • Vacation Album

    In this showcase we've combined Sliding Billboard with DMXzone Lightbox, so that the images open in a stylish popup window.

  • Formuila One World championship Circuits

    Go through the sections in the showcase in order to view all Formula One Circuits. Click on the circuit name and read more about it in a cool Lightbox window.

  • Art Walk Showcase

    The showcase combines Universal CSS Navigation menu which navigates the Sliding Billboard items and the images are displayed in a DMXzone Lightbox.

  • Cafe Showcase

    In this showcase you will see how to show your location into a popup window, using DMXzone Google Maps and DMXzone Lightbox.

  • Nivo Slider, Lightbox & Feed Genie Showcase

    Images from Picassa Web Album Tartan Collection 2005-2009 fetched with DMXzone Feed Genie and displayed with DMXzone Nivo Slider and DMXzone Lightbox.

  • DMXzone Nivo Slider & DMXzone Lightbox Showcase

    The showcase is created using DMXzone Nivo Slider and DMXzone Lightbox. Click on any of the Slider images in order to preview them in a Lightbox window.

  • CSS Image Gallery & Lightbox Showcase

    For this showcase site we packed all our images in an amazing CSS Image Gallery that can be scrolled up and down, and additionally you can see a larger view of the image in a cool DMXzone Lightbox ...

  • HTML5 Image Enhancer & Lightbox Showcase

    In this showcase you can see how to combine HMTL5 Image Enhancer, in order to improve the look of your images, with DMXzone Lightbox, so that you can present them in a great popup window.

  • HTML5 Image Enhancer & Lightbox Showcase

    In this showcase you can see how to combine HMTL5 Image Enhancer, in order to improve the look of your images, with DMXzone Lightbox, so that you can present them in a great popup window.

  • Air Show Galleries Showcase

    All CSS Image Galleries are nicely packed in a Sliding Billboard and open in a cool Lightbox.

  • Photography Website Showcase

    In this showcase we binded Feed Genie and DMXzone Supersized so you can search for images in Picasa. Also you can connect your Picasa/Flickr account directly to use it as a source for your DMXzone ...

  • HTML5 Suite

    In this showcase we've used seven out of nine extensions packed in the HTML5 Suite to create a Website. We've also added tips, so you can explore each detail how it's been made and which extensions ...

  • Feed Genie Preview Showcase

    In this showcase we've used the YouTube Video Search feed, where you can filter YouTube videos from the search field and choose which one to be displayed. We've also used HTML5 Image Enhancer in ...

  • HTML5 Slideshow & DMXzone Lightbox

    The showcase shows you how to open your HTML5 Slideshow in a nice Lightbox window.

  • HTML5 Slideshow & DMXzone Lightbox

    The showcase shows you how you can open your Slideshow images in a stylish Lightbox.

  • Sliding Site Showcase

    In this showcase we've combined all the extensions included in the bundle. The site is designed in Sliding Panels with a Universal CSS Navigation Menu. The products open in a stylish Lightbox window ...

  • Lightbox Gallery with Single Thumbnail

    For this showcase site we packed all our images in an amazing CSS Image Gallery that can be scrolled up and down, and additionally you can see a larger view of the image in a cool DMXzone Lightbox ...

  • Event Calendar Lightbox Showcase

    The showcase show you how to combine Ajax Event Calendar with DMXzone Lightbox, so you can improve your user experience and open your events in a cool Lightbox window. Simply, click on event and ...

  • Rent-a-Beach House Showcase

    The showcase shows you an example of how you can combine all the extensions packed in the Event Calendar Super Bundle. We've used the DMXzone Calendar to navigate quickly through the Ajax Event ...

  • Trailers Showcase

    In this showcase you can see how we combined Animated Thumbnail Gallery and DMXzone Lightbox.

  • Wallpapers Showcase

    For this showcase site we packed all our images in an amazing CSS Image Gallery that can be scrolled up and down, and additionally you can see a larger view of the image in a cool DMXzone Lightbox ...

  • Concept Art Showcase

    For this showcase site we packed all our images in an amazing CSS Image Gallery that can be scrolled up and down, and additionally you can see a larger view of the image in a cool DMXzone Lightbox ...

  • Sticky Menu with Different Positioning Showcase

    The showcase we will show you how to navigate the Sliding Billboard, that opens in a stylish Lightbox window, from four different positions of the menu.

  • Christmas Cards

    The showcase combines Universal CSS Navigation menu which navigates the Sliding Billboard items and the images are displayed in a DMXzone Lightbox.

  • Christmas Cards Decoration Showcase

    This showcase combines Universal CSS Navigation Menu and DMXzone Lightbox. Click on the thumbnails inside the two Mega Menus in order to open the original images into a lightbox window.

  • Pizza Menu Showcase

    The showcase shows an Animated Thumbnail Gallery displayed in a Lightbox.

  • Shining Star Blue Dragon Showcase

    Click on the 'Buy Now' button in order to open the form in a Lightbox.

  • Amazing Panoramic Views Showcase

    Click on the thumbnails below in order to view the full-size panoramic photos and use the arrow keys to navigate through the Active Photo Viewer within a Lightbox window.

  • 20th Anniversary Wacken

    Click on a non-blurred date in the Calendar in order to see the events for each day of the festival. For band info click on the row.

  • Life Moments Movies Gallery Showcase

    The showcase features an amazing collection of HD videos from the young and talented artist Matthew Brown. Based in Seattle, USA, this young video producer creates masterpieces with his camera and ...

  • Top Slow Motion Movies Showcase

    Click on the images below to see the video in a Lightbox window

  • Interior Design Gallery Showcase

    Click on an image to open it's larger copy in a DMXzone Lightbox

  • Nature Photo Collection Showcase

    Click on a thumbnail to open the bigger image in a DMXzone Lightbox.

  • DMXzone Insects Gallery

    Click on the images below to see the 3D ImageFlow Gallery in a Lightbox window

  • 3D Photo Wall Lightbox Showcase

    DMXzone Lightbox in cooperation with 3D PhotoWall can really make a difference for your site.

  • DMXzone Extensions Tour Showcase

    Experience the DMXzone Extensions Tour with our amazing DMXzone Lightbox first ever Canvas based Lightbox control!

  • DMXzone Abstract Showcase

    With the showcase we'll show you a variety of custom made presets that have been applied for each image in your Lightbox.

  • Lightbox Showcase

    Click on a thumbnail to open the Lightbox and get a greater preview of the images. Customize the look of your Lightbox by using different presets.

Videos

Basic Usage

Amaze your web site visitors with the DMXzone Lightbox
With this movie we will show you some cool applications of DMXzone Lightbox in your website.

Working with Lightbox Presets Explorer
With this movie we will show you how easily you can work with Lightbox Presets Explorer configuring or editting already existing designs, called presets using the incredible user-friendly interface.

DMXzone Lightbox Preview Presentation
With this movie we will show you some more cool applications of DMXzone Lightbox in your website.

Creating Lightbox Gallery with a Single Thumbnail
With this movie we will show you how to create a Lightbox Gallery with only one thumbnail on your page.

Dynamic Usage

Playing Flash Video Files within the DMXzone Lightbox
With this movie we will show you how to play flash video files (flv) within DMXzone Lightbox, using the built in flash player.

Product Tour with Gallery and HTML Pages in DMXzone Lightbox
With this movie we will show you how easily you can create a product tour with gallery and html pages in popups, using the DMXzone Lightbox.


Dynamic Lightbox Movie
With this movie we will show you how easily you can create a dynamic DMXzone Lightbox by using a standard Dreamweaver recordset.

Bundle Usage

Show Your Location Into a Lightbox Window
With this movie we will show you how to show your location into a popup window, using DMXzone Google Maps and DMXzone Lightbox.

Show your Images in a Cool Lightbox
With this movie we will show you how easily you can show the images from CSS Image Gallery in DMXzone Lightbox for greater user experience.

Creating a CSS Image Gallery within a Lightbox
With this movie we will show you how easily you can use CSS Image Gallery within DMXzone Lightbox.

Creating a 3D ImageFlow Gallery within a Lightbox
With this movie we will show you how easily you can use 3D ImageFlow Gallery within DMXzone Lightbox.

Load a Dynamic Flash Image Enhanced Photo Based on a URL parameter
With this movie we will show you how easily you can parse a URL paramter from 3D ImageFlow Gallery and load a dynamic image in Flash Image Enhancer based on the parsed parameter.

Combining DMXzone Lightbox and Flash Image Enhancer
With this movie we will show you how easily you can combine in Dreamweaver two of the most amazing DMXzone extensions - Flash Image Enhancer and DMXzone Lightbox, and give your users a great visual experience.

Creating a Gallery with a Cool Photo Navigation
With this movie we will show you how to pan and zoom across your photos using Active Photo Viewer within a cool DMXzone Lightbox window.

Showing DMXzone Nivo Slider Images in a Lightbox
With this movie we will show you how easy it is to open your DMXzone Nivo Slider images in DMXzone Lightbox.

html5 slideshow and dmxzone lightbox

Combining HTML5 Slideshow with DMXzone Lightbox
With this movie we will show you how to open your HTML5 Slideshow images in DMXzone Lightbox.

html5 slideshow and dmxzone lightbox

Opening HTML5 Slideshow in a Lightbox
With this movie we will show you how to show your HTML5 Slideshow in a nice DMXzone Lightbox popup.

Open Your Calendar Events in a Stylish Lightbox Window
With this movie we will show you how to use Ajax Event Calendar with DMXzone Lightbox in order to enhance the user experience.

Creating Fantastic Billboard slides and Open them in a Lightbox
With this movie we will show you how to combine Sliding Billboard and DMXzone Lightbox in order to create amazing slides which open links in cool popup windows.

Validate your Forms within a DMXzone Lightbox
With this movie we will show you how to validate your forms within a DMXzone Lightbox window using the Universal Form Validator ASP.

Combine Fish Eye Menu and DMXzone Lightbox
With this movie we will show you how easily you can combine Fish Eye Menu and DMXzone Lightbox in Dreamweaver for the best user experience.

Enhancing DMXzone Lightbox Gallery Thumbnails using HTML5 Image Enhancer
With this movie we will show you how to enhance DMXzone Lightbox gallery thumbnails using HTML5 Image Enhancer.

DMXzone Lightbox and 3D Photo Wall
With this movie we will show you how easily you can use 3D Photo Wall Gallery within DMXzone Lightbox.

CSS Image Gallery. Lightbox and Sliding Billboard Bundle

Creating Beautiful Popup Galleries
With this movie we will show you how to open DMXzone Lightbox containing CSS Image Gallery, when clicking on Sliding Billboard .

Create a menu that is positioned on any side of your browser and navigate the Sliding Billboard.
With this movie we will show you how to navigate the Sliding Billboard sections through Universal CSS Navigation Menu. The Sliding Billboard content opens in a DMXzone Lightbox.

Navigating the Ajax Event Calendar through DMXzone Calendar
With this movie we will show you how to combine the Ajax Event Calendar with DMXzone Calendar using behavior connector.


Dynamic Thumbnail Gallery with Lightbox and Data Bindings


Using HTML5 3D Flipping Gallery with DMXzone Lightbox


Using Stop Playback Behavior with HTML5 MP3 Player


Add, Edit and Delete Functionality in Ajax Datagrid Part 3


Add, Edit and Delete Functionality in Ajax Datagrid Part 2


Open Your Links from Advanced HTML Editor 3 in a Lightbox Window


Show Your Location into a Cool Lightbox Window


Showing DMXzone Nivo Slider Images in a Lightbox


Pisaca User Album Photos as Source for DMXzone Nivo Slider


A Full Manageable MP3 Player with Covers Part 4


Creating Beautiful Popup Galleries


Building a Photography Website - Part 2


Displaying Picassa Featured Feed


Displaying Picassa User Album Images on Multiple Pages


Creating a YouTube Search Form


Enhancing DMXzone Lightbox Gallery Thumbnails using HTML5 Image Enhancer

Requirements

Type: Suite
License: External link
Product: Dreamweaver 8, Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Platform: Win XP/2000/2003/2008/7, Mac OS X 10.4+
Browser: IE 6, Opera 8, Opera 9, IE 7, Firefox 3.6+, Opera 9.5, Safari 3, Chrome 9+, IE 8, Safari 4+
Used Technologies: jQuery, CSS, Web 2.0
Screen Shot: Details...
Tags: lightbox, popup, window, photos, gallery, canvas, jquery


History

Version 1.0.16

Version 1.0.15

  • Included the latest jQuery 1.10.2 for full IE11 compatibility 

Version 1.0.14

  • Full Dreamweaver CC and Extension Manager CC support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.0.12

  • Fix for IE7 positioning
  • Latest FlowPlayer version included with many improvements
  • Improved compatibility with the latest jQuery version
  • Latest jQuery 1.6.3 included

Version 1.0.11

  • Improved automatic shared file copy, synchronization and upload from Dreamweaver
  • Removed the automatic lightbox cleanup functionality
  • Optimized source and files for smaller size

Version 1.0.10

  • Improved Support for iPad and iPhone
  • Improved YouTube video embedding also works great on iPad & iPhone
  • Minified all Lightbox plugins
  • Included new jQuery 1.4.4
  • Improved depended file includes
  • Improvements with the behavior connector events
  • Improved working in Dreamweaver templates
  • Fixed problems with absolute paths

Version 1.0.9

  • The DMXzone Lightbox was already able to play all your own content and videos in its cool looking viewer - but now you can go even a step further and play videos directly fetched by an RSS/ATOM feed like from YouTube by our newest Feed Genie ASP!

Version1.0.7

  • iPad compatibility - now the DMXzone Lightbox works great on the iPad!
  • Improved DMXzone Image resizer for Mac OSX
  • Improved support for Windows 7
  • Even faster resizing by using all the available cores of the CPU's
  • Improved working in Dreamweaver templates
  • Added compatibility with the new HTML5 Slideshow

Version 1.0.6

  • Updated compatibility with other DMXzone extensions
  • Improved file update and synchronization

Version 1.0.5

  • Improved Lightbox nesting

  • Improved procedure for updating Lighbox code and files

  • Various stability fixes and improvements for Dreamweaver on Mac OSX

Version 1.0.4

Browser optimizations:

  • Great browser performance optimizations delivering more than 30% speed improvement!
  • Support for new image rendering CSS properties in the newest browsers. If you have one of those (Firefox 3.6+ or IE 7+) the Lightbox will be even faster!
  • Dynamically loading of depended files only when needed – as the Lightbox uses many plugins to display different content types, those are now much better loaded on demand.
  • Latest version of Flowplayer included to play FLV files
  • PDF plug-in is smaller and much faster now
  • New Animated Close effect
  • New Preset called “simple”
  • New drop shadow for browsers that supports it (FF 3+, Safari 3+, Chrome)

Dreamweaver optimizations:

  • Performance optimizations in Dreamweaver – the Lightbox can be inserted and edited much faster now
  • New method for uploading related files – now when related files are generated by the Lightbox, the user is presented a dialog containing list of new files and with the choice to upload them all at once. No more files to forget to upload.
  • Improved “Lightbox Link” command
  • Improved Preset switching and management

Version 1.0.3

  • Support for Opera 10
  • Allow Lightbox nesting up to four levels
  • Index page smart duplicate filtering - if there are several links on the page, pointing to same destination, only one of them will be included at the index page
  • New Content Type Parameter so you can include all type of content, like Youtube videos directly and the Lightbox will know how to display them
  • The Control Lightbox behaviour is extended to include options for keyboard navigation
  • Improved stability and open speed

Version 1.0.2

  • Full Support for playing Flash Videos in the DMXzone Lightbox! All popular Flash Video formats can now be easily player in their own Lightbox and even linked in a gallery view!
  • Auto generate needed embed code for playing Flash files (flv/swf)
  • Full Support for displaying PDF files in the DMXzone Lightbox! You can now directly link a PDF file to be displayed in the Lightbox and it will load nicely inline!
  • Improved auto resize of the DMXzone Lightbox when Flash SWF movies are loaded directly
  • Improved loading on demand and caching of the DMXzone Lightbox files
  • Various Security Optimizations
  • Compatibility fixes for IE6

Version 1.0.1

  • Improved the Open DMXzone Lightbox behavior
  • Support for Spry Data components
  • New option to show/hide index button
  • New option for statusbar text
  • Full international support, customizable texts improved the build-in Image Resizer for Mac OSX
  • New option to specify Lightbox group (gallery) while inserting single items
  • Improved Insert Lightbox Link command 

Update Procedure:

  1. Open a page that uses DMXzone Lightbox
  2. You will see a progressbar that updates the new files
  3. You should see some alerts about updated files - make sure you upload them to your live server


If you experience any troubles with your browser try deleting your browser cashe to make sure that the new lightbox code is loaded.

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com, which is visited daily by more than 30.000 people and is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article

Reviews

Best Pop-Up Extenstion There Is!

By far the best pop up extension that I've seen. Very easy to customize and the uses for this Lightbox are endless.

As for the other review that comments on the heaviness of the design, the minimal design has a very clean border-less design.

I give this extension 10 out of 10 and it is worth every penny and then some!! 

very useful extension

This is a real gem in the vast market of pop-up extensions. Its customizations are really very well thought and most useful.
The only drawback is the emphasis on "heavy" designs. I prefer the lean and clean layouts which are also there but perhaps a bit under - represented.

Altogether the best Lightbox extension I know. Gives more individuality to your site