{{indexmenu_n>800}} ====== CP Content-Part ====== \\ The module appears as a new content part: plug-in: SliderJS\\ {{:3rd-party-modules:sliderjs:sliderjs_screenshot001.jpg|}}\\ ===== Folder List ===== \\ The folder list reflects all folders from the PHPWCMS file center the actual user has rights to access to.\\ \\ \\ === The concept === \\ 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:\\ {{:3rd-party-modules:sliderjs:sliderjs_screenshot023.jpg|}}{{:3rd-party-modules:sliderjs:sliderjs_screenshot024.jpg|}} \\ \\ === Select Folders === \\ {{:3rd-party-modules:sliderjs:sliderjs_screenshot025.jpg|}}\\ Select the folder(s) you want the images (all within this folder) to be added to the slider.\\ \\ \\ === Add Title + Description === \\ {{:3rd-party-modules:sliderjs:sliderjs_screenshot026.jpg|}}\\ 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.\\ \\ \\ === HTML Caption + CSS Class === \\ {{:3rd-party-modules:sliderjs:sliderjs_screenshot027.jpg|}}\\ **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.\\ \\ \\ === Implementation === \\ | ^ captions^ html^ title^ description ^ ^ BXSLIDER | yes | no | alt="[plain text only]" | title="[plain text only]" | ^ SlidesJS | no | no | | | ^ NIVO Slider | yes | yes | alt="[plain text only]" |
[html or plain text]
| ^ Camera Slideshow | yes | yes | |
[html or plain text]
| \\ 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. \\ \\ ===== Sliderplugin ===== \\ {{:3rd-party-modules:sliderjs:sliderjs_screenshot005.jpg|}}\\ 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.\\ 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! **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).\\ \\ === SlidesJS === {{:3rd-party-modules:sliderjs:sliderjs_screenshot013.jpg|}}\\ The Options should be self explaining, play around with them.\\ ^ Themes ^ Effects ^ Captions ^ Advanced Options ^ %-width ^ | 1 | 2 | no | yes | no | **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/\\ \\ \\ === bxslider === ^ Themes ^ Effects ^ Captions ^ Advanced Options ^ %-width ^ | 1 | 3 | yes | yes | yes | **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\\ \\ \\ === NIVO Slider === **Pro Version only:** ^ Themes ^ Effects ^ Captions ^^^^ Advanced Options ^ %-width ^ ^ ^ ^ html ^ title ^ description ^ CSS-Class ^ ^ ^ | 4 | 16 | yes | alt="[plain text only]" |
[html or plain text]
| yes | yes | yes | **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:

my caption

 \\ \\ === Camera Slideshow === **Pro Version only:** ^ Themes ^ Effects ^ Captions ^^^^ Advanced Options ^ %-width ^ ^ ^ ^ html ^ title ^ description ^ CSS-Class ^ ^ ^ | 30 | 28 | yes | |
[html or plain text]
| yes | yes | yes | **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:

my caption

 \\ \\ ===== Notes ===== \\ 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!