Differences

This shows you the differences between two versions of the page.

--- 3rd-party-modules:sliderjs:sliderjs-docu:sliderjs-docu-cp [2013/11/04 18:01]
Peter Bracher
+++ 3rd-party-modules:sliderjs:sliderjs-docu:sliderjs-docu-cp [2018/06/03 18:08] (current)
@@ Line 9: / Line 9: @@
 ===== 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.\\
-<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>
+\\
+\\
+=== 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.\\
-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.\\
 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 ^
 ^ BXSLIDER    | yes | no  | alt="[plain text only]" | title="[plain text only]" |
@@ Line 29: / Line 67: @@
 ^ NIVO Slider | yes | yes | alt="[plain text only]" | <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 66: / Line 105: @@
 **Pro Version only:** **Advanced Options**\\
 only callback functions. See: http://www.slidesjs.com/\\
+\\
 \\
-=== NIVO Slider ===
+=== bxslider ===
 ^ Themes ^ Effects ^ Captions ^ Advanced Options ^ %-width ^
-| 4 | 16 | yes | yes | yes |
+| 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]" | <div>[html or plain text]</div> | yes | yes | yes |
 **Dimensions**
@@ Line 82: / Line 140: @@
 \\
+Captions CSS-Class - get access with:
+<code html>
+<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>
+</code>
+\\
+\\
+=== Camera Slideshow ===
+**Pro Version only:**
+^ Themes ^ Effects ^  Captions  ^^^^ Advanced Options ^ %-width ^
+^ ^ ^ html ^ title ^ description ^ CSS-Class ^ ^ ^
+| 30 | 28 | yes |  | <div>[html or plain text]</div> | 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:
+<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>
+\\
+\\
 ===== Notes =====

3rd-party-modules/sliderjs/sliderjs-docu/sliderjs-docu-cp.1383584476.txt.gz · Last modified: 2018/06/03 18:06 (external edit)

Show page Old revisions