Kevin Mok
5 years ago
6 changed files with 350 additions and 4 deletions
-
319assets/js/script.js
-
27assets/sass/custom.scss
-
2config.toml
-
2data/about.yml
-
2data/team.yml
-
2layouts/partials/testimonial.html
@ -0,0 +1,319 @@ |
|||
jQuery(function ($) { |
|||
"use strict"; |
|||
|
|||
/* ========================================================================= */ |
|||
/* Page Preloader |
|||
/* ========================================================================= */ |
|||
|
|||
// Preloader js
|
|||
$(window).on('load', function () { |
|||
$('#preloader').fadeOut(700); |
|||
}); |
|||
|
|||
/* ========================================================================= */ |
|||
/* Post image slider |
|||
/* ========================================================================= */ |
|||
|
|||
$("#post-thumb, #gallery-post").slick({ |
|||
infinite: true, |
|||
arrows: false, |
|||
autoplay: true, |
|||
autoplaySpeed: 4000 |
|||
|
|||
}); |
|||
|
|||
$("#features").slick({ |
|||
infinite: true, |
|||
arrows: false, |
|||
autoplay: true, |
|||
autoplaySpeed: 4000 |
|||
}); |
|||
|
|||
/* ========================================================================= */ |
|||
/* Magnific popup |
|||
/* ========================================================================= */ |
|||
$('.image-popup').magnificPopup({ |
|||
type: 'image', |
|||
removalDelay: 160, //delay removal by X to allow out-animation
|
|||
callbacks: { |
|||
beforeOpen: function () { |
|||
// just a hack that adds mfp-anim class to markup
|
|||
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim'); |
|||
this.st.mainClass = this.st.el.attr('data-effect'); |
|||
} |
|||
}, |
|||
closeOnContentClick: true, |
|||
midClick: true, |
|||
fixedContentPos: false, |
|||
fixedBgPos: true |
|||
}); |
|||
/* ========================================================================= */ |
|||
/* Portfolio Filtering Hook |
|||
/* ========================================================================= */ |
|||
|
|||
var containerEl = document.querySelector('.filtr-container'); |
|||
if (containerEl) { |
|||
var filterizd = $('.filtr-container').filterizr({}); |
|||
} |
|||
/* ========================================================================= */ |
|||
/* Testimonial Carousel |
|||
/* ========================================================================= */ |
|||
|
|||
//Init the carousel
|
|||
$("#testimonials").slick({ |
|||
adaptiveHeight: true, |
|||
// appendArrows: $('.client-meta', this),
|
|||
autoplay: true, |
|||
// autoplaySpeed: 2500,
|
|||
centerMode: true, |
|||
centerPadding: '0px', |
|||
dots: true, |
|||
// dotsClass: 'slick-dots-custom',
|
|||
mobileFirst: true, |
|||
respondTo: 'min', |
|||
}); |
|||
|
|||
/* ========================================================================= */ |
|||
/* Contact Form Validating |
|||
/* ========================================================================= */ |
|||
|
|||
|
|||
$('#contact-submit').click(function (e) { |
|||
|
|||
//stop the form from being submitted
|
|||
e.preventDefault(); |
|||
|
|||
/* declare the variables, var error is the variable that we use on the end |
|||
to determine if there was an error or not */ |
|||
var error = false; |
|||
var name = $('#name').val(); |
|||
var email = $('#email').val(); |
|||
var subject = $('#subject').val(); |
|||
var message = $('#message').val(); |
|||
|
|||
/* in the next section we do the checking by using VARIABLE.length |
|||
where VARIABLE is the variable we are checking (like name, email), |
|||
length is a JavaScript function to get the number of characters. |
|||
And as you can see if the num of characters is 0 we set the error |
|||
variable to true and show the name_error div with the fadeIn effect. |
|||
if it's not 0 then we fadeOut the div( that's if the div is shown and |
|||
the error is fixed it fadesOut. |
|||
|
|||
The only difference from these checks is the email checking, we have |
|||
email.indexOf('@') which checks if there is @ in the email input field. |
|||
This JavaScript function will return -1 if no occurrence have been found.*/ |
|||
if (name.length == 0) { |
|||
var error = true; |
|||
$('#name').css("border-color", "#D8000C"); |
|||
} else { |
|||
$('#name').css("border-color", "#666"); |
|||
} |
|||
if (email.length == 0 || email.indexOf('@') == '-1') { |
|||
var error = true; |
|||
$('#email').css("border-color", "#D8000C"); |
|||
} else { |
|||
$('#email').css("border-color", "#666"); |
|||
} |
|||
if (subject.length == 0) { |
|||
var error = true; |
|||
$('#subject').css("border-color", "#D8000C"); |
|||
} else { |
|||
$('#subject').css("border-color", "#666"); |
|||
} |
|||
if (message.length == 0) { |
|||
var error = true; |
|||
$('#message').css("border-color", "#D8000C"); |
|||
} else { |
|||
$('#message').css("border-color", "#666"); |
|||
} |
|||
|
|||
//now when the validation is done we check if the error variable is false (no errors)
|
|||
if (error == false) { |
|||
//disable the submit button to avoid spamming
|
|||
//and change the button text to Sending...
|
|||
$('#contact-submit').attr({ |
|||
'disabled': 'false', |
|||
'value': 'Sending...' |
|||
}); |
|||
|
|||
/* using the jquery's post(ajax) function and a lifesaver |
|||
function serialize() which gets all the data from the form |
|||
we submit it to send_email.php */ |
|||
$.post("sendmail.php", $("#contact-form").serialize(), function (result) { |
|||
//and after the ajax request ends we check the text returned
|
|||
if (result == 'sent') { |
|||
//if the mail is sent remove the submit paragraph
|
|||
$('#cf-submit').remove(); |
|||
//and show the mail success div with fadeIn
|
|||
$('#mail-success').fadeIn(500); |
|||
} else { |
|||
//show the mail failed div
|
|||
$('#mail-fail').fadeIn(500); |
|||
//re enable the submit button by removing attribute disabled and change the text back to Send The Message
|
|||
$('#contact-submit').removeAttr('disabled').attr('value', 'Send The Message'); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
// End Jquery Function
|
|||
|
|||
|
|||
/* ========================================================================= */ |
|||
/* Animated section |
|||
/* ========================================================================= */ |
|||
|
|||
var wow = new WOW({ |
|||
offset: 100, // distance to the element when triggering the animation (default is 0)
|
|||
mobile: false // trigger animations on mobile devices (default is true)
|
|||
}); |
|||
|
|||
//https://github.com/matthieua/WOW/issues/196#issuecomment-348734401
|
|||
var scrolled = false; |
|||
$(window).on('scroll', function () { |
|||
if (!scrolled) { |
|||
scrolled = true; |
|||
wow.init(); |
|||
} |
|||
}) |
|||
|
|||
/* ========================================================================= */ |
|||
/* Google Map Customization |
|||
/* ========================================================================= */ |
|||
|
|||
function initialize() { |
|||
|
|||
var latitude = $('#map-canvas').attr('data-latitude'); |
|||
var longitude = $('#map-canvas').attr('data-longitude'); |
|||
var myLatLng = new google.maps.LatLng(latitude, longitude); |
|||
|
|||
var roadAtlasStyles = [{ |
|||
"featureType": "landscape", |
|||
"elementType": "geometry.fill", |
|||
"stylers": [{ |
|||
"color": "#2F3238" |
|||
}] |
|||
}, { |
|||
"elementType": "labels.text.fill", |
|||
"stylers": [{ |
|||
"color": "#FFFFFF" |
|||
}] |
|||
}, { |
|||
"elementType": "labels.text.stroke", |
|||
"stylers": [{ |
|||
"visibility": "off" |
|||
}] |
|||
}, { |
|||
"featureType": "road", |
|||
"elementType": "geometry.fill", |
|||
"stylers": [{ |
|||
"color": "#50525f" |
|||
}] |
|||
}, { |
|||
"featureType": "road", |
|||
"elementType": "geometry.stroke", |
|||
"stylers": [{ |
|||
"visibility": "on" |
|||
}, { |
|||
"color": "#808080" |
|||
}] |
|||
}, { |
|||
"featureType": "poi", |
|||
"elementType": "labels", |
|||
"stylers": [{ |
|||
"visibility": "off" |
|||
}] |
|||
}, { |
|||
"featureType": "transit", |
|||
"elementType": "labels.icon", |
|||
"stylers": [{ |
|||
"visibility": "off" |
|||
}] |
|||
}, { |
|||
"featureType": "poi", |
|||
"elementType": "geometry", |
|||
"stylers": [{ |
|||
"color": "#808080" |
|||
}] |
|||
}, { |
|||
"featureType": "water", |
|||
"elementType": "geometry.fill", |
|||
"stylers": [{ |
|||
"color": "#3071a7" |
|||
}, { |
|||
"saturation": -65 |
|||
}] |
|||
}, { |
|||
"featureType": "road", |
|||
"elementType": "labels.icon", |
|||
"stylers": [{ |
|||
"visibility": "off" |
|||
}] |
|||
}, { |
|||
"featureType": "landscape", |
|||
"elementType": "geometry.stroke", |
|||
"stylers": [{ |
|||
"color": "#bbbbbb" |
|||
}] |
|||
}]; |
|||
|
|||
var mapOptions = { |
|||
zoom: 14, |
|||
center: myLatLng, |
|||
disableDefaultUI: true, |
|||
scrollwheel: false, |
|||
navigationControl: false, |
|||
mapTypeControl: false, |
|||
scaleControl: false, |
|||
draggable: false, |
|||
mapTypeControlOptions: { |
|||
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas'] |
|||
} |
|||
}; |
|||
|
|||
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); |
|||
|
|||
|
|||
var marker = new google.maps.Marker({ |
|||
position: myLatLng, |
|||
map: map, |
|||
title: '', |
|||
}); |
|||
|
|||
|
|||
google.maps.event.addListener(marker, 'click', function () { |
|||
infowindow.open(map, marker); |
|||
}); |
|||
|
|||
var styledMapOptions = { |
|||
name: 'US Road Atlas' |
|||
}; |
|||
|
|||
var usRoadMapType = new google.maps.StyledMapType( |
|||
roadAtlasStyles, styledMapOptions); |
|||
|
|||
map.mapTypes.set('roadatlas', usRoadMapType); |
|||
map.setMapTypeId('roadatlas'); |
|||
} |
|||
|
|||
google.maps.event.addDomListener(window, "load", initialize); |
|||
|
|||
/* ========================================================================= */ |
|||
/* Staticman comments reply |
|||
/* ========================================================================= */ |
|||
function changeValue(elementName, newValue) { |
|||
document.getElementsByName(elementName)[0].value = newValue; |
|||
}; |
|||
|
|||
/* ========================================================================= */ |
|||
/* Honeypot |
|||
/* ========================================================================= */ |
|||
$(document).ready(function () { |
|||
$('form').submit(function () { |
|||
if ($('input[type="text"]#e-mail').val().length > 0) { |
|||
$('form').attr('action', '/'); |
|||
return false; |
|||
} |
|||
}); |
|||
}); |
Reference in new issue
xxxxxxxxxx