Browse Source

Add arrows/dots to testimonial slider

master
Kevin Mok 4 years ago
parent
commit
73c19c6b03
Signed by: Kevin-Mok GPG Key ID: 6E920656BBAD3E6C
  1. 319
      assets/js/script.js
  2. 27
      assets/sass/custom.scss
  3. 2
      config.toml
  4. 2
      data/about.yml
  5. 2
      data/team.yml
  6. 2
      layouts/partials/testimonial.html

319
assets/js/script.js

@ -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;
}
});
});

27
assets/sass/custom.scss

@ -54,6 +54,29 @@ p, h3, h4 {
} }
} }
// .slick-dots {
// li {
// button {
// border-radius: 100%;
// padding: 5px;
// background-color: white;
// text-indent: 100vw;
// $button-size: 2px;
// height: $button-size;
// width: $button-size;
// // &:focus {
// // background-color: red;
// // }
// }
// .slick-active button {
// background-color: red;
// }
// }
// }
.social-icon { .social-icon {
img { img {
height: 75%; height: 75%;
@ -84,3 +107,7 @@ p, h3, h4 {
// background-size: auto; // background-size: auto;
// background-size: contain; // background-size: contain;
} }
#testimonials {
max-width: 75vw;
}

2
config.toml

@ -52,7 +52,7 @@ custom_css = ["css/custom.css"]
bgImage = "images/slider/hero-area.jpg" bgImage = "images/slider/hero-area.jpg"
# bgImage = "images/slider/eagle.png" # bgImage = "images/slider/eagle.png"
heading = "Ataraxy" heading = "Ataraxy"
content= "NA, MP-focused clan that is currently looking for friendly and active clan members to play together with."
content= "Top 250, MP-focused clan that is currently looking for friendly and active clan members to play together with."
btn = true btn = true
btnText="Requirements" btnText="Requirements"
btnURL="#requirements" btnURL="#requirements"

2
data/about.yml

@ -15,4 +15,4 @@ benefits :
- "vibrant and respectful Discord community" - "vibrant and respectful Discord community"
- "leadership opportunities" - "leadership opportunities"
- "MEE6 leaderboard" - "MEE6 leaderboard"
- "mini-games (trivia/Pokecord)"
- "mini-games (Pokecord/gambling/trivia)"

2
data/team.yml

@ -15,7 +15,7 @@ teamMember :
- imageName : pistolfist - imageName : pistolfist
name : PistolFist name : PistolFist
designation : Vice Master designation : Vice Master
description : In charge of recruiting and assists with player management. Created this site and co-designed clan logo. Founder of clan.
description : In charge of recruiting. Assists with player management. Created this site and co-designed clan logo. Founder of clan.
# socialIcon : # socialIcon :
# - icon : tf-ion-social-facebook # - icon : tf-ion-social-facebook
# url : "#" # url : "#"

2
layouts/partials/testimonial.html

@ -15,7 +15,7 @@
<div class="col-xl-12"> <div class="col-xl-12">
{{"<!-- testimonial wrapper -->" | safeHTML}} {{"<!-- testimonial wrapper -->" | safeHTML}}
<div id="testimonials" class="wow fadeInUp" data-wow-duration="500ms" data-wow-delay="100ms">
<div id="testimonials" class="mx-auto wow fadeInUp" data-wow-duration="500ms" data-wow-delay="100ms">
{{ range .Site.Data.testimonial.testimonialItem }} {{ range .Site.Data.testimonial.testimonialItem }}
{{"<!-- testimonial single -->" | safeHTML}} {{"<!-- testimonial single -->" | safeHTML}}
<div class="item text-center"> <div class="item text-center">

Loading…
Cancel
Save