I am looking to make a slider that holds multple images, its an extremely simple product slider with images that link to their product pages. I want the arrows to be on either side of the slider. I notice that when i also implement my slider it negates the "prettyPhoto" feature i have in the div before.
I am using HTML4 unfortunately. here is a JS fiddle i put together of my slider!
I cant get the arrows to show for some reason... and all the images are on top of eachother. im just not quite sure what im doing wrong with this. i am fairly new at javascript and sliders.
Thanks in advance for all the help.
I need it to look like this:
There a couple of things you must do in order to customize the controls :
You have to have the controls in the first place. By default, the prev/Next controls are are set to false:
navigation: true
Next, we will create the actual arrows for the the controls using the navigationText options to parse the array of strings into real functioning HTML.
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
I almost forgot, when I reviewed your Fiddle, it wasn't functioning at all. There are at least 3 external files that are needed to run Owl Carousel.
Owl Carousel CSS (Optional Recommended):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
Owl Carousel Themed CSS (Optional):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
Font-Awesome Icons CSS (Optional):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
jQuery (Essential):
<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
Owl Carousel JS (Essential):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<!--These 4 external Files are necessary for Owl to function-->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
-->
<!--This link is both owl CSS files combined into one-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/jquery.owlcarousel#1.31(owl.carousel.css+owl.theme.css)">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">
<!--<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script>
<style>-->
<!--This tag is both JS files combined-->
<script src="https://cdn.jsdelivr.net/g/jquery#2.2.4,jquery.owlcarousel#1.31"></script>
<style>
/*
| SVG Nav Arrow Style
*/
/* https://gist.github.com/seeRead/11229083 */
.prod-slider-container {
position: relative;
font-family: font-awesome;
}
.owl-buttons {
display: flex;
width: 100%;
justify-content: space-between;
}
.owl-prev,
.owl-next {
position: absolute;
}
i.fa {
cursor: pointer;
position: absolute;
font-size: 60px;
padding-top: 8px;
height: 64px;
width: 72px;
color: rgba(0, 0, 0, .5);
background: rgba(0, 75, 222, .7);
border-radius: 50%;
display: table-cell;
}
.owl-prev,
.owl-next {
background-color: transparent;
border: 0px none transparent;
width: 0px;
height: 0px;
}
.owl-perv {
left: 0;
}
.owl-next {
right: 72px;
}
.item {
outline: 3px dashed grey;
}
</style>
</head>
<body>
<!-- + PRODUCT SLIDERS -->
<div class="prod-slider-container">
<div class="inner-container">
<div class="slider_header_text">
<b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</div>
</div>
<div class="owl-carousel">
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
</div>
<!--.owl-carousel-->
</div>
<!--.prod-slider-container-->
<script>
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 3,
autoPlay: 3000,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3],
navigation: true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
});
});
</script>
</body>
</html>
Related
W3Schools has an example I am using to make an image tab gallery.
Their example in using plain JS and I'm trying to use jQuery. I am new to using jQuery but I have a function that appears to grab the image in the console but the image selected will not appear in the img element with the id of #expandedImg.
I can't seem to figure out what is wrong or why it won't render the image I click on. I would appreciate any guidance. Thanks.
$(document).ready(function() {
$(".column img").click(function() {
var newclass = $(this).attr("src");
console.log(newclass);
var oldclass = $("#expandedImg").attr("id");
console.log(oldclass);
$("#expandedImg").fadeOut(function() {
$("#expandedImg").removeClass(oldclass).addClass(newclass).fadeIn("slow");
console.log(newclass);
});
});
});
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width: 50%;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="../jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="../images/trees_mountains.jpg" alt="Nature" style="width:100%">
</div>
<div class="column">
<img src="../images/snow_mountains.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="../images/mountain_landscape.jpg" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="../images/skylights.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" />
</div>
</body>
</html>
Your whole container with image inside is hidden with display: none in CSS:
.container {
position: relative;
display: none;
width: 50%;
}
You need to show it first:
$(".container").show()
Also you are using removeClass and addClass to add new image source.
removeClass and addClass are ONLY for adding and removing CSS classes, nothing else.
Data you have stored in newclass and oldclass are not CSS classes, those are variables with values and value is source of image in case of newclass, you just called variable newclass by name.
You need to add source same way you get them and fill it with value from variable:
$("#expandedImg").attr('src', newclass)
$(document).ready(function() {
$(".column img").click(function() {
console.clear();
var newclass = $(this).attr("src");
console.log(newclass);
var oldclass = $("#expandedImg").attr("id");
console.log(oldclass);
$(".container").show();
// show .container
$("#expandedImg").attr('src', newclass).hide().fadeIn("slow");
//set new source and hide element in order to be able to fade it in again
// fade in works only on hidden elements
});
});
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width: 50%;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://pmcvariety.files.wordpress.com/2019/12/baby-yoda-plush-toy-mattel-the-mandalorian.png?w=1000&h=563&crop=1" alt="Nature" style="width:100%">
</div>
<div class="column">
<img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/oicrsr3wwqi6u3buvvxx.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images2.minutemediacdn.com/image/upload/c_crop,h_1224,w_2177,x_80,y_0/f_auto,q_auto,w_1100/v1574876645/shape/mentalfloss/609512-disney_0.jpg" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="https://static1.srcdn.com/wordpress/wp-content/uploads/2019/12/Baby-Yoda-in-The-Mandalorian-Chapter-4.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" />
</div>
</body>
</html>
I'm trying to create a slideshow embedded inside a smartphone image for my website.
Creating the slideshow is pretty easy using Owl Carousel.
What i'm unable to do is placing my div inside the phone image so that it covers all the screen, even when the image has different sizes.
I started by measuring the margins that I had to apply in percents, but I don't like this solution.
Is there a way to manually set the four corners of the div relatively to the image ?
I can use jQuery
Checkout the SNIPPET below.
$('.owl-carousel').owlCarousel({
center: true,
items:1,
loop:true,
margin:0
});
.screen .item{
background-color:#5fba7d;
}
.phone{
background-image: url(https://i.stack.imgur.com/vKQ2K.png);
width: 320px !important;
height: 650px;
background-position: -25px 0;
}
.no-js .owl-carousel, .owl-carousel.owl-loaded {
position: relative;
top: 48px;
width: 278px;
left: 20px;
height: 100%;
}
.owl-stage-outer, .owl-item, .item{
height:100%;
}
.owl-stage{
height:calc(100% - 153px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="phone">
<div class="owl-carousel owl-theme screen">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
</div>
<div>
I have problems with retina.js.
Download images https://yadi.sk/d/VEpe-Kdz35PEfr
Why not apply #2x and #3x images? Why retina.js doesn't work? I've been doing documentation. Why this is happening? How to fix this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
text-align: center;
font-family: helvetica, sans-serif;
padding-bottom: 25px;
}
h2 {
margin-top: 35px;
}
.responsive {
width: 80%;
margin: auto;
}
.responsive img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.wrapper {
background: #eaeaea;
margin: 35px auto;
width: 1170px;
padding: 25px 25px 45px;
border-radius: 5px;
}
.img-wrapper {
display: inline-block;
width: 30%;
background: rgba(0, 0, 0, .06);
padding: 0 15px 25px;
vertical-align: middle;
border-radius: 3px;
}
.img-wrapper p {
height: 75px;
font-size: 13px;
}
.bg, .bg2, .bg3 {
height: 150px;
}
</style>
<!-- Uncomment one of the following CSS links to test the behavior of a
different CSS preprocessor.-->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.scss.css"> -->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.sass.css"> -->
<script type="text/javascript">
// Spoof the browser into thinking it is Retina
// comment the next line out to make sure it works without retina
window.devicePixelRatio = 3;
</script>
</head>
<body>
<div class="wrapper">
<h1>retina.js test environement</h1>
<h2>Img Tags</h2>
<!-- This image does not opt in. It will always be shown at 1x -->
<div class="img-wrapper">
<h3>Img tag #1x</h3>
<p>
This image does not opt in. It will always be shown at 1x.
</p>
<img src="google-logo.png">
</div>
<!-- This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments. -->
<div class="img-wrapper">
<h3>Img tag #2x</h3>
<p>
This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments.
</p>
<img src="google-logo.png" data-rjs="2">
</div>
<!-- This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments. -->
<div class="img-wrapper">
<h3>Img tag #3x</h3>
<p>
This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments.
</p>
<img src="google-logo.png" data-rjs="3">
</div>
</div>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.1.0/retina.min.js"></script>
</body>
</html>
There must be a bug in v2.1.0, I changed the source of the script to 2.0.0 and it works as expected:
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.0.0/retina.min.js"></script>
I'm new to JS. I'd like to achieve exactly this effect showcasing photos: kristianhammerstad.com
I'm already using masonry, see the code: http://codepen.io/Kiks/pen/YWzNjr
Images will have same width but different height. That's the only rule.
The problem is shown on video simulation: jmp.sh/mMcu1Bb – as soon as images have different height, the grid is broken and images are placed on each other. But when I have same height of linked images, the grid is OK.
Funny thing is that the issue you see in the video is only on my website (Chrome, Safari) But it's working nicely in Codepen (after first load, even if I resize browser window, always OK). Can you explain this? What special does Codepen include there?
This is exactly my code. Could you tell me what I'm missing and where? I'm just learning, please have patience. Thank you
/* Masonry magic */
.container { width: 96% !important; margin: 0 auto; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#masonry { margin: 0 auto; width: 100%; position: relative; /*z-index:2001;*/ }
.item {
width: 460px; height: auto; background: invisible;
margin: 0 auto 20px auto;
/*float: left;*/
}
.card-text {
width: 460px;
padding-right: 40px;
}
/* End of Masonry magic */
body { padding-top: 60px; }
.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
.lead {
font-weight: 400;
font-size: 24px;
line-height: 1.6;
color: #444444;
margin-bottom: 40px;
}
.text {
text-align: left;
font-size: 18px;
line-height: 1.7;
color: #444444;
}
p {
margin-bottom: 20px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Showcase Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Own styles -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- <div id="masonry">
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
</div> -->
<div id="masonry">
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x800"></div>
<div class="item"><img src="http://placehold.it/460x600"></div>
<div class="item"><img src="http://placehold.it/460x460"></div>
<div class="item"><img src="http://placehold.it/460x300"></div>
<div class="item"><img src="http://placehold.it/460x400"></div>
<div class="item"><img src="http://placehold.it/460x200"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#masonry');
var msnry = new Masonry( container, {
columnWidth: 460,
gutter: 20,
isFitWidth: true,
itemSelector: '.item'
});
</script>
</body>
</html>
I found it! Just one bracket was in addition. Now, I'm not loading whole window, just the div with images. I hope it's really okay but finally it looks like my code works properly.
Working code: http://codepen.io/Kiks/pen/oLNBrG
$('#masonry').imagesLoaded(function() {
$('#masonry').masonry({
itemSelector : '.item',
columnWidth : 460,
isAnimated: true,
gutter: 20,
isFitWidth: true,
animationOptions: {
duration: 700,
easing: 'linear',
queue: false
}
});
});
Although, there's still a tiny problem. Look how you can see just one column before the proper grid is created: http://jmp.sh/5wqeF4Q (I'm refreshing the page twice)
Any ideas how to get nice grid immediately?
i liked this countdown script from http://www.jqueryscript.net/time-clock/Modern-Circular-jQuery-Countdown-Timer-Plugin-Final-Countdown.html and want to use this one to my wordpress website , i read some tutorials about how to put any script in wordpress but i could not understand exactly cause i am newbie , can you help me to do this step by step
now i will show the script author instructions to use this script on normal html page
i want to do these steps also but in wordpress .
Include the necessary javascript files at the end of the page.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script type="text/javascript" src="js/kinetic.js"></script>
<script type="text/javascript" src="../jquery.final-countdown.js"></script>
Include the required bootstrap 3 CSS in the head of the page.
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
Create a countdown timer using the html structure like this:
<div class="countdown-container container">
<div class="clock row">
<!-- days -->
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div>
</div>
</div>
</div>
<!-- hours -->
<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div>
</div>
</div>
</div>
<!-- minutes -->
<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div>
</div>
</div>
</div>
<!-- seconds -->
<div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div>
</div>
</div>
</div>
</div>
</div>
Add the following CSS snippet to your CSS file.
html, body {
height: 100%;
}
html {
background-image: url('../img/sample.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/pattern.png');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
}
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media (min-width: 768px) and (max-width: 991px) {
.clock-item {
margin-bottom: 30px;
}
}
#media (max-width: 767px) {
.clock-item {
margin: 0px 30px 30px 30px;
}
}
Initialize the countdown timer and set the start time, end time and current time in the javascript.
<script type="text/javascript">
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319'
});
</script>
All the default options.
$(document).ready(function() {
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319',
selectors: {
value_seconds: '.clock-seconds .val',
canvas_seconds: 'canvas_seconds',
value_minutes: '.clock-minutes .val',
canvas_minutes: 'canvas_minutes',
value_hours: '.clock-hours .val',
canvas_hours: 'canvas_hours',
value_days: '.clock-days .val',
canvas_days: 'canvas_days'
},
seconds: {
borderColor: '#7995D5',
borderWidth: '6'
},
minutes: {
borderColor: '#ACC742',
borderWidth: '6'
},
hours: {
borderColor: '#ECEFCB',
borderWidth: '6'
},
days: {
borderColor: '#FF9900',
borderWidth: '6'
}}, function() {
// Finish callback
});
});
To add Javascript and CSS files inside Wordpress, you need to use wp_register_script and wp_register_style functions inside your functions.php theme file.
So let's translate every step:
Include the necessary javascript files at the end of the page.
You don't need to include jquery as it is already included by Wordpress. Download kinetic.js and jquery.final-countdown.js, and add them into your theme folder in a js directory.
Then in your functions.php add the following:
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
wp_enqueue_script('kinetic', get_stylesheet_directory_uri() . '/js/kinetic.js', array('jquery'), '', true);
wp_enqueue_script('countdown', get_stylesheet_directory_uri() . '/js/jquery.final-countdown.js', array('jquery'), '', true);
}
Include the required bootstrap 3 CSS in the head of the page.
In the same function, add the following line:
wp_enqueue_style('bootstrap_css', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
Create a countdown timer using the html structure like this
See where you want to include it. If you want this on all the pages inside header, add this inside header.php in your theme folder.
Add the following CSS snippet to your CSS file.
Just add the code inside your actual stylesheet.
Initialize the countdown timer and set the start time, end time and current time in the javascript.
You could do this in your own js file. Add a countdown.js file in your js folder, and enqueue it like before:
wp_enqueue_script('countdown_script', get_stylesheet_directory_uri() . '/js/countdown.js', array('jquery'), '', true);
And in your countdown.js file:
jQuery(document).ready(function($) {
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319'
});
});
That way it will prevent any conflict.