CP Content-Part

The module appears as a new content part: plug-in: SliderJS

The folder list reflects all folders from the PHPWCMS file center the actual user has rights to access to.

The concept of choosing the images for the slider is to select all the images within one or more folders rather than single images from the filecenter as you're used to do in other PHPWCMS contentparts

You will only see public and your own private folders/images in the Plugin Content Part. PHPWCMS does in general not allow BE access to private folders from others, even as admin you won't see private folders/images of other BE-Users!
You can only add and edit active folders, inactive folders do appear but are not editable, inactive images do not appear.

The slider plugin also behaves differently from PHPWCMS regarding the frontend!
Normal PHPWCMS Content Parts always show all images in Frontend, regardless of the active/inactive/private/public status of the image in the PHPWCMS-file-center. In these Contentparts the image remains visible in Frontend even if you delete the image later on in the PHPWCMS-file-center.

The SliderJS Plugin behaves differently:
When rendering the images for the slider in Frontend, the plugin looks back to the PHPWCMS-file-center, if:

• the image
• or the folder its in
• or all its parent folders

is active or not or deleted
only when the image and the folder and all its parent folders are active, the image appears in the slider in Frontend!
A try to visualize this:

Select the folder(s) you want the images (all within this folder) to be added to the slider.

With click on the arrow on the left you can open/close the folder and get a preview of all the images.
Here you can add a title and a description to each image. Depending on the slideshow the title will be added to the alt-attribute and the description to the title-attribute of the image or a special div, the latter one will be used as caption.

Pro Version only: Some Sliders accept html in the description. To facilitate html we added a WYSIWYG-Dialog where you can edit and format your html content. With click on OK in the dialog the html-code is added to the corresponding text-field and rendered as html in frontend.
For sliders who do accept captions, but only plain text, all html-tags will be stripped out! These sliders show the caption only in ONE LINE, so all linebreacks will be ignored in frontend.
To go even a step further, you can add to each caption a special CSS-Class and style the caption to whatever you like with CSS. See the sliders below to get an idea of how to access the captions container with CSS.

<note important>Title and description added to the images here remain attached to this contentpart and not to the image itself, ie. you will lose the contents when deleting the contentpart.</note>

The module comes with 4 jQuery Sliders installed: SLIDESJS, bxslider, and Pro Version only: NIVO Slider and Camera Slideshow
There might be more in the future. It's important to know, that all sliders included in the module are free to use on any website, the JavaScript files and themes are included untouched, please see the license infos in the respective plugins folder.
<note important>Free modules and free scripts are free of cost but not posible without a lot of effort! So, if you use this module with one of the sliders please donate to us (see button on the left under the navi) and to the authors of the plugin on their sites!</note>

Pro Version only: Simple/Advanced Style
With simple style, the dimensions given are used to render the images and to set the container for the slider in frontend, everything will work fine.
With advanced style, you'll have to edit the CSS files according to the plugin and theme you use. With advanced style you can get responsive results and more but you need knowledge of CSS and HTML.

Pro Version only: Advanced Options
Write JS Option/Value directly into the caller function of the slider like:
option:value,
Note: the advanced options are inserted at the very end of the caller function, so you can overwirte previous definitions. The code takes care of the last comma (to delete it if necessary).

The Options should be self explaining, play around with them.

Dimensions
The dimensions are used to render the images AND CROP them.
You can use simple fixed styling or Pro Version only advanced styling in: [theme].css: .slides_container {width:XXXpx;} and .sliderjsmodule {width:XXXpx;}
For quality reasons, the dimensions should not be less than the maximum possible viewport in your layout.
For responsive layouts set the dimensions equal to the biggest viewport, although the plugin shows the images with 100% width, depending on your CSS settings.
The width must be the same as in the CSS theme file!

Pro Version only: Advanced Options
only callback functions. See: http://www.slidesjs.com/

Dimensions see above
For BXSLIDER, see [theme].css: .sliderjsmodule {width:XXXpx;}
Width must be the same as in the CSS theme file!
BXSLIDES does allow %-width, but bear in mind that the images are rendered with the dimensions set in the form.

Pro Version only: Advanced Options
many, see: http://bxslider.com/options

Pro Version only:

Dimensions see above
For NIVO SLIDER, see nivo-slider.css: .sliderjsmodule {width:XXXpx;}
Nivo Slider allows width:100% but bear in mind that the images are rendered with the dimensions set in the form.

Advanced Options
some, see: http://docs.dev7studios.com/jquery-plugins/nivo-slider

Captions CSS-Class - get access with:

<div class="sliderjsmodule">
  <div class="slider-wrapper theme-default">
    <div id="nivoslider74" class="nivoSlider">
      <div class="nivo-caption">
        <div class="myClass">
          <p>my caption</p>
        </div>
      </div>
    </div>
  </div>
</div>

Pro Version only:

Dimensions see above
For Camera Slideshow, see camera.css: .sliderjsmodule {width:XXXpx;}
Camera Slideshow allows width:100% but bear in mind that the images are rendered with the dimensions set in the form.

Advanced Options
many, see: http://www.pixedelic.com/plugins/camera

Captions CSS-Class - get access with:

<div class="sliderjsmodule">
  <div class="camera_wrap camera_amber_skin" id="camera_wrap_74">
    <div class="camera_fakehover">
      <div class="camera_target_content">
        <div class="cameraContents">
          <div class="cameraContent cameracurrent">
            <div class="camera_caption fadeIn myClass">
              <div>
                <p>my caption</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

The script does a check of the selected JS-library in the template added to the category where the actual contentpart is in.
The slider only works when jQuery 1.8 or higher is selected, with mootools nothing is displayed in frontend (just a warning as a html-comment), with jQuery lower than 1.8 you'll get JS errors in frontend!