How do you change an image in Dreamweaver multiple times?

[sweetums]

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.

[Helen]

Try using Lightbox

[Boss Hog]

Take a look here for other Light Box options...

http://www.graphicdesignforums.co.uk...x-options.html

[sweetums]

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

[sweetums]

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?

[Boss Hog]

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)

[sweetums]

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!

[Boss Hog]

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

No it doesn't mean that, I think mootools.js is the mootools library.

[sweetums]

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