• This field is for validation purposes and should be left unchanged.

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

Phone:
(406) 662-1123

Dreamweaver Tutorial: Add a jQuery Lightbox to Dreamweaver websites


Written by Gabriel on May 9, 2012

Learn How to Add a Lightbox to Adobe Dreamweaver CS5.5 Websites

In this tutorial, you will learn how to add the popular jQuery Lightbox function to a Dreamweaver webpage without using Code View.

What is the jQuery Lightbox?

In today’s internet, the slickest and most common method of displaying higher resolution images or featured images when a link to an image is clicked is to show a larger image overlaid above the entire webpage. The area surrounding the Lightbox image is typically grayed out to highlight the displayed image.

How does Lightbox look & function in a Dreamweaver website?

Below is an example to demonstrate the exact jQuery Lightbox that is constructed using this free Adobe Dreamweaver CS5.5 tutorial.

Step 1: Linking the Webpage with the jQuery Library

To begin, we must open an existing webpage or create a new one in Adobe Dreamweaver CS5.5. Once the page has been created and saved, download the jQuery library file and save it to a new folder within your project’s root folder called/js/. To link the Dreamweaver webpage to this new javascript file, click the cursor into the Head Content Panel then go to the Insert panel and choose Common > Scripts > Script. Click the folder button and browse to your jQuery file, press ‘OK’.

dreamweaver-insert-javascript-window

Step 2: Add Custom Javascript to the Adobe Dreamweaver Webpage

To add javascript to the webpage directly, again click the cursor into the Head Content Panel then choose Insert > Scripts > Script. Instead of browsing to a file, place the cursor into the Content text area of the Script Window and paste the javascript (code) below.

jQuery(document).ready(function($) {

	$('.lightbox_trigger').click(function(e) {

		//prevent default action (hyperlink)
		e.preventDefault();

		//Get clicked link href
		var image_href = $(this).attr("href");

		/* 	
		If the lightbox window HTML already exists in document, 
		change the img src to to match the href of whatever link was clicked

		If the lightbox window HTML doesn't exists, create it and insert it.
		(This will only happen the first time around)
		*/

		if ($('#lightbox').length > 0) { // #lightbox exists

			//place href as img src value
			$('#content_lightbox').html('<img src="' + image_href + '" />');

			//show lightbox window - you could use .show('fast') for a transition
			$('#lightbox').show();
		}

		else { //#lightbox does not exist - create and insert (runs 1st time only)

			//create HTML markup for lightbox window
			var lightbox = 
			'<div id="lightbox">' +
				'<p>Click to close>/p>' +
				'<div id="content_lightbox">' + //insert clicked link's href into img src
					'<img src="' + image_href +'" />' +
				'</div>' +	
			'</div>';

			//insert lightbox HTML into page
			$('body').append(lightbox);
		}

	});

	//Click anywhere on the page to get rid of lightbox window
	$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
		$('#lightbox').hide();
	});
});

Step 3: Place Thumbnail Links into the Dreamweaver Webpage

To make this Lightbox work, there must be a hyperlink for each image that is to be displayed with Lightbox. Each of these links must have a class called lightbox_trigger or they will not open the images with Lightbox. To add a class that is not in your style sheet, highlight each link individually then press Shift + F5 to open the Tag Editor window for a. Select the Style Sheet/Accessibility tab and type the classlightbox_trigger into the Class text field as shown below.

dreamweaver-link-tag-editor-window

Step 4: Create CSS Rules to Display the Lightbox on the Dreamweaver Webpage

Using the CSS Styles panel on the right side of the Adobe Dreamweaver CS5.5, create three new rules relating to the lightbox div. These rules are called #lightbox#lightbox p, and #lightbox img. These can be customized to your liking, below I have listed the rules I recommend.

#lightbox

  • position: fixed
  • top: 0
  • left: 0
  • width: 100%
  • height: 100%
  • background: [save this overlay 1×1 pixel png image into the appropriate images sub-folder of the Dreamweaver website, then browse to it and set it as the repeating background image]
  • text-align: center

#lightbox p

  • text-align: right
  • color: #FFFFFF [white]
  • margin-right: 20px
  • font-size: 12px

#lightbox img

  • max-width: 940px [this will ensure that very wide images are displayed smaller to ensure they fit within the standard-sized browser window]
  • max-height: 750px [prevents images that are too tall from being cut-off]
  • Note: In the example above, there is a shadow applied to this CSS Rule. Dreamweaver does not yet support all the new CSS3 features, therefore to add the box-shadow effect one must manually add the CSS code into the #lightbox img rule. The shadow-box CSS rules are listed below. To access the necessary code, right click on the rule in the CSS Styles panel and choose “Go to code”, place the cursor onto a new line and enter the code below.
    • box-shadow:0 0 25px #111;
    • -webkit-box-shadow:0 0 25px #111;
    • -moz-box-shadow:0 0 25px #111;
Posted in Adobe Dreamweaver jQuery

5 Comments to Dreamweaver Tutorial: Add a jQuery Lightbox to Dreamweaver websites

  1. Jesenia's Gravatar Jesenia
    January 20, 2016 at 11:00 am | Permalink

    Thank you this was very helpful.

  2. Byron's Gravatar Byron
    October 29, 2016 at 8:17 am | Permalink

    followed these instructions to the letter and they are not working.

  3. Mark's Gravatar Mark
    January 24, 2017 at 12:39 am | Permalink

    I did too it wont work properly for some reason

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Featured Clients


Associated Construction Engineering

Oxbow Cattle Company Letterhead

Take the first step


Questions? Give us a ring, shoot us an email or send a homing pigeon our way. Let’s get the ball rolling! We can’t wait to hear from you!


Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802


Phone:
(406) 662-1123

5
523 N Higgins Ave, Missoula
5
5
Avi Kolko 2 months ago
Gecko built us a new Unity Hospice website from the ground up, as well as designing new brochures and other collateral material. Working with them has been a pleasure - they are professional, organized, responsive, aim to please, and are easy to work with. Their design work is beautiful, and they really took pains to understand the look we were going for. Highly recommended!
5
Avigail Bass 4 months ago
We redesigned a very very old website with Gecko and began the process during coronavirus. Despite those challenges, the team at Gecko was very helpful and flexible. They built us a beautiful website, taking into account all our needs. The project manager Grace, was a pleasure to work with, always available to answer questions, great with communication, and very organized. They went above and beyond to make sure the end product was perfect, even if it meant putting in extra hours, or extending the project longer than anticipated. We really appreciated all they did for us and could not be happier with the results!
5
Craig McKay 5 months ago
Gecko Design staff was super easy to work with. They were able to help us create an incredible web site that is getting noticed. I would highly recommend Gecko to anyone looking for web design.
5
Courtney Firak 8 months ago
Working with the team at Gecko Designs has been fantastic! I worked closely with Ali to create a new meetings website and she was so patient with all the changes to copy and took the time to walk me through the back-end of Word Press. I am confidently making changes on own but know that any request will be done quickly. The team was even very responsive over a weekend to meet a deadline. Highly, highly recommend!
5
PHC Missoula 9 months ago
Gecko's team does great work. We had a fairly complex request with a variety of stakeholder interests at play. Their team listened carefully and responded thoughtfully to our needs throughout the process! We were very pleased with the process and thrilled with the final product they provided.
We’ve been working so hard making our clients look good, we neglected our own brand for quite a few years (25 to be exact...)! New look comin’ at ya Spring 2021! Has it been awhile since you’ve re-branded? We get it! Call us and we can help! (406) 662-1123