Image Pop-ups

JavaScript can be used to add pop-up interactivity to your images. A pop-up typically consists of a small image (thumbnail), which when clicked, pops open a larger version of the image in a separate window. Pop-ups are often used when 'real estate' (space) issues exist on a webpage.

Lightbox

One of, if not the original, 'box' JavaScript pop-up tools. Like the previous image effects, pop-up functionality is to be supplied by an external .js file. Users can control the ‘look and feel’ of the pop-up window by editing a set of CSS rules. This pop-up effect, including instructions for use and file downloads can be found at:

In Adobe Bridge:

  1. Locate and select both pop-up-1.jpg and pop-up-2.jpg in the ‘site-working‘ folder
  2. Right-click and choose open with Photoshop

In Adobe Photoshop:

  1. Highlight pop-up-1.jpg
  2. From the Menu Bar, go to Image > Image Size
  3. Set the image width value to 600 pixels
  4. Set the interpolation to Bicubic Sharper
  5. From the Menu Bar, go to View > Actual Pixels
  6. From the Menu Bar, go to File > Save for Web & Devices...
  7. Set the save preset to JPEG High (quality of 60)
  8. Save the image as pop-up-1-big.jpg into the ‘site-media’ folder
  9. From the Menu Bar, go to Image > Image Size
  10. Set the image width value to 200 pixels
  11. Set the interpolation to Bicubic
  12. From the Menu Bar, go to View > Actual Pixels
  13. From the Menu Bar, go to File > Save for Web & Devices...
  14. Set the save preset to JPEG High (quality of 60)
  15. Save the image as pop-up-1-small.jpg into the ‘site-media’ folder
  16. Close the pop-up-1.jpg file – do NOT save
  17. Repeat the multi resize/save process above for pop-up-2.jpg
  18. Close the pop-up-2.jpg file – do NOT save

In Adobe Dreamweaver:

  1. Open pop-up.html
  2. Working in Design View
  3. Replace the page left,  left image with pop-up-1-small.jpg from the ‘site-media’ folder
  4. Replace the page left,  right image with pop-up-2-small.jpg from the ‘site-media’ folder
  5. Be sure both images are not scaled in the Properties Panel
  6. Link pop-up-1-small.jpg to pop-up-1-big.jpg in the Properties Panel
  7. Link pop-up-2-small.jpg to pop-up-2-big.jpg in the Properties Panel
  8. Save your file
  9. From the Menu Bar, File > Preview in Browser > Firefox
  10. Test your image links

To add the lightbox pop-up functionality and CSS:

  1. Switch to Code View
  2. Make room the <head> section to add a link to an external .js file
  3. From the Menu Bar, Insert > HTML > Script Objects > Script
  4. Link to the external .js file: site-javascript/lightbox/lightbox.js
  5. In the CSS Panel, click the Attach Style Sheet icon (chain links)
  6. Attach: site-javascript/lightbox/lightbox.css

To add the lightbox pop-up effect:

  1. Working in Design View
  2. Select the pop-up-1-small.jpg image
  3. Switch to Code View
  4. Within the pop-up-1-small.jpg link tag <a>, add rel="lightbox"
  5. Within the pop-up-2-small.jpg link tag <a>, add rel="lightbox"
  6. To add a pop-up window caption, within the pop-up-2-small.jpg link tag <a>, title="change me"
  7. Save your file
  8. Refresh your Firefox page
  9. Click on you pop-ups

To modify the default CSS look:

  1. In the CSS panel, double-click to modify the #lightbox rule
  2. In the Background section, change the Background-color value to one of your own liking
  3. Save your files
  4. Refresh your Firefox page
  5. Click on your pop-ups

Modify the lightbox.js file:

  1. In the Files panel, double-click to open: site-javascript/lightbox/lightbox.js
  2. In line 38, change to ‘site-javascript/lightbox/loading.gif’
  3. In line 39, change to ‘site-javascript/lightbox/close.gif’
  4. Save your files
  5. Refresh your Firefox page
  6. Click on your pop-ups

Copyright © 2010 | Bill Morrison | All Rights Reserved