-
July.22.2013
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
