Coding reminds me of the saying “it’s always in the last place you look”, it is always the last piece of code you try!
As I struggled and struggled with just adding a slider in the first place afterwards the little sense of achievement at the end is all worth it!
I don’t have very much experience with jQuery, it probably only amounts to a few hover effects and the odd image slider I had to add into a website for a university piece of work. All of which I never had to actually, properly understand jQuery. Yet the effects you can achieve with it are a-mazing! It is something I definitely want to learn more about! I have been doing the codingacademy jQuery tutorials to help me get my head around it and I definitely recommend them, or any of their other tutorials like HTML, PHP etc if you really want to get into coding!
However for now lets get on with this slider!
First of all we are going to set it up so the feature image of your blog post appears as the slider image. In order to do this we need to be able to set feature images on blog posts, so open up you SC Theme editor and find your functions.php file. Enter this code at the bottom of the file:
/*Featured Image function*/
add_theme_support( 'post-thumbnails' );
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail dimensions (cropped)
// additional image sizes
// delete the next line if you do not need additional image sizes
add_image_size( 'slider-thumb', 125, 87 ); //125 pixels wide (and unlimited height)
}Press update file and in your blog posts you should now have the option to add a feature image (it will be underneath the section to add tags) like shown below:
For this slider as well you will need to give your posts a category and it will select the featured images from the blog posts with the category you say, for example we have gave our blog posts the category of 30daysofcoding:
Now we can get on with the code for the slider. We need to set up our jQuery files, you will need to create a new file, in you js folder, in your SC Theme editor. To do this select on a file in the js folder (by clicking on the + and selecting html5.js for example), then enter the name cycle2.js like so and press Create File in current directory:
Copy and paste all of the code from this link and press Update File at the bottom of the page to save yours changes.
Next create another file in the same js folder but this time give it the name slider.js and copy and paste the code from this link into it. Remember to press Update File at the bottom of the page to save your changes.
Next add the links to these jQuery files to your header.php:
<!-- activiting jquery--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!--Slider jQuery--> <script src="<?php echo get_template_directory_uri(); ?>/js/cycle2.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/slider.js"></script> <script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>
They should be placed above:
<?php wp_head(); ?>
In our previous post to add a pop-up we told you to add this piece of code:
<?php wp_enqueue_script("jquery"); ?>
Change this jQuery code for the new section of jQuery in this post.
Next add the slider to the header.php file:
<!-- Slider -->
<div class="slider">
<div id="slider-box">
<div class="slider-group"><span>Challenge</span><h5>30 days of</h5></div>
<div class="slider-nav">
<div class="title-slider">Coding</div>
<div class="arrows-slider">
<a href="#" id="prev4"><i class="fa fa-long-arrow-left"></i></a>
<a href="#" id="next4"><i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
</div>
<div class="slideshow" data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-next="#next4"
data-cycle-prev="#prev4"
data-cycle-carousel-visible="7"
data-allow-wrap="false"
data-cycle-slides="div.slider-article"
>
<?php $thequery = new WP_Query( 'category_name=30daysofcoding&posts_per_page=30&order=asc' );
$count = 0;
if ( $thequery->have_posts() ) {
while ( $thequery->have_posts() ) {
$thequery->the_post(); $count++ ?>
<div class="slider-article">
<div class="slider-inner"><?php the_post_thumbnail('slider-thumb', array('class' => 'slider-thumb')); ?>
<div class="slider-day">Day <?php echo $count?></div>
<div class="slider-desc"><a class="thumblink" title="<?php printf(__('%s', 'framework'), get_the_title()); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div></div>
</div>
<?php }
} wp_reset_postdata(); ?>
</div>
</div>
<!-- End of Slider -->
This piece of code should be placed directly under :
<div class="main">
I will now go through each section of code you just added for the slider and tell you what it does. NB: you have not added the styling yet so it will not look like the screenshots shown)
This part of code:
<!-- Slider --> <div class="slider"> <div id="slider-box"> <div class="slider-group"><span>Challenge</span><h5>30 days of</h5></div> <div class="slider-nav"> <div class="title-slider">Coding</div> <div class="arrows-slider"> <a href="#" id="prev4"><i class="fa fa-long-arrow-left"></i></a> <a href="#" id="next4"><i class="fa fa-long-arrow-right"></i></a> </div> </div> </div>
Adds this box:
Therefore you may want to change some of the details to some more suited for your blog. The arrows have been added by font awesome and are these two parts of the code:
<i class="fa fa-long-arrow-left"></i>
<i class="fa fa-long-arrow-right"></i>
The next part is the actual slider itself:
<div class="slideshow" data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-next="#next4"
data-cycle-prev="#prev4"
data-cycle-carousel-visible="7"
data-allow-wrap="false"
data-cycle-slides="div.slider-article"
>
<?php $thequery = new WP_Query( 'category_name=30daysofcoding&posts_per_page=30&order=asc' );
$count = 0;
if ( $thequery->have_posts() ) {
while ( $thequery->have_posts() ) {
$thequery->the_post(); $count++ ?>
<div class="slider-article">
<div class="slider-inner"><div class="slider-thumbnail"><?php the_post_thumbnail('slider-thumb', array('class' => 'slider-thumb')); ?></div>
<div class="slider-day"><?php echo $count?></div>
<div class="slider-desc"><a title="<?php printf(__('%s', 'framework'), get_the_title()); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div></div>
</div>
<?php }
} wp_reset_postdata(); ?>
</div>
</div>
This section of code says defines the options of the slider here:
<div class="slideshow" data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-next="#next4"
data-cycle-prev="#prev4"
data-cycle-carousel-visible="7"
data-allow-wrap="false"
data-cycle-slides="div.slider-article"
>
The next section is the jQuery and php.
The jQuery here:
<?php $thequery = new WP_Query( 'category_name=30daysofcoding&posts_per_page=30&order=asc' );
$count = 0;
if ( $thequery->have_posts() ) {
while ( $thequery->have_posts() ) {
$thequery->the_post(); $count++ ?>
Pulls out the post with the category 30daysofcoding, gives a limit of 30 posts and then puts them in ascending order. It then moves on to as if you have any post and counts them if you do. The 30daysofcoding in the code matches our post category name slug therefore you will have to change this to suit your blog as well. In order to find out what the slug is select categories under the posts in the left hand side bar and you will be able to see the slug in the table:
The next section:
<div class="slider-article">
<div class="slider-inner"><div class="slider-thumbnail"><?php the_post_thumbnail('slider-thumb', array('class' => 'slider-thumb')); ?></div>
<div class="slider-day"><?php echo $count?></div>
<div class="slider-desc"><a title="<?php printf(__('%s', 'framework'), get_the_title()); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div></div>
</div>This pulls out the feature image, the number post it is and the post title.
The final section:
<?php } } wp_reset_postdata(); ?> </div> </div>
Makes the data reset itself and repeat again in the slider.
Now add this piece of jQuery to the main.js file at the bottom:
$('.slider-article').hover(function(){$(this).find('.slider-desc').toggle()});
It creates this hover function:
Next add the styling to the style.css page first add this code to the bottom of the file:
/* =Slider
-------------------------------------------------------- */
/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow { width: 45%; min-width: 200px; max-width: 500px; margin: 10px auto; padding: 0; position: relative;
background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
}
/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img {
/*
some of these styles will be set by the plugin (by default) but setting them here
helps avoid flash-of-unstyled-content
*/
position: absolute; top: 0; left: 0;
width: 100%; padding: 0; display: block;
}
/* in case script does not load */
.cycle-slideshow img:first-child {
position: static; z-index: 100;
}
/* pager */
.cycle-pager {
text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span {
font-family: arial; font-size: 50px; width: 16px; height: 16px;
display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }
/* overlay */
.cycle-overlay {
font-family: tahoma, arial;
position: absolute; bottom: 0; width: 100%; z-index: 600;
background: black; color: white; padding: 15px; opacity: .5;
}
/* prev / next links */
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 0; background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;}
.cycle-next { right: 0; background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;}
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }
.disabled { opacity: .5; filter:alpha(opacity=50); }
/* display paused text on top of paused slideshow */
.cycle-paused:after {
content: 'Paused'; color: white; background: black; padding: 10px;
z-index: 500; position: absolute; top: 10px; right: 10px;
border-radius: 10px;
opacity: .5; filter: alpha(opacity=50);
}
/*
media queries
some style overrides to make things more pleasant on mobile devices
*/
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.cycle-slideshow { width: 200px;}
.cycle-overlay { padding: 4px }
.cycle-caption { bottom: 4px; right: 4px }
}
.slider{
display: block;
width: 1000px;
height: 100px;
position: relative;
overflow: hidden;
margin-bottom: 40px;
background: #fff;
}
#slider-box {
width: 115px;
background: #000;
height: 87px;
float: left;
padding: 0 5px;
}
.slideshow {
width: 875px;
height: auto;
display: inline-block;
overflow: hidden;
}
.slideshow img{
height:auto;
width:125px;
}
.slider-desc {
display: none;
position: absolute;
z-index: 2;
width: 114px;
height: 77px;
background: #000;
font-size: 11px;
padding: 5px;
top: 0px;
}
.slider-desc a{
color: #fff;
}
.slider-article {
display: inline-block;
}
.slider-day {
background: #000;
color: #FFF;
text-align: center;
padding: 3px;
width:23px;
height:auto;
font-size: 15px;
position: absolute;
bottom: 0px;
right: 0px;
}
.slider-inner {
position:relative;
width:124px;
height:87px;
border-left: 1px solid #fff
}
.slider-group {
color: #FFF;
padding: 0px 0px 12px;
}
.slider-group span {
font-size: 8px;
line-height: 0.3em;
color: #949494;
text-transform: uppercase;
letter-spacing: 1px;
}
.slider-group h5 {
font-style: normal;
margin: 0;
line-height: 1.5em;
}
.slider-nav {
color: #FFF;
border-top: 1px solid #868686;
padding: 1px 0 0 0;
}
.slider-nav a {
color: #FFF;
float: left;
}
.slider-nav a:last-of-type {
float: right;
}
.title-slider {
float: left;
font-size: 10px;
text-transform: uppercase;
}
.arrows-slider {
display: inline-block;
float: right;
width: 35%;
}
Please note ours doesn’t work with images because of the content in our posts therefore we have placed numbers as the images instead for each day of coding.
DAY 8 COMPLETE!
Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!
The post #8 Featured Posts Slider appeared first on The Fashion Technologist.
