Search Login

General settings in JMS Slider Layer module

 

To go to JMS Slider Layer configuration page, firt user must login with administrator account in backend. Then go to Modules and Services > Jms Slider layer and click to Configure

In that configuration page, we can see all general settings of the JMS Slider Layer. 

 

Information

  • 1. Slides list: Display all slides in the slider, drag and drop to change the ordering in front-end.
  • 2. Slider Settings: General Setting - #2, Navigation Setting - #3, Image Setting - #4.
  • 3. Add slide button: Click here to add a new slide in the slider.
  • 4. Layers manager: Each slide have multi layers, click here to manage layers of slide.
  • 5. Duplicate: click on this button to create a duplicate of the current slide.
  • 6. Enable/Disable: Change the status of each slide, if a slide is Enable, it will be displayed in front-end. If it's Disable, it will not display in front-end.
  • 7. Edit: Click here to edit the details of each slide (general setting and background & thumbnail - #5)
  • 8. Delete: Click on this button to delete the slide


 

General setting

  • 1. The mode of the slider:

    - Boxed: Slider will always fill the wrapping container horizontal, following any horizontal sizes. Height of slider will be calculated based on the Grid Sizes and current browser size. Max. height of Slider will be equal to the current gridheight.

    - Fullwidth: Slider will always fill the full width of the browser, independent of the wrapping containers width. Height of slider will be calculated based on the Grid Sizes and current browser size. Max. height of Slider will be equal to the current gridheight.

    - Fullscreen: Slider width and height will follow the exact width and height of the Browser size.

  • 2. Slider Class Suffix: By enter a text here, you added a Class Suffix to the cover div of slider. Then you can change the style of this slider by adding some custom css.
  • 3. Touch Enabled: Enable/Disable Swipe Function on touch devices (phone, tablet...).
  • 4. Delay: The time one slide stays on the screen in Milliseconds .
  • 5. Grid Height: This Height of the Grid where Layers are displayed in Pixel.

    The Slider size will always depend on the Wrapping container size and on the Layer Grid Sizes (defined via the options gridwidth and gridheight).

    The Layer Grid is the parent container of any contents within the Slides. Layers like Image, text, video, button, shapes are contents and they will be shown relative positioned within the Layer Grid.

  • 6. Grid Width: This Width of the Grid where Layers are displayed in Pixel.
  • 7. Slider Shadow: Select the style of the shadow in the boxed style of the slider.
  • 8. Spinner: Select the Layout of the Loader in the Slider.
  • 9. On Hover Stop: Select Yes if you want the Timer stop when user mouse over the Slider.
  • 10. Hide Timer Bar: Enable/Disable the Timer Bar
  • 11. Timer Bar Position: Select the position of the Timer Bar
  • 12. Use Google Font: If you want to use google font for your slider, you can enter the google font family here. For example "Raleway:100,200,300,700,800,900".

 

Navigation setting

  • 1. Keyboard Navigation: on/off – Allows to enable/disable the keyboard navigation.
  • 2. Navigation Type: Select the Navigation Type: Bullet/Thumbnail
  • 3. Navigation Arrows: Select the position of the navigation arrows: next to the bullets/thumbnails or independent position
  • 4. Navigation Style: Select the style of Bullets and Arrows.
  • 5. Navigation Horizontal Align: Horizontal Align of the Navigation bullets / thumbs (center, left, right).
  • 6. Navigation Vertical Align: Vertical Align of the Navigation bullets / thumbs (center, top, bottom).
  • 7. Navigation Horizontal Offset: The Horizontal Offset position of the navigation depending on the aligned position.
  • 8. Navigation Vertical Offset: The Vertical Offset position of the navigation depending on the aligned position.

Image setting

  • 1. Image Resize: Enable/Disable the auto resize feature for background image.
  • 2. Image Width: The width is used for resize background image and Max-Width.
  • 3. Image Height: The height is used for resize background image and Max-Height.
  • 4. Thumbnail Width: The width of the thumbnail image (in pixel)
  • 5. Thumbnail Height: The height of the thumbnail image (in pixel)

 

Detail slide

General setting for detail slide

This is a Regular / Classic slider type. You can define 1+ Slides per slider, and they will be shown as slideshow one by one. In doing so you will only see 1 Slide in the same time. Each Slide can have an individual Delay time, elements and transition type. Slides can have Ken Burns effect, Parallax options etc.

  • 1. Title: The title of the slide.
  • 2. Language: Select the language of the slide.
  • 3. Transition: Select the appearance transition of this slide.
  • 4. Slot Amount: The number of slots or slices the Slide image is "split" to. Only available for Transitions with Slots and Slices.
  • 5. Master Speed: This option defines the duration of the Transition in ms (milliseconds). The value "default" is 300 (0.3 sec).
  • 6. Delay: A new delay value for this Slide. If it is defined, it will overwrite the default delay time in general setting of the module.
  • 7. Link: not required and has not yet used.
  • 8. Target: The target of the Link for the whole slide pic.
  • 9. Ken Burn: Enable/Disable Ken Burn effect.
  • 10. Background Repeat: The background-repeat property sets if/how a background image will be repeated.
  • 11. Background Position: Specifies the Image Align within the slide. It works exactly how the Background Image Position works.
  • 12. Background Position End: Specifies the Image Align within the slide.
  • 13. Background Fitting: The background-size property specifies the size of the background images.

    "normal": Do nothing

    "cover": Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

    "contain": Scale the image to the largest size such that both its width and its height can fit inside the content area

  • 14. Background Fitting End: Use only a Number . i.e. 300 will be a 300% Zoomed image where the basic 100% is fitting with width or height.
  • 15. Active: Enable/Disable the slide.




Background & Thumbnail setting in each slide
  • 1. Background Type: Select the background type (image or color).
  • 2. Background Image: Upload the background image.
  • 3. Thumbnail: Select thumbnail for background from list files in modules/jmssliderlayer/views/img/thumbs/ folder.


With backgound type is color, you can select the backgound-color from color board.

 

Layers manager

  • 1. Layers grid: You can see all layers in this section, drag and drop layers to anywhere you want .
  • 2. Add new Layer to the slide buttons: text layer, image layer and video layer .
  • 3. List all layers in the slide, drag and drop for changing ordering of layers. Click on delete button in each Layer to delete it.
  • 4. When you click on layer in the list or click on layer on grid, detail of that layer will display on left side


  • Title : Title of layer.
  • Layer Class : class in css of the layer. These are Styling classes created in the settings.css. You can add unlimited Styles in your own css file, to style your captions at the top level already
  • Data X : Possible Values are 'left', 'center', 'right', or any Value between -2500 and 2500
  • Data Y : Possible Values are 'top', 'center', 'bottom', or any Value between -2500 and 2500.
  • Start : The timepoint in millisecond when/at the Layer should move in to the slide
  • End : The timepoint in millisecond when/at the Layer should move out from the slide
  • Incoming Animation : choose effect when this layer income on slider
  • Outgoing Animation : choose effect when this layer outcome on slider
  • Easing : The Easing Art how the layer is moved in to the slide
  • Text or html : Fill text or htl will show
  • Incoming Split Text : Split Text Animation (incoming transition) to 'words', 'chars' or 'lines'. This will create amazing Animation Effects on one go, without the needs to create more layers
  • Outgoing Split Text : Split Text Animation (incoming transition) to 'words', 'chars' or 'lines'. This will create amazing Animation Effects on one go, without the needs to create more layers

Facebook Fan Box