Page slider WordPress
- SOLVED
Hi!
I need a slider to show a thumbnail image and the name of the pages of my site.
At a glance I need it to show 5 pages and then have arrows to show the older ones.
It's going to be on the homepage of my wordpress site.
I want it to look like this:
[[LINK href="http://www.soydreams.info/prueba.jpg"]]http://www.soydreams.info/prueba.jpg[[/LINK]]
Please let me know if you need more information or if you think that the money I'm offering its insufficient.
I need this as soon as possible.
Thanks for everything!
Answers (4)
Buzu B answers:
Are you looking for something like this:
[[LINK href="http://wordpress.org/extend/plugins/featured-posts-slideshow/screenshots/"]]http://wordpress.org/extend/plugins/featured-posts-slideshow/screenshots/[[/LINK]]
Or do you need it to be done from scratch?
Olivia comments:
Hi Buzu!
Thanks for answering.
Something like that could work. I just need it to show pages instead of posts + the title of the page and some help with the CSS.
But I don't need it to be done from scratch.
O.
Oleg Butuzov answers:
ifyou need just show pages inteead posts just use in your query_posts
post_type=page
post_type eq page
Olivia comments:
Hi Butuzov.!
I don't know how to add the name of the page below the thumbnail image neither how to change the CSS to make it look the way I want.
Anyone could give me a hand with that?
Oleg Butuzov comments:
i will be free in 15 minutes. you can use my contact information in my profile.
Chris Lee answers:
You'll want to first start with your functions file and enable page thumbs:
(functions.php)
add_theme_support( 'post-thumbnails' );
add_theme_support( 'post-thumbnails', array( 'post' ) ); // Support for Posts
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Support for Pages
Now modify the loop to grab pages
(index.php)
<?php //The Query
query_posts('posts_per_page=5&post_type=page&post_status=publish'); ?>
<div id="page-carousel" class="jcarousel-skin-name">
<div class="jcarousel-container">
<div class="jcarousel-clip">
<ul class="jcarousel-list">
//The Loop
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li><div class="page-thumb"><?php the_post_thumbnail(); ?></div>
<div class="page-title"><?php the_title(); ?></div></li>
<?php endwhile; else: ?>
</ul>
</div>
<div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
<div class="jcarousel-next"></div>
</div>
</div>
</div>
<h1>No Posts</h1>
<?php endif;?>
Download the jcarousel: http://sorgalla.com/projects/jcarousel/
setup your config file to initialize the carousel
(carousel.js)
jQuery(document).ready(function() {
jQuery('#page-carousel').jcarousel();
});
I'll need more info on how you'll want to style it
Olivia comments:
Hi Chris,
Thanks
I want it to look like this image that I made in photoshop.
One page next to the other, the name below it and the arrows on the side.
http://www.soydreams.info/prueba.jpg
Olivia comments:
Chris,
After going to http://sorgalla.com/projects/jcarousel/ what do I need?
jcarousel.tar.gz or jcarousel.zip?
And then where should I upload that? To my plugins folder?
And what do you mean with setup your config file to initialize the carousel?
Should I open carousel.js and paste that piece of code?
Where?
Thanks and sorry or my very basic questions,
O.
Chris Lee comments:
@olivia
They're the same. Either one works. They're the same file. different zip type. Just grab the zip file. it's more universally used.
Olivia comments:
Thanks!
What about my other questions?
Chris Lee comments:
Sorry. Carousel.zip should go in your theme folder along as the jquery file:
i.e:
wp-content/
-> /my-theme/
-> js/
-> jcarousel-min.js (file you unzipped from the website)
-> carousel.js (config file that will call jcarousel function)
-> jquery-latest.js (jquery library that powers everything)
remember to reference it in the head of your theme. I'll assume you know how to do this.
The setup i was referring to was creating a file and naming it: carousel.js (file name doesn't matter just reference it in your theme after the carousel
Olivia comments:
Hi Chris,
I'm guessing that you don't have time right now to answer with more detail but I have a couple of questions.
a) In the zip file I only found these files:
jquery-1.4.2.min.js
jquery.jcarousel.js
jquery.jcarousel.min.js
are these the same files that you are talking about? That I have to paste on my theme?
b)In the carousel.js file that I have to create do I have to paste only this code:
jQuery(document).ready(function() {
jQuery('#page-carousel').jcarousel();
});
c)No, I'm not good at Jquery. Could you tell me how to reference the code at the head of my theme?
d)What about the CSS?
Thanks!
Chris Lee comments:
a) Yes. Those are all the correct files. My mistake; I assumed you've worked with them before.
and add in the references to them between the head tag:
b) create your own file and paste that in. Later (see "c" below) reference them in the header of your template file
c)
you reference them just as you would do it with any javascript file.
(header.php)
<script src="<?php bloginfo('template_directory')?>/js/jquery-1.4.2.min.js"></script>
<script src="<?php bloginfo('template_directory')?>/js/jquery.jcarousel.min.js"></script>
<script src="<?php bloginfo('template_directory')?>/js/carousel.js"></script>
d) consult the jcarousel jquery plugin page. it should give you a better idea how to style them exactly to your needs: http://sorgalla.com/projects/jcarousel/
or use the examples provided: http://sorgalla.com/projects/jcarousel/examples/static_simple.html
Olivia comments:
Hi Chris,
Thanks for your answer. I think that I'm really close to make it!
I did everything that you told me but I'm getting this message:
The page at http://www.soydreams.info says:jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...
Do you know what should I do?
Thanks again!
O.
Olivia comments:
And a small detail:
How can I exclude some pages from the query? or only show the children of a parent page?
I tried some versions of the http://codex.wordpress.org/Function_Reference/query_posts but everything give me an error
thanks again
Chris Lee comments:
Olivia:
Awesome; i'm excited for you. If you want to show just the child pages. you would have to first pick the parent id of the page.
so modify your query array (from above example):
<?php $parent = $post->ID; ?>
<?php query_posts('posts_per_page=5&post_type=page&post_status=publish&child_of='.$parent'); ?>
I think that should work. I haven't actually run that query. Let me know if it gives you trouble.
Olivia comments:
Hi Chris,
Thanks again. I think that you didn't see the messeage that I posted prior of the child pages. I'm getting this in the page of the carrousel, what should I do?
The page at http://www.soydreams.info says:jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...
Olivia comments:
Another thing...
I think this code is missing a '
<?php $parent = $post->ID; ?>
<?php query_posts('posts_per_page=5&post_type=page&post_status=publish&child_of='.$parent'); ?>
And should I put the ID number of the page where it says '.$parent' like this: '.$18' ?
Chris Lee comments:
you're right there. Take out the extra '
my apologies. doing it too quickly
query_posts('posts_per_page=5&post_type=page&post_status=publish&child_of='.$parent); ?>
<blockquote>And should I put the ID number of the page where it says '.$parent' like this: '.$18' ? </blockquote>
no. you define it before like this $parent = '18';
Olivia comments:
So this is what I wrote but it's not working:
<?php $parent = '18'; ?>
query_posts('posts_per_page=5&post_type=page&post_status=publish&child_of='.$parent); ?>
And I'm still getting this message:
The page at http://www.soydreams.info says:jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...
O.
Olivia comments:
Hi everybody!
Someone just asked me time to solve this and give me the entire code that I need to have this exactly how I want it to be.
Please don't waste your time working on this because I'll wait for this person until Tuesday. If I don't get the proper answer I'll let you know.
Thanks to everybody!
Have a nice beginning of the week.
Chris Lee comments:
Olivia:
Do you have a link of what's going on currently?
Olivia comments:
It is in www.soydreams.info
After show in me the message a couple of times it stop appearing.
Chris Lee comments:
First you need to figure out what is wrong with your DD smooth menu. it's causing an error.
I'm not sure what it could be.