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 http://188.8.131.52/~dirtysou/.
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.
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!
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.
Notice when clicking the thumbnail it will dim the website behind, and the picture is larger, and there are scroll options etc.
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 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.
P.S. If you found this helpful, how about sharing the link to this page with someone..