Email: aeonian.in@gmail.com
Thank you for purchasing jSon Slider, Carousel & Timeline. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
jSon Slider, Carousel & Timeline is a responsive and fast-loading slider with built-in search functionality and other powerful features.
This plugin converts the json object to HTML and then display as a Slide OR Caousel OR Timeline.
This plugin have 3 main js files.
1. json-slider.js (for Slider)
2. json-carousel.js (for Carousel)
3. json-timeline.js (for Timeline)
As a first step we have to create a json object. Once we do that it will be converted into HTML at load-time.
Within object we can define tag name, tag content, tag attribute, tag index, CSS and jQuery animation.
Here is a simple example of object
[{
tags: [{
name: 'h1',
content: 'first title',
cssanimate: 'swing'
}, {
name: 'img',
cssanimate: 'flipInX',
attr: {
src: 'image1.png',
class: 'first-img'
}
}]
}, {
tags: [{
name: 'h2',
content: 'second title',
cssanimate: 'slideInRight'
}, {
name: 'img',
cssanimate: 'slideInLeft',
attr: {
src: 'image2.png',
class: 'second-img'
}
}]
}]
This object contain two slides.
First slide contains <h1>First Title</h1> with swing animation and <img src="images1.png" class="first-img" /> with flipInX animation
AND
second slide contains <h2>Second Title</h2> with slideInRight animation and <img src="images2.png" class="second-img" /> with slideInLeft animation
| tags | name | Define tag name here Example : for <h1></h1> tag do this name: 'h1' |
{
tags: [{
name: '',
content: '',
attr: {},
cssanimate: '',
aftercssanimate: {},
jqueryanimate: [],
afterjqueryanimate: []
}]
}
|
| content | Define tag content here Example : for <h1>First Title</h1> do this name: 'h1', content:'First Title' |
||
| attr | We can define all attributes here like title, alt, src... Example : for <img src="img/image1.jpg" class="first-img" /> do this name: 'img', attr: { src:'img/image1.jpg', class:'first-img' } |
||
|
cssanimate
Only for Slider & Carousel |
Select CSS animate effect here Like cssanimate : swing or cssanimate : slideInLeft or any one from this list http://daneden.me/animate. |
||
|
aftercssanimate
Only for Slider |
aftercssanimate is another animation option in this option we can also set delay time and animation effect Example aftercssanimate: { type: 'swing', time: 2000 } or any one from list http://daneden.me/animate. time: 2000 mean it will be animate after 2 second. |
||
|
jqueryanimate
Only for Slider |
We can use jQuery animate default functionality here.
Example : If you want increase letterSpacing after 1 second do this jqueryanimate: ['letterSpacing', '4px', 1000, 1000] ['propertie', 'value', 'speed', 'waiting time'] list of all jQuery animate properties http://www.w3schools.com/jquery/eff_animate.asp |
||
|
afterjqueryanimate
Only for Slider |
This is same as jqueryanimate. We can set second animation effect for any element.
Suppose we have one div and we want to animate it from left side on load then stop for 2 second and animate it more from left. for that we have to first add jqueryanimate and afterjqueryanimate jqueryanimate: ['left', 100, 1000, 0], afterjqueryanimate: ['left', 400, 1000, 3000] |
||
|
active
Only for Slider |
By default first slider will display on load page suppose you want to display second slide on load, then add active: true in second object. |
{
tags: [{
}],
active: true
}
|
|
|
thumbhtml
Only for Slider |
We can set custom HTML instead of round button in pagination. |
{
tags: [{
}],
thumbhtml: '<img src="thumb.png" />'
}
|
|
|
backgroundamination
Only for Slider |
Use this for background animation effect.
Suppose there is 140% background-size in css for first slide and we added backgroundamination: ['-=40%', '6000'] then background image size will reduce with animation 140% to 100% and '6000' is animation duration time. backgroundamination will not work if fullscreen option is true |
{
tags: [{
}],
backgroundamination: ['-=40%', '6000']
}
|
|
|
videoinbg
Only for Slider |
We can set video in background, To do so, add videoinbg : true | {
tags: [{
}],
videoinbg : true
} |
|
|
time
Only for Timeline |
By use of this option we can set time for timeline indexing.
Example : time: '04/15/2011' 04 is month 15 id date and 2011 is year visit exampel |
{
tags: [{
}],
time: '06/26/2014'
} |
|
In addition we have Youtube iframe and HTML5 video support. Only for Slider
Follow the example code for displaying Youtube iframe and HTML5 video in slider.
Note : please add ?enablejsapi=1 after iframe video src, also you can use ?autoplay=1&loop=1 after src
{
tags: [{
name: 'iframe',
src: 'https://www.youtube.com/embed/mcixldqDIEQ?enablejsapi=1'
}]
}
{
tags: [{
name: 'video',
source: {
mp4: '../video/window-10.mp4',
ogg: '../video/window-10.ogg'
}
}]
}
| default value | description | |
|
loadAllSlidesData
Only for Slider & Carousel |
true | If this option is true then the plugin fetches all slider's data from the object and converts it into HTML on page load event. This option should be false if there are many slides so the plugin fetches only the first slide on load page event and fetch other slides data on click of pagination OR next previous button.
If the option is false then the loading image will display on the change slide |
|
slideAnimation
Only for Slider & Carousel |
true | By use of this option, we can animate slide (Random CSS animation) on click of pagination OR next previous button.
Only works if loadAllSlidesData is true |
|
searchField
Only for Slider |
[false, '3'] | Show or Hide search field. Also define minimum required characters for search, just update '3' with your number. |
|
autoSlide
Only for Slider & Carousel |
[false, '10000'] | If this option is true then there will be next slide comes after 10 seconds without click of next of previous button We can also update the auto slide change delay time by changing the second option |
|
circularSlide
Only for Slider & Carousel |
true | Suppose there are 4 slides in the slider and we are on the last slide then there is no next slide but if this option is true then first slide will be the next slide if you are on last slide. |
|
touchSetting
Only for Slider & Carousel |
true | This option will enable touch event for this slider on touch screen device. |
|
fullscreen
Only for Slider |
false | Display slider on fullscreen |
|
carouselNumber
Only for Carousel |
['3', '2', '1'] | Set carousel number here that you want to see on the screen. There are 3 options here, 1st for desktop 2nd for tablet and 3rd for mobile |
|
sortingDropdown
Only for Carousel |
false | By use this option we can have sorting dropdown on the screen. Suppose there is h2 tag defined in the object and we seleced 'sortingDropdown': 'h2' then sorting drop down apper on screen with all text inside h2 and on change of dropdown we can see result.
Do not select any element for sorting which have HTML code, only select that element which have simple text. This option is useful for carousel. Plese check team carousel. |
|
timelineEffect
Only for Timeline |
false | We can set css animation effect to timeline. Need to choose any one effect from list (www.daneden.me/animate) and set here. Example : 'timelineEffect':'fadeInUp' |
Click here for understand simple example.
Once again, thank you so much for purchasing jSon Slider. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.