Example: step by step


For example you have bought this extension, and don’t know what to do next, it isn’t a problem, you can use our example as a basis!

Installing Adobe Dreamweaver extension

Download your extension S4W.JQImageScroller.zxp from your customer area at our site. Download and install our Extension Manager, load it, click install button and then select your ZXP extension.


scroller can be inserted in the web page through the menu option "Insert -> Solutions4Website -> HTML5 Image Scroller". It is also accessible through 'HTML5 Image Scroller' button on the FD24 category of the Insert Panel (Window > Insert).

Inserting object in the page through the menu option.

  1. Open Adobe Dreamweaver.
  2. In the Dreamweaver authoring tool, select File -> New.
  3. In the New Document dialog box, select HTML file, and click OK.
  4. Select File -> Save. Select a folder to contain your application, name the HTML file, and then click OK.
  5. Select Insert -> Solutions4Website -> HTML5 Image Scroller.

  6. You have to define the destination folder (you can choose or create any folder you want). There (in this folder) will be created folder 'scroller_files' and inside this folder will be placed scripts and style files and also several on-default images.

  7. Then just press OK.

Note: Before you insert Object into new web page, save the HTML file.

Enter the Solutions4Website Wizard

To adjust the component appearance and change scroller content and structure use Wizard. To do this, click mouse on the blue tab 'HTML5 Image Scroller: JQImageScroller' above the scroller in 'Design view'.

Entering the Solutions4Website Wizard

  1. Click mouse on the blue tab 'HTML5 Image Scroller: JQImageScroller' above the scroller in 'Design view'.
  2. Click 'Edit scroller' in Dreamweaver 'Properties' panel.

Edit scroller content and appearance

Through wizard you can change strucutre of the scroller and its appearance.

Open Solutions4Website Wizard.

  1. Enter Solutions4Website Wizard.
  2. Open 'Image list' category.
  3. Edit the structure and appearance of your scroller.
  4. Then just press OK and close window.


To preview your page you’ll need to save your document Select File > Save, than Select File > Preview In Browser, and then select one of the listed browsers or press F12 (Windows) or Option+F12 (Macintosh) to display the current document in the primary browser. Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current document in the secondary browser.

That’s all!