Modifying PowerGallery’s Slideshow galleries

The 3 new slideshow galleries provided with PowerGallery 1.1 include a number of different settings that can be turned on or off manually.  With a simple edit of the gallery.js file, you can customize the speed of the transition, whether or not to display descriptions, and more.

The following tutorial explains the process for turning these settings on or off and what settings are available with the current slideshow galleries.

What you need to start:

  • PowerGallery 1.1 functioning on your live server.
  • Web Browser (Firefox, Internet Explorer, Safari etc.)
  • WYSIWYG or Text Editor for minor code changes.
    • What can be modified?

    The following settings can be changed for each slideshow gallery. As you can see from the table below, not all the settings are available for each gallery.

      Blinds Dissolve Wide
    Show Thumbnails   Yes Yes
    Display Image Descriptions Yes Yes Yes
    Display Border Yes Yes Yes
    Change Transition Delay Yes Yes Yes
    Show Controller   Yes Yes
    Display Progress Bar Yes    
    Vertical/Horizontal blind Yes    
    increase stripes/blinds Yes    
     
    NOTE:Refer to this table to determine which slideshow gallery provides the options you are looking for. Then, proceed with this tutorial to create your own custom version of that gallery.
    Duplicate the Gallery

    When customizing an existing gallery, we recommend you duplicate the gallery and give your custom one a new name. Follow the instructions for duplicating and creating your custom gallery folder.

     
    NOTE:You should have already installed PowerGallery and made sure it is running properly on your system before making any custom changes to the pages or galleries.
    1. Open the folder containing your PowerGallery files.
      You could download the files straight from your remote server, or open the files that you unzipped to your computer when first using PowerGallery.
    2. Open the galleries directory.
    3. Select the folder representing the slideshow gallery you wish to modify.
      • Slideshow_blinds
      • Slideshow_dissolve
      • Slideshow_wide

    4. Press Ctrl (Cmd) + C to copy, and then Ctrl (Cmd) + V to paste a copy of the folder.
      If you are using the Dreamweaver Files panel, choose Ctrl (Cmd) + D to duplicate instead of having to copy and paste.
    5. Rename the new folder with the name you wish to give your new design.
      6. Updating the XML file

      The design.xml file within each gallery folder contains the name for the gallery that displays on the Choose Design page of PowerGallery.

    6. Open the directory you just created.
    7. Open the admin folder.
    8. In your preferred editor such as Dreamweaver, open design.xml.
    9. Replace the text within the <title> tags with your desired title.

    10. Replace the text within the <description> tags with a description.
    11. Press Ctrl (Cmd) + S to save your changes.
    12. Close the file.
    Changing Settings

    Now that you have create a new folder for your gallery, you can make all the necessary custom changes to your gallery from within this folder.

    1. From within your new folder, open the js folder.
    2. Open the gallery.js file.
      This file contains the settings for the gallery.
    3. Locate the section of code near the top of this file, that appears similar to the image below.

    4. Change each option as follows:
      5. Display/Hide Image Titles

      showCaption
      Enter true to display the image descriptions, enter false to hide them.

      Display/Hide the Progress Bar
      showProgressBar
      Enter true to display the progress bar, enter false to hide it.
      Display/Hide Chrome Border

      showChrome
      Enter true to show the border (chrome) around the image and thumbnails, enter false to hide it.

      Change Delay Speed

      delay
      Change the numeric value to represent how long of a delay you want between image transitions.
      This delay is in milliseconds (8000 = 8 seconds).

      Horizontal/Vertical Axis

      axis
      Enter 'horizontal' for the blind effect to occur from top to bottom, enter 'vertical' for the effect to go from left to right.
      This must be entered within the single quotations.

      Number of Blinds

      blindSections
      Enter the number of blinds (sections) to display during the transition.

      Display/Hide Playback Controls

      showController
      Enter true to display the playback controls, enter false to hide them.

      Display/Hide Thumbnails

      showThumbnails

      Enter true to display the thumbnails below the image, enter false to hide them.

    5. Once you have modified the settings as desired, press Ctrl (Cmd) + S to save this file.
    6. Using your preferred upload method, upload the modified file to the galleries directory of your live PowerGallery installation.

    Log into your PowerGallery admin and this design should automatically appear in the list of available designs on the Choose Design page.

    Last Updated: October 27, 2010
    Feedback on this tutorial?

    If you did not find this helpful or you are stuck on a particular step, click here to let us know what we can do to improve this tutorial.

      • Required *
      • Invalid format.Please enter a full email address
        Please provide a comment
      • Security Code
        Entered text does not match; please try again

    This form was built using CSS Form Builder.