JQuery Power Slider banner

 

jQuery PowerSlider Documentation

Beautiful jQuery based sliders in Dreamweaver

box jQuery PowerSlider

With the jQuery PowerSlider Dreamweaver extension you can create great looking jQuery based sliders that will help improve the user experience on your web pages. To save time, you can start from one of the 20 professional designs that come with the product and use the design editor app to customize it and make it blend perfectly with your website. There is no need to code or know jQuery and CSS as all the settings are done quickly from the Dreamweaver interface.

Download, installation and registration


Step 1. Download the product package

You can download jQuery Power Slider as a trial by pressing the "Free Trial" button, if you've already purchased it, you can download it from your account by pressing the "Download" button next to the license.

Step 2. Install the Dreamweaver extension

Once downloaded, install the extension by double clicking the "jQueryPowerSlider.mxp" file inside the package.

For a correct installation please make sure that you have the correct Extension Manager for your Dreamweaver version. You can download and install the right version here: http://www.adobe.com/exchange/em_download/

Step 3. Install the Design Editor AIR application

The extension uses an additional AIR application for image editing and resizing. You will find the ".air" installer file inside the extension package. You should install it in order for the extension to function properly.

 

Step 4. Locate the extension in Dreamweaver

You can find jQuery Power Slider extension on the "Insert bar" in Dreamweaver under the "jQuery Power Slider" category. To open the "Insert bar" go to "Window -> Insert Bar". Note: The "Insert bar" is not the same with the "Insert" option from the top menu. Click here for a quick tutorial!

Step 5. Register the product

A registration pop-up will appear when you open the main interface of jQuery Power Slider. If you are just trying the extension you can continue by clicking "Run as trial". If you want to register it, insert the serial number from your license.

selecting menu from Dreamweaver

You can always find your serial number and the latest version of the jQuery Power Slider extension in "My account" section on extendstudio.com. Login here and you will be automatically redirected to your products page: http://www.extendstudio.com/login.html.

 
 
 
 

Creating your first jQuery PowerSlider - with content images

In order to insert a slider in a page, first that page needs to be saved inside a Dreamweaver site. If you don't have a site created check this page for help: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

Once you have your site and page ready, press the "Insert" button from the insert bar.

selecting menu from Dreamweaver

The insert interface of the extension will appear. From here you can change the name, dimensions, number of slides and the main skin of the slider.

selecting menu from Dreamweaver

Click the "Insert" button to add the jQuery PowerSlider in the page. You can continue editing the look of the slider or its content using the inspector interface. The inspector interface will appear automatically whenever you select an inspectable component of the slider or the slider itself. Select the slider now and the interface bellow will appear in your Dreamweaver.

selecting menu from Dreamweaver

On the General tab you can see a list with all the slides from your jQuery PowerSlider.

selecting menu from Dreamweaver

Before you add the images on the slides, remove the default content. You can remove it quickly by pressing the red sign button bellow the list (last button on the right).

Now press on the browse button corresponding to that slide to add the image. A browse window will appear from where you can navigate your computer and select the picture or you can insert an URL address.

After you have selected an image, select another slide from the list and repeat the process as with previous slide.

To add a new image slide press on the button with an image and a green plus (second on the left).

 
 
 
 

Creating your first jQuery PowerSlider - with HTML content

In order to insert a slider in a page, first that page needs to be saved inside a Dreamweaver site. If you don't have a site created check this page for help: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

Once you have your site and page ready, press the "Insert" button from the insert bar.

selecting menu from Dreamweaver

The insert interface of the extension will appear. From here you can change the name, dimensions, number of slides and the main skin of the slider.

selecting menu from Dreamweaver

Click the "Insert" button to add the jQuery PowerSlider in the page. You can continue editing the look of the slider or its content using the inspector interface. The inspector interface will appear automatically whenever you select an inspectable component of the slider or the slider itself. Select the slider now and the interface bellow will appear in your Dreamweaver.

selecting menu from Dreamweaver

On the General tab you can see a list with all the slides from your jQuery PowerSlider.

selecting menu from Dreamweaver

You can remove all default content from the current slide by pressing the red sign button bellow the list (first button from the right).

To add a new HTML content box you can press the button with the blue image (second button from the right). A new DIV will be added inside the current slide.

You can add a new HTML content slide by pressing the button with the HTML sign (first button from the left). A new slide with default content will be added in your jQuery PowerSlider.

Content boxes can be moved around in Dreamweaver Design View by drag and drop. Once you select a box an inspector interface will appear so you can modify the properties of that box.

selecting menu from Dreamweaver
 
 
 
 

Download JQuery Slideshow Trial
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6
  • Adobe Dreamweaver CS6