As I promised in the previous post on How to create a Feature Article slide show with thumbnails and indicator I m going to integrate this into WordPress. Here is a live example at one of my projects http://www.kakafans.net/
To use the particular file I release for downloading in this post you have to
- write a post you want to put in the gallery
- tag it with “photo”
- make a custom field called article_image
- put image url into the custom field
This is how I made it
First get featured posts with tag
What this snippet does is getting 10 posts with the tag named photo
1 2 3 4 | <?php $feature_posts = get_posts('tag=photo&numberposts=10&orderby=post_name&order=DSC'); foreach($feature_posts as $post) : setup_postdata($post); ?> |
Use custom field to get image URL
This code fetches the url you put in custom field called article_image, and put them in an array called image
<?php $image = get_post_meta($post->ID, 'image', TRUE); ?> <?php if($image) { ?> <img src="<?php echo $image; ?>" alt="Alt Text" /> <?php } ?> <?php //get article_image (custom field) ?> <?php $image = get_post_meta($post->ID, 'article_image', true); ?>
Code from previous tutorial
Now this part should look familiar to you if you have read my previous post on making a content slideshow.
<div class="bigimg" title="<?php the_title(); ?>" id="<?php echo $image; ?>" name="<?php echo $image; ?>" alt="<?php the_title(); ?>"> <a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" class="change"/></a> </div> <?php endforeach; ?>
Putting all php code together
This is the php file, I called it gallery.php
<div id="feature_gallery" class="clear"> <?php $feature_posts = get_posts('tag=photo&numberposts=10&orderby=post_name&order=DSC'); foreach($feature_posts as $post) : setup_postdata($post); ?> <?php $image = get_post_meta($post->ID, 'image', TRUE); ?> <?php if($image) { ?> <img src="<?php echo $image; ?>" alt="Alt Text" /> <?php } ?> <?php //get article_image (custom field) ?> <?php $image = get_post_meta($post->ID, 'article_image', true); ?> <div class="bigimg" title="<?php the_title(); ?>" id="<?php echo $image; ?>" name="<?php echo $image; ?>" alt="<?php the_title(); ?>"> <a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" class="change"/></a> </div> <?php endforeach; ?> <div id="output"></div> </div>
JavaScript File
This is the same javascript file from previous tutorial. The only changes I have made are: 1. I took out $(‘body’).addClass(‘hasJS’); 2. I put thumbnail url in id attribute instead of title. I didn’t use “output” in my example, cause it is not necessary for that site but if you want to use it you can put excerpt or title in “title” attribute and it will display at your output div.
$(function(){ // homepage cycles $('#feature_gallery .bigimg').wrapAll(' <div class="bigimgs">').parents('#feature_gallery').prepend(' <ul id="feature_gallery_pager" class="menu">').cycle({ fx:'scrollLeft', easing: 'swing', inDelay: 250, drop: 40, timeout: 5000, pause: true, before: onBefore, slideExpr: '.bigimg', pager: '#feature_gallery_pager', pagerAnchorBuilder: function(idx, slide) { return ' <li><a href="#"><img class="thumb" src="'+slide.id+'" alt="" /></a></li>'; } }); $(function() { jQuery('#feature_gallery_pager').jcarousel({ scroll:1 }); }); function onBefore() { $('#output').html("Scrolling image: " + this.title); } });</ul> </div>
linking files
Last step, link the js file in head section and include your gallery.php file wherever you want the slide show to appear in your theme.
<?php include (TEMPLATEPATH . '/gallery.php'); ?>
You can download the gallery.php and gallery.js file here
Please feel free to change the file for your convenience. I will try to make it into a plugin when I have time.
Really good tutorial.
Technogati’s last blog post..How To Remove Blogger Navbar?
[Reply]
design-notes.info to GoogleReader!
Nadine
[Reply]
Thanks for good post
[Reply]
I like your idea.
But It seem hard to do because it could crash my theme.
I’m using D13 Slide show but I’m not pleased with that.
could you make a plugin?
V,C´s last blog ..Daily Horoscopes for July 5, 2009
[Reply]
alexandra Reply:
July 5th, 2009 at 6:19 am
I will do it as soon as I have some time.
[Reply]
Is there a way to set this to load only after the rest of the page has loaded? As it is now, all of the featured post images load one beneath the other and only turn into a slideshow after the rest of the page is done loading.
[Reply]
alexandra Reply:
July 8th, 2009 at 4:50 am
Try put all js script in footer. about positioning, use absolute position for jcarousel container) which are the thumbnails. I only changed css for positioning.
[Reply]
Scratch my last question, it doesn’t seem to be loading that way anymore.
I do have another question, though. How can I move the thumbnails to beneath the featured post? I’m sure it’s simple and I’m overthinking it, but I can’t seem to get it to work.
[Reply]
Thank you for your help! The absolute positioning worked great.
I’m setting this up for a friend, and she wants to avoid the tag/custom field thing. I know a plugin that pulls the first image from a post, and it can be set up to pull from a certain category, but I’m having trouble integrating it into the slideshow. I was able to get it loading the large image fine, but the thumbnails are having an issue. The plugin is Post Thumb Revisited ( http://www.alakhnor.com/post-thumb ).
Any idea on how to use the plugin to load the images? Here is an example of how the code for the plugin looks (took out the start and end tags in case they would render the code useless) –
php if (function_exists(‘the_thumb’)) { the_thumb(‘keepratio=0&altappend=slideshow_&width=500&height=250&category=391&offset=0&limit=1&myclassimg=change&link=p’); }
That’s the code I used to set the slideshow up to load the big image, actually.
[Reply]
Thanks for your tutorial but i have a problem with IE6. Can you fix it ? Here you can see my error on IE6. http://tradehn.net/deedsblog. Thanks again !!! ^^
[Reply]