integrate feature article content slide show into wordpress

Under: Wordpress 18 comments

Development • JQuery • Slide show • Tutorial • Wordpress
Follow responses leave a responseTrackback

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/

integrate feature article slider into wordpress

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

<?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.

Design-Notes

Popular Posts