Versión para imprimir | Translate this page

DW CS4 only. This widget allows you to add a thickbox (modal window) to your images. Even more, it will let you create a whole gallery using the thickbox.

You can see a demo here

Click Here to download the extension

The steps to use it are quite simple: Place your cursor where you want to add your gallery, select "Insert panel->TCN Widgets tab->Thickbox Gallery" and two sample images and all the code needed are added to the document.

After that, it's your job to add more images to the gallery following the html used by the sample images:

<a href="images/thickbox_demo_img1.jpg" class="thickbox" rel="gallery1"><img src="images/thickbox_demo_thumb1.jpg" width="100" height="66"/></a>

There are some things you should take into account:

1. It's very likely that you won't see the images and the required files won't be added until you save your page. When you save the page, you will prompted to save those files too (and you should say yes).
2. The linked image can be different from the original one: In the code above, I'm using a thumbnail that will make the original one open inside the thickbox. You can use the same image both for the src and the href attributes if you want to
3. The rel attribute will make the images that share it behave as a slide and a prev and next links will appear in the thickbox to jump from one pic to another. If you don't want to create it and you want the images to be displayed independently, just remove that attribute.
4. All the effect works thanks to the thickbox class in the a tag! Don't forget to add it!
5. The width and height attributes are self explanatory.
6. No need to say that you can edit the sample images (and remove them from the images folder) to add yours.

Now, the tricks to make your work easier:

• - To add more images, just copy and paste, but make sure that you also select the a tag wrapping the image
• - The property inspector is the best way to edit them: Select the image, change its src and link and click the reset button to get its current dimensions.

 

Click Here to download the extension

[Top]