Free code

Adding widgets to your Dreamweaver CS6 site

Dreamweaver has a few ways of adding effects to your site that would ordinarily take longer to code using Javascript or Jquery.  By adding widgets, spry or behaviours to your site you can circumvent having to uise these more complicted languages. Most of these effects can be customized after you've added them and some can even be customized before adding them to your code.

For this article, we'll add a zoom feature that will allow users to zoom in to see a product on a site. To get started, place the cursor where you want the effect added in your Coding window and then locate the 'Widget…' command under Insert at the top of the Dreamweaver workspace:
widget1

This will open up a window prompting you to either insert a widget or open the widget browser. Click the blue 'Widget Browser' option to open up a gallery to select a widget:

widget2

After you select that blue text, a large browser window should open up that shows you a list of widgets you can add to your site. In this window be sure to click the 'Adobe Exchange' option at the top of this screen beside the 'My Widgets' text:

widget3

In this browser you have the option of searching for various effects. We want to use the 'jqzoom' effect so we'll select that one. Doing so will open a screen that shows you a preview of how this effect will look once you add it to your website. On the side, you also have opens to customize the effect before adding it to yout site by clicking the 'Configure' option. Below the preview window you can also save this Widget as a preset for when you wish to insert it on your website. We'll name ours 'Zoom 1' to find it more easily:

widget4

Now that we've saved our preset, we'll close this window off and return to Dreamweaver. Next we'll go back into the 'Widget…' command under Insert and under the Widget option select the 'jqzoom' effect and under Preset select the 'Zoom 1' preset and press ok:

widget5

This will insert the effect on our page. Now it's just a matter of switching the image names with our own images. You'll need a small image for the regular view and a larger on for the zoom effect to work:

widget6

And now we have our finished zoom effect for a drumstick product:

widget7

In case you're wondering where the magnifying glass came from, we simply added that icon onto the smaller image in Photoshop before saving the image. It lets anyone viewing the image know that they can zoom in to see more detail.  You can also tweak a bit of the commands that the widget inserted into your html window. In here you can change the zoom speed, zoom box size, etc:

widget8

 

 

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image