All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:
- Bootstrap v 3 framework (powerful front-end framework for faster and easier web development),
- jQuery v1.10.2 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform animations.),
- colorselector.js – (color ring picker),
- jquery.frogaloop.min.js, jquery.stellar.min.js – ct-mediaSection – (paralax, videos),
- jquery.elevatezoom.js – elevate-zoom (zoom effects on images),
- gmap3.min.js – (google maps, contact page),
- jquery.magnific-popup.min – (images popup),
- jquery.nouislider.all.js – nouislider/ (range slider in single product),
- imagesloaded.js, jquery.isotope.min.jsportoflio/init.js – (isotope),
- select2/init.js, select2.min.js – (styling select boxes with jquery),
- spinner/init.js (styled input quantity element where we can put any value, my cart page),
- stacktable/init.js, stacktable.js – (table which change the whole content to responsive table on the mobile),
- device.min.js,
- jquery.appear.js,
- jquery.browser.min.js,
- jquery.easing.1.3.js,
- jquery.placeholder.min.js,
- modernizr.custom.js,
- snap.min.js (mobile swaping),
- plugins/headroom/init.js, headroom.js, jQuery.headroom.js (menu and topbar effects),
- owl.carousel.min.js (owl slider),
- init.js
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}); } } |