Fix For – ClearBox-LightBox Widget for Dreamweaver – Thumb Target (lightbox) Not Working Properly


Adventure into Dreamweaver Widgets

To learn how to use Dreamweaver CS6, I decided the best way was to have a website project to build. My software philosophy is Learn by doing and a whole lot of Internet video watching and surfing on how-to. So I decided a friend of mine needed a website for his tattoo shop. So after some haggling and bartering (getting some tat work done for free:), I got me a website to build. I built and I also host

Find out where your website ranks with your chosen keywords in Google, Yahoo and Bing.
14 day free trial. No credit card required.

I’m not a beginner to web design. I’ve done web design from 1999-2007 using FrontPage 1999-2003, FTP and notepad. So I already have some understanding about how-to do stuff when it comes to web design. The tools that I used, Adobe’s Dreamweaver, Photoshop and Illustrator are completely new to me. CSS is somewhat new, though back around 2005 (I think) when CSS started appearing, or becoming use more and more, I have tinkered with it, but never really mastered CSS or got a firm understanding of it. Scripting, well I don’t code but can install existing scripts and configure to make usable.

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

ClearBox-LightBox v. 2.0

I’ll probably discuss this project, Dirty South Ink’s website, more in the future. But for now I want to discuss a widget that plugs into Dreamweaver that allows you to easily add an image gallery that does some pretty nifty stuff. I also want to point out an issue I came across, that I have since learned is quite common, and has a really simple fix, though finding that information can be tricky at best. That is why I am posting it here. That way maybe someone can find the help they need here, and tell someone else about this site:)

Recommended Dreamweaver Courses

Master Dreamweaver the fast and easy way!

Building Websites with Dreamweaver CS6

Learn Adobe Dreamweaver CC – For Absolute Beginners

ClearBox-LightBox referred to hear-after as Clearbox or simply CB is a widget that can be obtained through the widget browser that is installed on Dreamweaver, at Adobe’s website for free. This widget is compatible with all browsers, by that I mean the code will work in I.E. 6-8! This widget is a program that inserts necessary javascript and CSS and html to make an image, audio, video, flash etc. gallery for any web page quickly and easily, and you don’t have to code all these things. It allows users to click on a thumbnail picture and it will enlarge while leaving the user on the same page. It has a scroll feature in it to browse the pictures without leaving the page.

If you wanna take a look at what it does, I Installed it on Dirty South Ink’s website here.

For starters to let you know, you will need to size your own images. You need to make a thumbnail size and a larger one.ClearBox needs links to both to work right.

Here is a screen capture of the thumbnail gallery. Below it, a picture of what happens when you click on a thumbnail.

ClearBox LightBox

Notice when clicking the thumbnail it will dim the website behind, and the picture is larger, and there are scroll options etc.

ClearBox Larger Picture

The ISSUE That Drove Me Crazy!

Before installing ClearBox onto Dirty South Ink’s website, I installed it on a test page in a different location on my computer and different location on the web server. Everything worked perfect. I was wow’ed! I was excited. I was having FUN!

So I installed it on Dirty South Ink and at first glance it looked right…that is until I tested it.

When I clicked on a thumbnail, instead of dimming the web page and displaying a larger image, it would show the image on a new blank white page. I posted on the Adobe Dreamweaver forum about my problem and nobody came to the rescue. So I did a little surfing.

The Fix

I come to find out that on a multi directory website, ClearBox installs all the JavaScript, CSS and other stuff in it’s own directory structure and not necessarily in the directory where you have the webpage you want to use it on.

The clearbox.js script wasn’t pointing to the right directory to where the page is located.

This is the line in clearbox.js that was causing the issue:

CB_ScriptDir=’js/clearbox’; // RELATIVE to your html file!

This is the simple fix that made everything right:

var CB_ScriptDir=’../js/clearbox’; // RELATIVE to your html file!

So, if you are a ClearBox user and you have this problem or any other problem, that would be the very first thing I would check. Make sure you have clearbox.js pointing to the right place.

Happy Htmling!

P.S. If you found this helpful, how about sharing the link to this page with someone..

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership


Fix For – ClearBox-LightBox Widget for Dreamweaver – Thumb Target (lightbox) Not Working Properly

Articles, Dreamweaver | 0 Comments

Share your thoughts!