“jSon Slider, Carousel & Timeline” Documentation


jSon Slider, Carousel & Timeline

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!


Table of Contents

  1. About jSon Slider, Carousel & Timeline
  2. List of features
  3. Customization
  4. How its work
  5. Sources and Credits

A) About jSon Slider, Carousel & Timeline - top

This is jSon-based plugin, which converts the jSon object to HTML.
jSon Slider, Carousel & Timeline is a responsive and fast-loading slider with built-in search functionality and other powerful features.
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)


B) List of features - top

  1. Awesome CSS & jQuery animation
  2. Fully responsive
  3. Search within slide
  4. YouTube and HTML5 videos in slide
  5. Carousel, Testimonial & Timeline
  6. Carousel (Option for setting different numbers of slides for Desktop, Tablet and Mobile)
  7. Very fast loading slider
  8. Sorting option in carousel
  9. Option for circulation of slides
  10. Full screen
  11. Thumbnails, bullets or HTML
  12. Multiple sliders allowed on one page
  13. Slides can be selected using a GET method in URl
  14. Customizable interface (show/hide next previous arrows, pagination and editable class name)
  15. Autoplay support
  16. Touch support

C) Customization - top

jSon customization :

As a first step we have to create jSon object. Once we do that, jSon will be converted into HTML at load-time.
Within jSon object, we can define tag name, tag content, tag attribute, tag index, CSS and jQuery animation.

Below is a jSon object Example:

            [{
                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 jSon 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

Simple demo for understanding

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 time like aftercssanimate : 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, and if you want to add iframe video in background, then add ?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'
                }
            }]
}

Other parameters :

default value description
loadallslides
Only for Slider & Carousel
true If this option is true then plugin fetch all sliders data from object and convert in to HTML on load time and suppose we have too many slides then set false here so plugin fetch only one slide on click of pagination OR next previous button.
If option is false then loading image will display on change slide.
slideanimation
Only for Slider & Carousel
false By use of this option we can animate slide (Random CSS animation) on click of pagination OR next previous button.
This option is workiong only if loadallslides is true.
nextprev
Only for Slider & Carousel
true Show / Hide next and previous arrow
nextclass
Only for Slider & Carousel
next Overwrite next arrow class name
prevclass
Only for Slider & Carousel
next Overwrite previous arrow class name
pagi
Only for Slider & Carousel
true Show / Hide pagination
pagiclass
Only for Slider & Carousel
next Overwrite pagination class name
search
Only for Slider
[true, '3'] Show / Hide search field.
Also define minimum require character for search, just update '3' with your number.
data
[{
    tags: [{
            name: 'h1',
            content: "Can't found jSon Object",
            animate: 'swing'
        }]
}]
Define jSon Object here. Please read jSon customization
auto
Only for Slider & Carousel
[false, '10000'] Enable / Disable auto slide
Example : for auto slider with 5 second delay, do this [true, '5000']
circular
Only for Slider & Carousel
true If value is true then you can see all slides in circular root (infinite loop).
touch
Only for Slider & Carousel
true Enable / Disable touch event
fullscreen
Only for Slider
false Enable / Disable fullscreen mode
carousel
Only for Carousel
['3', '2', '1'] We can set different number of slides for each resolution like 3 for desktop, 2 for tablet and 1 for mobile
sorting
Only for Carousel
false Sort all slides as selected element text. Suppose we seleced 'sorting':'h2' then sorting drop down apper in 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 in timeline. Need to choose any one effect from list (www.daneden.me/animate) and set here.
Example : 'timelineeffect':'fadeInUp'

D) How its work - top

Click here for understand simple example.


E) Sources and Credits - top


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.

Go To Table of Contents