July.22.2013

SJ Dynamic Slideshow User-guide

Written by SA Dang Truong

Published in Extension User-Guides

(0 votes)

This guide is intended for SJ Dynamic Slideshow Module.

When you buy the module the first time, you will have the latest version. After the first release, we will update this module regularly, then please check newer versions when informed

REQUIREMENTS

1. Joomla!, supported versions are listed in our intro page.

INSTALLATION

1. Prepare your module package (zip file; please UNZIP first if it is indicated in the file name)
2. All steps are in administrator backend of Joomla!:

In your Administrator page, go to Extensions -> Extension Manager
In this page, click Choose File, select module package.
Then click Upload & Install
Please wait for module being installed, usually within several seconds
Now go to Extensions -> Module Manager, click Select Type box and choose the module you have installed
Then click one of module instances listed, switch to Options tab to configure it as SETTINGS part hereafter

SETTINGS

1. This module with sample layout is below:

2. The parameters are divided up into the following areas:

Source Options
Item Options
Advanced Options

SOURCE OPTIONS

Slideshow - There are 10 blocks here that you can use to add:

General HTML code.

Code for Slideshow 1

<li data-transition="random" data-slotamount="14" >  <img src="/images/dynamicslideshow/slides/image11.jpg"  >  <div class="caption lft boxshadow"  data-x="430" data-y="80" data-speed="900" data-start="500" data-easing="easeOutBack"><iframe src="http://www.youtube.com/embed/EDir9-UoPjo?hd=1&wmode=opaque&controls=1&showinfo=0" width="480" height="270"></iframe></div>  <div class="caption sft big_black4"  data-x="40" data-y="64" data-speed="300" data-start="1200" data-easing="easeOutExpo">Video</div>  <div class="caption sft big_pink4"  data-x="40" data-y="147" data-speed="300" data-start="1500" data-easing="easeOutExpo">2013 Fashion Collection of SA</div>  <div class="caption lfb medium_grey4"  data-x="40" data-y="180" data-speed="300" data-start="1900" data-easing="easeOutExpo">Lorem ipsum dolor sit amet, consectetuer </div>  <div class="caption lfb medium_grey41"  data-x="40" data-y="220" data-speed="300" data-start="2200" data-easing="easeOutBack">see all video page <img src="/images/dynamicslideshow/slides/arr4.png" style="padding-left:5px"></div>  <div class="caption lfb medium_grey42"  data-x="40" data-y="300" data-speed="300" data-start="2500" data-easing="easeOutExpo"><img src="/images/dynamicslideshow/slides/arr41.png" style="padding-right:10px">Quisque Diam Lorem</div> <div class="caption lfb medium_grey42"  data-x="40" data-y="322" data-speed="300" data-start="2800" data-easing="easeOutBack"><img src="/images/dynamicslideshow/slides/arr41.png" style="padding-right:10px">Uncus benzama honpuplo cayoles tteling</div></li>

Code for Slideshow 2

<li data-transition="random" data-slotamount="5" data-link="http://www.google.de" data-masterspeed="1000" >  <img src="/images/dynamicslideshow/slides/image10.jpg"><div class="caption lft"  data-x="95" data-y="86" data-speed="1200" data-start="800" data-easing="easeOutBack"><img src="/images/dynamicslideshow/slides/fa.png"></div><div class="caption lft big_31"  data-x="95" data-y="195" data-speed="1200" data-start="800" data-easing="easeOutBack">35%</div>  <div class="caption lft big_pink_bk3" data-x="95" data-y="273" data-speed="1200" data-start="1500" data-easing="easeOutExpo">Discount all Products</div>  <div class="caption lft big_pink_bk4" data-x="95" data-y="324" data-speed="1800" data-start="800" data-easing="easeOutBack">Newest Collection 2013</div>  </li>

Code for Slideshow 3

<li data-transition="random" data-slotamount="5" data-link="http://www.google.de" data-masterspeed="1000" >  <img src="/images/dynamicslideshow/slides/image8.jpg">  <div class="caption lfb "  data-x="30" data-y="181" data-speed="900" data-start="1700" data-easing="easeOutBack"><img src="/images/dynamicslideshow/slides/12.png"> </div>  <div class="caption sfl bk_arr" data-x="247" data-y="274" data-speed="300" data-start="2900" data-easing="easeOutExpo"></div>  <div class="caption lfr small_link1"  data-x="247" data-y="274" data-speed="300" data-start="2900" data-easing="easeOutBack"><span style="padding-left:2px"><img src="/images/dynamicslideshow/slides/arr.png"></span> <span style="padding-left:3px">http://demo.smartaddons.com</span></div>       </li>

Code for Slideshow 4

<li data-transition="random" data-slotamount="5" data-link="http://www.google.de" data-masterspeed="1000" >  <img src="/images/dynamicslideshow/slides/image9.jpg"><div class="caption lft big_pink"  data-x="570" data-y="79" data-speed="1200" data-start="800" data-easing="easeOutBack">the</div><div class="caption lft big_pink_bk"  data-x="578" data-y="114" data-speed="1200" data-start="1200"data-easing="easeOutExpo">Jamaica</div>  <div class="caption lft big_pink_bk1"  data-x="500" data-y="190" data-speed="1200" data-start="1500" data-easing="easeOutBack">Collections</div> <div class="caption lft big_black2 "  data-x="450" data-y="245" data-speed="1200" data-start="1800"data-easing="easeOutExpo"> Where Style Comes Alive</div>    <div class="caption lft small_link2 "  data-x="450" data-y="286" data-speed="2200" data-start="800" data-easing="easeOutBack">http://demo.smartaddons.com/extensions/joomla3</div> </li>

Image (to images, even external location...)
Video (to Youtube...)

(with meaning of parameters below

data-transition The appearance transition of this
data-slotamount The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
data-link A link on the whole slide pic
data-masterspeed Set the Speed of the Slide Transition. Default 300, min:100 max:2000.
data-x The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)
data-y The vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated)
data-speed duration of the animation in milliseconds
data-start after how many milliseconds should this caption start to show
data-easing special easing effect of the animation. Options:
easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack easeInBounce, easeOutBounce, easeInOutBounce

ITEM OPTIONS

Navigation Arrows - Allow to set position for navigation buttons
Navigation Style - Allow to set style for navigation buttons
Navigation Vertical Align - Allow to set vertical position for navigation buttons
Navigation Horizontal Align - Allow to set horizontal position for navigation buttons
Show Navigation Vertical Align - Allow to turn off navigation buttons
Stop when Hover - Allow to stop sliding when being hovered
Interval - Allow to set time between sliding
Timer Position - Allow to set position for timer

ADVANCED OPTIONS

Module Class Suffix - Allow you to style module with specific CSS suffix
Include jQuery - Allow you to include jQuery file from this module
Alternative Layout - Allow to choose one from 3 themes
Pre Text - The content to show at the top of module
Post Text - The content to show at the end of module
Caching
- Use Global: Turn on caching
- No Caching: Turn off caching
Cache Times - The time to cache
Module Tag - Set wrapper tag for module
Bootstrap Size - Set width based on bootstrap for wrapper of module
Header Tag - Set tag for module title
Header Class - Set class for module title
Module Style - Override module style