Skip to content

Commit e6c9803

Browse files
c4almashc4almash
committed
Added Functional Slider
Javascript, CSS and php files, asl ocreated a custom POst type
1 parent 78297c8 commit e6c9803

14 files changed

+575
-1
lines changed

‎functions.php

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,3 +195,8 @@ function underscore_pets_scripts() {
195195
* Load Jetpack compatibility file.
196196
*/
197197
require get_template_directory() . '/inc/jetpack.php';
198+
199+
// Create Slider Post Type
200+
require( get_template_directory() . '/inc/slider/slider_post_type.php' );
201+
// Create Slider
202+
require( get_template_directory() . '/inc/slider/slider.php' );

‎header.php

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
?><!DOCTYPE html>
1313
<html <?php language_attributes(); ?>>
1414
<head>
15+
16+
1517
<meta charset="<?php bloginfo( 'charset' ); ?>">
1618
<meta name="viewport" content="width=device-width, initial-scale=1">
1719
<link rel="profile" href="http://gmpg.org/xfn/11">
@@ -21,6 +23,23 @@
2123
</head>
2224

2325
<body <?php body_class(); ?>>
26+
27+
28+
<!-- Place somewhere in the <body> of your page -->
29+
<div class="flexslider">
30+
<ul class="slides">
31+
<li>
32+
<img src="http://www.pawderosa.com/images/puppies.jpg" />
33+
</li>
34+
<li>
35+
<img src="http://www.pamperedpetz.net/wp-content/uploads/2015/09/Puppy1.jpg" />
36+
</li>
37+
<li>
38+
<img src="http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg" />
39+
</li>
40+
</ul>
41+
</div>
42+
2443
<div id="page" class="site">
2544
<a class="skip-link screen-reader-text" href="#main"><?php esc_html_e( 'Skip to content', 'underscore-pets' ); ?></a>
2645

‎inc/slider/css/flexslider.css

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
/*
2+
* jQuery FlexSlider v2.6.0
3+
* http://www.woothemes.com/flexslider/
4+
*
5+
* Copyright 2012 WooThemes
6+
* Free to use under the GPLv2 and later license.
7+
* http://www.gnu.org/licenses/gpl-2.0.html
8+
*
9+
* Contributing author: Tyler Smith (@mbmufffin)
10+
*
11+
*/
12+
/* ====================================================================================================================
13+
* FONT-FACE
14+
* ====================================================================================================================*/
15+
@font-face {
16+
font-family: 'flexslider-icon';
17+
src: url('fonts/flexslider-icon.eot');
18+
src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
19+
font-weight: normal;
20+
font-style: normal;
21+
}
22+
/* ====================================================================================================================
23+
* RESETS
24+
* ====================================================================================================================*/
25+
.flex-container a:hover,
26+
.flex-slider a:hover {
27+
outline: none;
28+
}
29+
.slides,
30+
.slides > li,
31+
.flex-control-nav,
32+
.flex-direction-nav {
33+
margin: 0;
34+
padding: 0;
35+
list-style: none;
36+
}
37+
.flex-pauseplay span {
38+
text-transform: capitalize;
39+
}
40+
/* ====================================================================================================================
41+
* BASE STYLES
42+
* ====================================================================================================================*/
43+
.flexslider {
44+
margin: 0;
45+
padding: 0;
46+
}
47+
.flexslider .slides > li {
48+
display: none;
49+
-webkit-backface-visibility: hidden;
50+
}
51+
.flexslider .slides img {
52+
width: 100%;
53+
display: block;
54+
}
55+
.flexslider .slides:after {
56+
content: "\0020";
57+
display: block;
58+
clear: both;
59+
visibility: hidden;
60+
line-height: 0;
61+
height: 0;
62+
}
63+
html[xmlns] .flexslider .slides {
64+
display: block;
65+
}
66+
* html .flexslider .slides {
67+
height: 1%;
68+
}
69+
.no-js .flexslider .slides > li:first-child {
70+
display: block;
71+
}
72+
/* ====================================================================================================================
73+
* DEFAULT THEME
74+
* ====================================================================================================================*/
75+
.flexslider {
76+
margin: 0 0 60px;
77+
background: #ffffff;
78+
border: 4px solid #ffffff;
79+
position: relative;
80+
zoom: 1;
81+
-webkit-border-radius: 4px;
82+
-moz-border-radius: 4px;
83+
border-radius: 4px;
84+
-webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
85+
-moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
86+
-o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
87+
box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
88+
}
89+
.flexslider .slides {
90+
zoom: 1;
91+
}
92+
.flexslider .slides img {
93+
height: auto;
94+
-moz-user-select: none;
95+
}
96+
.flex-viewport {
97+
max-height: 2000px;
98+
-webkit-transition: all 1s ease;
99+
-moz-transition: all 1s ease;
100+
-ms-transition: all 1s ease;
101+
-o-transition: all 1s ease;
102+
transition: all 1s ease;
103+
}
104+
.loading .flex-viewport {
105+
max-height: 300px;
106+
}
107+
.carousel li {
108+
margin-right: 5px;
109+
}
110+
.flex-direction-nav {
111+
*height: 0;
112+
}
113+
.flex-direction-nav a {
114+
text-decoration: none;
115+
display: block;
116+
width: 40px;
117+
height: 40px;
118+
margin: -20px 0 0;
119+
position: absolute;
120+
top: 50%;
121+
z-index: 10;
122+
overflow: hidden;
123+
opacity: 0;
124+
cursor: pointer;
125+
color: rgba(0, 0, 0, 0.8);
126+
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
127+
-webkit-transition: all 0.3s ease-in-out;
128+
-moz-transition: all 0.3s ease-in-out;
129+
-ms-transition: all 0.3s ease-in-out;
130+
-o-transition: all 0.3s ease-in-out;
131+
transition: all 0.3s ease-in-out;
132+
}
133+
.flex-direction-nav a:before {
134+
font-family: "flexslider-icon";
135+
font-size: 40px;
136+
display: inline-block;
137+
content: '\f001';
138+
color: rgba(0, 0, 0, 0.8);
139+
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
140+
}
141+
.flex-direction-nav a.flex-next:before {
142+
content: '\f002';
143+
}
144+
.flex-direction-nav .flex-prev {
145+
left: -50px;
146+
}
147+
.flex-direction-nav .flex-next {
148+
right: -50px;
149+
text-align: right;
150+
}
151+
.flexslider:hover .flex-direction-nav .flex-prev {
152+
opacity: 0.7;
153+
left: 10px;
154+
}
155+
.flexslider:hover .flex-direction-nav .flex-prev:hover {
156+
opacity: 1;
157+
}
158+
.flexslider:hover .flex-direction-nav .flex-next {
159+
opacity: 0.7;
160+
right: 10px;
161+
}
162+
.flexslider:hover .flex-direction-nav .flex-next:hover {
163+
opacity: 1;
164+
}
165+
.flex-direction-nav .flex-disabled {
166+
opacity: 0!important;
167+
filter: alpha(opacity=0);
168+
cursor: default;
169+
z-index: -1;
170+
}
171+
.flex-pauseplay a {
172+
display: block;
173+
width: 20px;
174+
height: 20px;
175+
position: absolute;
176+
bottom: 5px;
177+
left: 10px;
178+
opacity: 0.8;
179+
z-index: 10;
180+
overflow: hidden;
181+
cursor: pointer;
182+
color: #000;
183+
}
184+
.flex-pauseplay a:before {
185+
font-family: "flexslider-icon";
186+
font-size: 20px;
187+
display: inline-block;
188+
content: '\f004';
189+
}
190+
.flex-pauseplay a:hover {
191+
opacity: 1;
192+
}
193+
.flex-pauseplay a.flex-play:before {
194+
content: '\f003';
195+
}
196+
.flex-control-nav {
197+
width: 100%;
198+
position: absolute;
199+
bottom: -40px;
200+
text-align: center;
201+
}
202+
.flex-control-nav li {
203+
margin: 0 6px;
204+
display: inline-block;
205+
zoom: 1;
206+
*display: inline;
207+
}
208+
.flex-control-paging li a {
209+
width: 11px;
210+
height: 11px;
211+
display: block;
212+
background: #666;
213+
background: rgba(0, 0, 0, 0.5);
214+
cursor: pointer;
215+
text-indent: -9999px;
216+
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
217+
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
218+
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
219+
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
220+
-webkit-border-radius: 20px;
221+
-moz-border-radius: 20px;
222+
border-radius: 20px;
223+
}
224+
.flex-control-paging li a:hover {
225+
background: #333;
226+
background: rgba(0, 0, 0, 0.7);
227+
}
228+
.flex-control-paging li a.flex-active {
229+
background: #000;
230+
background: rgba(0, 0, 0, 0.9);
231+
cursor: default;
232+
}
233+
.flex-control-thumbs {
234+
margin: 5px 0 0;
235+
position: static;
236+
overflow: hidden;
237+
}
238+
.flex-control-thumbs li {
239+
width: 25%;
240+
float: left;
241+
margin: 0;
242+
}
243+
.flex-control-thumbs img {
244+
width: 100%;
245+
height: auto;
246+
display: block;
247+
opacity: .7;
248+
cursor: pointer;
249+
-moz-user-select: none;
250+
-webkit-transition: all 1s ease;
251+
-moz-transition: all 1s ease;
252+
-ms-transition: all 1s ease;
253+
-o-transition: all 1s ease;
254+
transition: all 1s ease;
255+
}
256+
.flex-control-thumbs img:hover {
257+
opacity: 1;
258+
}
259+
.flex-control-thumbs .flex-active {
260+
opacity: 1;
261+
cursor: default;
262+
}
263+
/* ====================================================================================================================
264+
* RESPONSIVE
265+
* ====================================================================================================================*/
266+
@media screen and (max-width: 860px) {
267+
.flex-direction-nav .flex-prev {
268+
opacity: 1;
269+
left: 10px;
270+
}
271+
.flex-direction-nav .flex-next {
272+
opacity: 1;
273+
right: 10px;
274+
}
275+
}

‎inc/slider/css/fonts/flexslider-icon.eot

2.03 KB
Binary file not shown.

‎inc/slider/css/fonts/flexslider-icon.svg

Lines changed: 19 additions & 0 deletions
Loading

‎inc/slider/css/fonts/flexslider-icon.ttf

1.85 KB
Binary file not shown.

‎inc/slider/css/fonts/flexslider-icon.woff

1.24 KB
Binary file not shown.

‎inc/slider/images/bg_play_pause.png

1.51 KB
Loading

‎inc/slider/js/jquery.flexslider-min.js

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)