• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How do you change an image in Dreamweaver multiple times?

Hi all,

Just wondering if any of you can help me out with my latest problem?

I am working on rebuilding my website and am doing it in Dreamweaver (the original was done completely in Flash).
The problem is for the work samples page I want to have thumbnails that when clicked on, brings up a large image
below the thumbnails of the relevant piece of work and change when another thumbnail is clicked.

However the only way I know of doing this is to have multiple copies of the page, just with the large image changed.
I'm sure there must be a better way of doing this though as my method would mean I have to create loads of pages and every time someone clicked on a thumbnail a whole new page would have to load instead of just one image.

I hope I made some sort of sense and any advice would be greatly appreciated.
Ok cheers for the links.

Both suggestions seem to do what I want, however both seem to require
other components in order to work e.g. "Slimbox 2.0 requires the jQuery library".

I downloaded jQuery which seems to be a page of code but do I just include that
in my dreamweaver site folder to make Slimbox work or do I have to replace my
current css styles sheet? Also what about the Slimbox.css page? Does that go in the jQuery page of code?

Sorry if this seems a really silly question but this is my first time using dreamweaver
on a project, so I'm still at the very basic level and despite looking at the tutorials on
the jQuery site I still don't really understand what it is or what it does.

I'll carry on looking at the tutorial and FAQs but any hints would be great :icon_confused:
Oh and I've tried visiting here which seems to be what I need but as I'm on dial-up Videos are a no go area I'm afraid :(

I've also tried here but it states "Basic knowledge of JavaScript and the document object model (DOM) is required." Both of which I have no idea about so I'm beginning to think I need some tutorials that are a lot more basic but that enable me to create my portfolio/sideshow page without having to spend months learning some other programs. Any ideas?

Stationery Direct

Staff member
I did this ages ago so will be a bit rusty, all I did from what I remember was add these 2 lines of code to each page that you wanted to use Slim Box on...

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>

Ensure mootools.js and slimbox.js are in your root directory in a folder called js

Ensure you upload the folder with the slimbox images into the correct directory that it says, root directory I think.

Can't remember if I had to edit a few of the files, think so (read the instructions), if I remember rightly it was only file/folder paths if anything.

Then add the code where the image is to display on the page, for example to link from some text to an image add...
<a href="/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
...or to link from an image such as a thumbnail to the larger image add...

<a href="/images/image-1.jpg" rel="lightbox" title="my caption"><img src="/images/image-2.jpg"/></a>
I then uploaded all files as above to the server and that's it. It will only run/work on your server not from your local machine.

Don't know what jQuery is/was and never did anything with that. Try as above first, jQuery may just be something that runs on servers, I don't know :icon_dunno:

Hope that helps (probably not)
Cheers for the help Boss.
I've managed to get a test page working finally although it was only after I copied the sample that was part of the download of Slimbox 2. Which means I'm in the position of "Horray its working.....but how/why?"

Something that is really confusing me is on the setup instructions:
"Include the script in the header of your page, after the inclusion of the jQuery / Mootools library."

Surely it does not mean copy and paste the jQuery / Mootools library into the code of your web-page?

Anyway thanks for your help. I'm sure I will be posting again when I try to create my real portfolio page
instead of the test page I have at the moment, but I've had enough brain pain for today!
Yeh so it means "Include the mootools.js in my root directory in a folder called .js" rather than include the code itself. I assumed thats what it meant. Still don't understand how I've got it working though! lol