NAVIGATION
[[CP Content-Part]]
Differences
This shows you the differences between two versions of the page.
|
3rd-party-modules:sliderjs:sliderjs-docu:sliderjs-docu-cp [2013/11/13 00:29] Peter Bracher |
3rd-party-modules:sliderjs:sliderjs-docu:sliderjs-docu-cp [2018/06/03 18:08] (current) |
||
|---|---|---|---|
| Line 9: | Line 9: | ||
| ===== Folder List ===== | ===== Folder List ===== | ||
| \\ | \\ | ||
| - | {{:3rd-party-modules:sliderjs:sliderjs_screenshot002.jpg|}}\\ | ||
| - | |||
| The folder list reflects all folders from the PHPWCMS file center the actual user has rights to access to.\\ | The folder list reflects all folders from the PHPWCMS file center the actual user has rights to access to.\\ | ||
| - | <note>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</note> | + | \\ |
| - | <note important>You will only see public and your own private folders/images in the Plugin Content Part. PHPWCMS does in general not allow access to private folders from others, even as admin you won't see private folders/images of other BE-Users!</note> | + | \\ |
| + | |||
| + | === 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.\\ | Select the folder(s) you want the images (all within this folder) to be added to the slider.\\ | ||
| - | With click to the arrow on the left you can open/close the folder and get a preview of all the images.\\ | ||
| - | {{:3rd-party-modules:sliderjs:sliderjs_screenshot003.jpg|}}\\ | ||
| - | 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, __the latter__ one will be used then as caption.\\ | ||
| \\ | \\ | ||
| - | {{:3rd-party-modules:sliderjs:sliderjs_screenshot011.jpg|}}\\ | + | \\ |
| + | |||
| + | === 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.\\ | **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.\\ | 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.\\ | ||
| - | <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> | + | 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 === | ||
| \\ | \\ | ||
| - | Implementation\\ | ||
| | ^ captions^ html^ title^ description ^ | | ^ captions^ html^ title^ description ^ | ||
| ^ BXSLIDER | yes | no | alt="[plain text only]" | title="[plain text only]" | | ^ BXSLIDER | yes | no | alt="[plain text only]" | title="[plain text only]" | | ||
| Line 30: | Line 67: | ||
| ^ NIVO Slider | yes | yes | alt="[plain text only]" | <div>[html or plain text]</div> | | ^ NIVO Slider | yes | yes | alt="[plain text only]" | <div>[html or plain text]</div> | | ||
| ^ Camera Slideshow | yes | yes | | <div>[html or plain text]</div> | | ^ Camera Slideshow | yes | yes | | <div>[html or plain text]</div> | | ||
| + | \\ | ||
| + | <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> | ||
| \\ | \\ | ||
| \\ | \\ | ||
| Line 67: | Line 105: | ||
| **Pro Version only:** **Advanced Options**\\ | **Pro Version only:** **Advanced Options**\\ | ||
| only callback functions. See: http://www.slidesjs.com/\\ | only callback functions. See: http://www.slidesjs.com/\\ | ||
| + | \\ | ||
| \\ | \\ | ||
| Line 83: | Line 122: | ||
| many, see: http://bxslider.com/options\\ | many, see: http://bxslider.com/options\\ | ||
| \\ | \\ | ||
| + | \\ | ||
| === NIVO Slider === | === NIVO Slider === | ||
| Line 132: | Line 171: | ||
| **Advanced Options**\\ | **Advanced Options**\\ | ||
| many, see: http://www.pixedelic.com/plugins/camera\\ | many, see: http://www.pixedelic.com/plugins/camera\\ | ||
| + | \\ | ||
| + | |||
| + | Captions CSS-Class - get access with: | ||
| + | <code html> | ||
| + | <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> | ||
| + | </code> | ||
| + | \\ | ||
| \\ | \\ | ||
