Featured Slider is considered as one of the hottest elements on a website, the trend of using the slider effects continued each year. JQuery which has become Wordpress prominent javascript framework shows many love to sliding effect and this tutorial will guide you through one of them; the JQuery s3Slider.
View the HTML demo in here to see what we’re trying to create.
What You Need
JQuery. Get the latest JQuery download and place it inside your wordpress theme, you might create a new folder for it as well.
s3Slider.js. You can download the script in here and place it on the same folder as above.
Step 1: Modify Your Theme header.php file
I would assumed that your theme didnt have JQuery linked inside the header file, so you will need to link both files between the HEAD tag like these;
<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/js/jquery.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/js/s3Slider.js”></script>
Activate the s3Slider by placing this script after both lines;
<script type=”text/javascript”>
$(document).ready(function() {
$(’#slider’).s3Slider({
timeOut: 3000
});
});
</script>
you can modify the fade out speed by changing the timeout variable.
Step 2: Set up your Featured Slider Section
Try to locate where do you want to place the featured slider section, it could be in your header.php or other files, then start building the layer:
<div id=”slider”>
<ul id=”sliderContent”>
<li class=”sliderImage”> <img class=”featimg” src=”” alt=” />
<span class=”top”>Text to appear/ caption<span></li>
</ul></div>
This is the ground code of the html tag for using the s3Slider.
Now let’s apply it on wordpress theme.
<div id=”slider”>
<ul id=”sliderContent”>
<?php
$my_query = new WP_Query(’category_name=featured&showposts=3′);
while ($my_query->have_posts()) : $my_query->the_post();
?>
<li class=”sliderImage”> <img class=”featimg” src=”<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>” alt=”<?php the_title(); ?>” />
<span class=”top”><?php the_excerpt(); ?><span></li>
<?php endwhile; ?> </ul></div>
As you can see we have place wordpress magic inside,
$my_query = new WP_Query(’category_name=featured&showposts=3′);
This line will retrieve 3 posts from category named featured.
<img class=”featimg” src=”<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>” alt=”<?php the_title(); ?>” />
This line will get the image from your posts, you need to add custom field in your posting named ‘thumb’.
<span class=”top”><?php the_excerpt(); ?><span></li>
You can also use text from your post excerpt to appear on the featured slider.
Step 3: Add CSS styling for the slider
This styling is necessary to make your slider works.
#slider {
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}.sliderImage span {
position: absolute;
width: 150px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
All the properties on slider tag are important, you will also need to make sure all the images you’re using is the same width & height with the css definition. the .sliderimage span property is used for slider caption/text.
Step 4: Extra-Using Timthumb for image automatic scale
It might take you some extra time to make sure all the images you upload for the featured slider are having the same scale especially if your featured slider are regularly updated. Using automatic image rescaling is the option.
You could use the famous timthumb script build by Darren Hoyt. To make this magic happen you need to
- Download the timthumb script here.
- create a new folder inside your theme name it scripts and place timthumb.php inside, within the folder create another folder named cache.
- make the cache folder writable by changing the permission into 777 (chmod 777)
- in some web server it might also necessary to make the scripts and timthumb.php folder into 755.
Step 5: Extra-Apply the timthumb script for your images
modify this line:
<img align=”right” class=”featimg” src=”<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>” alt=”<?php the_title(); ?>” />
into
<img class=”featimg” src=”<?php bloginfo(’template_directory’); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>&h=150&w=150&zc=1″ alt=”<?php the_title(); ?>” />
the script will make automatic thumbnail for your images with 150×150 size (modify it to fit your need).
and that’s it you will have a smooth featured slider for your website.
I’ll try this, thanks!
Hello,
I was wondering if you could help add next and previous buttons to this tool on wordpress?
Just curious, I set this up on my site, but the last slide isnt playing. Any ideas?
Solved it. You need to add:
.clear {
clear: both;
}
to your style sheet and then add: before you close your list, then your last slide will play.
Oops, the code didnt display. Here it is again:
@Coloradocolin
yes, we need to add those on css file.
thanks a lot
are you sure this script is 100% right?
$(document).ready(function() {
$(’#slider’).s3Slider({
timeOut: 3000
});
});
for one the quotation marks are not standard characters so I changed those but this is still giving me an error in IE.
here’s the location I’m trying to set it up … it’s the 700×250 image milesbonny.com.s63937.gridserver.com
Please help
It’s seem to be hard to create featured content slider.
I can’t find S3slider anywhere.
for me, the header would show, but wouldn’t slide. i was unsuccessful at fixing it!
or me, the header would show, but wouldn’t slide. i was unsuccessful at fixing it!
p.s. if you could, would you remove that previous comment? didn’t mean to put my name.
Thank You =)
Thank your for that tips.
Could you show me how to add the button 1, 2, 3,… to that slide content?
Can I use directly to the wordpress that already use plugin with jquery ?
Can you show demo directly to wordpress ?
no images are coming in slide what do we have to make separate directory to call the images
Hi there,
Trying to set up the code into wordpress for flash at the top in the header. Getting confused as to where to put the code in the files already there and when you create new ones and how they all link together and where.
My images arent showing up.
Any help appropriated
I haven’t implemented this yet, so I’m just taking a blind stab at helping anyone having trouble seeing the images–
For your post, you need to create a new meta-data field called “thumb”. The field needs to be populated with a URL. You COULD just have a directory with images, but more likely you’ll use Wordpress’s uploader to upload an image to the post. But you don’t need to insert it into your post (if you don’t want to), it’ll just be an image that’s considered part of the post. In the gallery, “Show” the photo, and then copy the URL. Close the uploader, and paste this URL into the “thumb” meta-data field.
Now when the PHP iterates, it will look for a meta-data field in your post called “thumb”, and extract the URL you pasted. This becomes the image URL.
—
My question:
Like others above, I’m looking for next/prev arrows, as well as the slider to stop auto-sliding once one of those navigation links is clicked. Featured Slider v2 would be great!
Please say how to implement Featured Slider in Joomla 1.5.
Thanks
Thanks for the amazing tutorial , can I add this slider in the same manner to the BORNEO Joomla theme? or will it need more tweaking?
I get a “Parse error: parse error, unexpected ‘=’ in” with ‘$my_query = new WP_Query(’category_name=featured&showposts=3′);’
I’ve got the same parse error as Pat.
Thanks for this, worked a treat, spent a few minutes wondering why only the first span came up, and there is a small problem with the code example, the span for the excerpt isn’t closed, 2 opening spans, just in case anyone gets the same problem
hello all, i used s3slider on a html page and i could see my pictures scroll but when i save the page as .php the images dont display what could be happening.
why is the php page not displaying my images.
Hi,
Nice script, all though some errors.
in the php’s ” and ’ are used, this is not correct, should be ” and ‘.
On the s2slider’s page is the right code. This is my code, it works on IE to.
have_posts()) : $my_query->the_post();
?>
<a href=""><img class="featimg" src="ID, "thumb", $single = true); ?>" alt="" />
Style:
#s3slider {
width: 536px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
margin-bottom: 10px;
}
#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
height: 300px;
}
#s3sliderContent a:link, #s3sliderContent a:active, #s3sliderContent a:visited {
text-decoration : none;
}
#s3sliderContent a:hover {
text-decoration : underline;
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
height: 300px;
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 11px 'Lucida Grande',Arial,Helvetica,sans-serif;
padding: 10px 13px;
width: 510px;
background-color: #000;
filter: alpha(opacity=80); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}
.clear {
clear: both;
}
Hope it helps.
Paul
sorry, the php did not post correctly, here again:
‘
have_posts()) : $my_query->the_post();
?>
<a href=”"><img class=”featimg” src=”ID, “thumb”, $single = true); ?>” alt=”" />
‘
sorry Ivan…
ill try a blockquote…
hope this works, was my last try. otherwise inspect my source
Looks like no one can figure out that pasting code here DOESN’T WORK. I need help with why the last image won’t show up, the person who posted a fix got their code cut off!!!
is there any simple for this example ?
ı didnt found
Nice tutorial but if you can show it with demo live i think more better
I had a problem with the caption not showing up after the first picture and realized that the code for the caption should be
also if you want the caption on the right or left you can create a class as such and add this to the css
.right {
right: 0;
bottom: 0;
width: 160px !important;
height: 435px;
}
I got a version of the plug in working on my demo site
keithkeslerdesign.com/blog
sorry the code didn’t show up. what you need to do is close the span element with a backslash instead of leave it open like is shown in the tutorial.
instead of
very nice tutorial…i tried it out so far but i only have one image showing.No sliding.I’m working on my local server so you cant take a look on my site.I correctly changed the directory to the .js files, i copied and pasted the other codes as shown,added the content field on every post.Could anyone please tell me what i’m doing wrong and why the plugin isnt sliding?Thanks!!
<script type="text/javascript" src="/jquery/jquery.js">
<script type="text/javascript" src=”/jquery/s3Slider.js">
well i tried to post the linking of the js.files in the header right above…didnt work.does anyone have a clue where the problem is?
solved it.the directory path to the js.files was wrong
This is crap. Doesn’t work. I’m sick of amateur tutorial - waste of time..