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 01:25] Peter Bracher |
3rd-party-modules:sliderjs:sliderjs-docu:sliderjs-docu-cp [2018/06/03 18:08] (current) |
||
|---|---|---|---|
| Line 45: | Line 45: | ||
| === Add Title + Description === | === Add Title + Description === | ||
| \\ | \\ | ||
| - | 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_screenshot026.jpg|}}\\ |
| - | {{:3rd-party-modules:sliderjs:sliderjs_screenshot003.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, __the latter__ one will be used then as caption.\\ | + | 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.\\ |
| - | \\ | + | |
| - | {{:3rd-party-modules:sliderjs:sliderjs_screenshot011.jpg|}}\\ | + | |
| \\ | \\ | ||
| \\ | \\ | ||
| - | === HTML 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 ^ | ||
| Line 70: | 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> | ||
| \\ | \\ | ||
| \\ | \\ | ||
