All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:
- js/charts/init.js – chart display.
- js/countdown/jquery.mb-comingsoon.min.js – Date counter (e.g. ‘Under Maintenance’ page)
- js/counter/init.js,
- js/counter/jquery.countTo.js – Counter display.
- js/ct-mediaSection/init.js,
- js/ct-mediaSection/jquery.frogaloop.min.js,
- js/ct-mediaSection/jquery.stellar.min.js – Media section preformance.
- js/gmaps/init.js,
- js/gmaps/gmap3.min.js – Google maps display.
- js/magnific-popup/init.js,
- js/magnific-popup/jquery.magnific-popup.min.js – portfolio item display.
- js/owl/init.js,
- js/owl/owl.carousel.js – Owl carousel.
- js/portfolio/init.js,
- js/portfolio/imagesloaded.js,
- js/portfolio/jquery.isotope.min.js – Portfolio performance.
- js/progressbars/init.js – Progress bars display.
- js/progressicons/init.js – Progress icons performance.
- js/jquery.stellar.min.js,
- js/init.js – Parallax effect.
- js/device.min.js,
- js/snap.min.js,
- js/jquery.appear.js – Menu in mobile devices.
- bootstrap/js/bootstrap.min.js – compiled bootstrap plugin.
- js/less.min.js – less compilation.
- js/placeholder.min.js – old browsers support for placeholders.
- js/easing.1.3.js – easing animations.
- js/browser.min.js – browser identification.
Google Map (GMAP3 Plugin)
This is google map with custom marker, you can define couple parameters:
- data-location – address to show
- data-height – map height (if undefined height will be 220px)
- data-offset – by how many map should be repositioned from marker center point (default -30)
It uses gmap3 plugin.
Documentation: here
HTML Markup:
|
1 |
<div class="ct-googleMap" data-location="Narbutta 24, Warsaw" data-zoom="15" data-height="500"></div> |
All javascript code can be found in js/main.js file.
jquery.appear
This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if (jQuery().appear) { if (device.mobile()) { // disable animation on mobile jQuery("body").removeClass("withAnimation"); } else { jQuery('.withAnimation .animated').appear(function () { jQuery(this).each(function () { jQuery(this).addClass('activate'); jQuery(this).addClass($(this).data('fx')); }); }, {accY: -150}); } } |
Charts.js
This plugin is used to make graphics.
Documentation: http://www.chartjs.org/