How To Create Featured Slideshow Without Plugin. Featured slide show is a facility on a news web that allows web owners to share something special. For example, special news and hot or important events are rare and worth known by many people. For blogs, usually used in specific articles These facilities are made in the form of a dynamic with cool animation.
Actually there are many types of slideshows. But I’m trying to share here is pretty simple slideshow so it is very easy to modify. You can combine themselves in order to look more cool, for example by increasing the size of the thumbnails larger specific to this featured slideshow. You can also modify the zoom. Okay, let’s get started.
For purposes of creating this featured slideshow, we need two pieces of javascript files that will manage our slideshow later. So, please first download the file here. It is a zip file with a js folder in it. You only need exstract to your themes folder.
If it is, now let's start editing two files are index.php and style.css . In the index.php file we put 2 rows of code in 2 separate places. First before the closing </head> and the second in the place where you want the slideshow to appear. I usually put it after the div content.
Before the closing </head> we enter this code to call the javascript file above 2 and jquery files that already exist in WordPress:
if (is_home()) {
wp_enqueue_script('jquery');
wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');
wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');
}
Later in the place where the slideshow appears, please attach code this featured slideshow :
<script type="text/javascript">
jQuery(function() {
jQuery(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 1,
speed: 2000,
auto: 3000,
easing: "backout"
});
});
</script>
<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">
<ul>
<?php
$my_query = new WP_Query('showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;
?>
<li>
<div class="mytext">
<a href="<?php the_permalink() ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else {
echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.png" alt="'.get_the_title().'" class="wp-post-image"/>';
}
?>
</a>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_content_rss('more_link_text', TRUE, '', 30); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">read more..</a></p>
<div class="slimeta">
<a href="#" class="prevb">« Previous</a><a href="#" class="nextb">Next »</a>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
The above code will display the latest 5 articles in the featured slideshow. If you want to change, please change this code corresponding query that you want :
$ my_query = new WP_Query ('showposts = 5');
Furthermore, we lived regulate how this featured slideshow appear through style.css. Here’s the style that I use. You can modify it yourself :
/* SLIDER */
#slidearea{
height: 170px;
overflow: hidden;
margin:10px 0px 0px 0px;
padding:10px;
position: relative;
width:560px;
border:solid 1px #cccccc;
background: #ededed;
}
#gallerycover{
overflow: hidden;
margin:0px 20px 0px 0px;
}
.mygallery{
overflow: hidden;
position:relative;
}
.mytext img{
float:left;
}
.mytext{
position:relative;
margin:0px 5px 0px 5px;
height: 240px;
display:inline;
float:left;
color:#c4c4c4;
}
.mytext h2 {
padding:0px;
margin:0px;
font-size: 18px ;
font-weight:bold;
font-style:italic;
}
.mytext h2 a:link,.mytext h2 a:visited{
color:#006b97;
text-decoration:none;
}
.mytext p{
padding:0px 0px;
color:#555;
font-size: 14px ;
line-height:20px;
font-style:italic;
text-shadow:1px 1px 0px #f6f6f6;
}
.nextb {
float:rightright;
}
.prevb {
float:left;
}
Well, that’s all that needs to be done to create a plugin slideshowtanpa featured. Stay what you set yourself the look you want. Because each person must have their own artistic touch. Okay, congratulations creative
