This folder contains various plugins used by Kallyas template:

 

Scrollme effect#

Folder "/js/plugins/scrollme/jquery.scrollme.min.js", performs a scroll effect on the slideshow section.

This effect can be disabled by removing this line :

and then physically from folder.

 

 

Raphael Diagram#

Folder "/js/plugins/raphael_diagram/*", makes possible this beautiful diagram:

 

 

Magnific Popup#

Folder "/js/plugins/magnific_popup/*", this plugin is used for images, videos and gallery popup:

 

 

jQuery Loupe#

Folder "/js/plugins/jquery_loupe/*", this plugin is used to create a loupe on a image:

Don’t forget to load in the html page the plugin and the settings for the loupe:

 

 

Flickr Feed#

Folder "/js/plugins/flickrfeed/*", this plugin is used to create a flickrfeed gallery:

To make this gallery, load the plugin in the html page:

and this is the html markup that you need:

 

 

Parallax backgrounds#

Folder "/js/plugins/parallax/*", this plugin is used to create a parallax effect for background images on sections.

You need to load both files from that folder in the page and then add to your makup this classes:

 

 

Bookblock#

Folder "/js/plugins/bookblock/*", this plugin is used to have a slideshow with book effect slider.

You need to load all the files from the folder in page, an example it’s in the bigblog.html file.

 

 

Isometricgrids#

Folder "/js/plugins/isometric-grids/*", this plugin is used to have a slideshow with beautiful image grids.

You need to load all the files from the folder in page, an example it’s in the static-content-isometric-grids-scroll.html and static-content-isometric-grids-static.html files.

 

 

Animated particles#

Folder "/js/plugins/animated-particles.js", this plugin is used to have a section or sub-header with beautiful animated particles effect.

You need to load this two js files into your page "/js/plugins/EaselJS.js" ; "/js/plugins/animated-particles.js"

an example it’s in this page:  subheader-animated.html

Don’t forget to add this canvas tag markup where you want to display the animated particles.

 

 

Cooking effect#

Folder "/js/plugins/cooking.js", this plugin is used to have a slideshow section with beautiful animated cooking heat effect.

You need to load the js file into your page and use canvas tag where you want to display the cooking heat effect.

 

 

Countdown Coming soon#

Folder "/js/plugins/event-countdown-coming-soon.js", this plugin is used to have a counter time event into your section.

You need to load this file into your page, after you changes in the file your custom time.

An example it’s in this page: static-content-event-countdown.html file.

Don’t forget to add this mandatory markup into your page where you want to display this feature:

 

 

Counterup numbers#

Folder "/js/plugins/jquery.counterup.min.js", this plugin is used to have animated counter numbers into you section.

An example it’s in this page: elements-counter-numbers.html file.

Don’t forget to add this mandatory markup into you page where you want to display this feature.

 

 

Google maps#

Folder "/js/plugins/jquery.gmap.min.js", this plugin is used to have Google maps into your page, section, slideshow, sub-header etc.

An example it’s in this page: contact-us.html file.

Don’t forget to load this mandatory files into your page:

And the markup where you want to display the map:

And to configure the map with your address and pin locations, you need to make the changes in this file: "/js/trigger/kl-google-maps.js" ; "/js/trigger/kl-google-maps-style2.js" ; "/js/trigger/kl-google-maps-style3.js"

depend which style you want to use, because all the 3 trigger files has a different map color style.

And then create you API key for map element here.

After you get the API key add the key into the page in the bottom of the file, replace “YOUR_API_KEY“:

 

 

Isotope#

Folder "/js/plugins/jquery.isotope.min.js", this plugin is used to have item sortable with filters.

An example it’s in this page: sortable-portfolio.html file.

Don’t forget to load this mandatory files into you page: "/js/plugins/jquery.isotope.min.js" ; "/js/trigger/kl-portfolio-sortable.js"

and the markup where you want to display this plugin:

 

 

Text rotator#

Folder "/js/plugins/jquery.simple-text-rotator.min.js", this plugin is used to have a dynamic multiple text with rotate effect.

An example it’s in this page: static-content-product-presentation-alt.html file.

Don’t forget to load this mandatory file and trigger js into you page: "/js/plugins/jquery.simple-text-rotator.min.js"

and the markup where you want to display this plugin separate with comma:

 

 

Weather panel#

Folder "/js/plugins/jquery.simpleWeather.min.js", this plugin is used to have weather into your slideshow, section.

An example it’s in this page: static-content-weather-panel.html file.

Don’t forget to load this mandatory files and trigger js into you page: "/js/plugins/jquery.simpleWeather.min.js" ;  "js/trigger/kl-static-content-weather-panel.js"

and the markup where you want to display this plugin with location settings:

 

 

Rain effect#

Folder "/js/plugins/rain-effect.js", this plugin is used to have rain effect on a section, sub-header, slideshow etc.

An example it’s in this page: subheader-animated-rain.html file.

Don’t forget to load this mandatory files and trigger js into you page: "/js/plugins/rain-effect.js" ;  "js/jquery-migrate.min.js"

and the markup canvas tag where you want to display this plugin:

 

 

Animated sparkles effect#

Folder "/js/plugins/sparkles.js", this plugin is used to have animated sparkles on a section, sub-header, slideshow etc.

An example it’s in this page: subheader-animated-sparkles.html file.

Don’t forget to load this mandatory files into you page: "/js/plugins/sparkles.js" ;  "js/jquery-migrate.min.js"

and the markup where you want to display this feature: