Jump to content

How to make image slider like Killersites.com?


ericlooi

Recommended Posts

I would like to do something like the slider in http://www.killersites.com but with the whole image as a link.

 

Can someone please help?

 

Basically, this is the template that i use and the template file name is fullwidth-template-notitle.php and the code is :

 

<?php
/*
Template Name: Full Width Page No Title
*/
?>
<?php
if (get_option('flex_content_trans') == "no") {
$fwpagewidth = get_option('flex_blog_width') - get_option('flex_blog_padding');
$fwcontentwidth = get_option('flex_blog_width') - (get_option('flex_blog_padding') * 2);
} else { 
$fwpagewidth = get_option('flex_blog_width');
$fwcontentwidth = get_option('flex_blog_width');
}
?>
<?php get_header(); ?>
<?php if (get_option('flex_feat_display') == "no" OR get_option('flex_feat_pages') == "home only" OR get_option('flex_feat_pages') == "home and posts") { ?>
<?php if ( is_front_page() AND get_option('flex_feat_display') != "no" ) { ?>

<div id="feature"><div class="topshadow">
   <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Top Feature') ) : else : ?>
  <?php include (TEMPLATEPATH . '/feature.php'); ?>    
   <?php endif; ?><div style="clear:both;"></div>
   </div></div><?php } ?>

      <?php } else { ?>

   <div id="feature"><div class="topshadow">
   <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Top Feature') ) : else : ?>
  <?php include (TEMPLATEPATH . '/feature.php'); ?>    
   <?php endif; ?><div style="clear:both;"></div>
   </div></div><?php } ?>
   <?php if (get_option('flex_nav_show') == "yes" && (get_option('flex_nav_position') == "below feature")) {
include (TEMPLATEPATH . '/includes/nav.inc.php');
} ?>
<div id="content" style="width:<?php echo $fwpagewidth; ?>px;">

 <div class="postwrap" style="width:<?php echo $fwcontentwidth; ?>px;">

   <div class="post"> <div class="postcontent">
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

     <?php the_content("<p>__('Read the rest of this page')</p>"); ?>
     <?php edit_post_link(__('Edit'), '<p>', '</p>'); ?>
  <?php wp_link_pages('before=<div id="page-links"><p style="text-align:right"><strong>Pages:</strong>&after=</p></div>'); ?>
     <?php endwhile; endif; ?>
   </div></div>
<?php if (get_option('flex_metadata_comoff') == "yes") { ?>
   <?php if(comments_open()) : ?>
   <?php comments_template('', true); ?>
   <?php endif; ?>
<?php } ?>
 </div>
</div>
<?php get_footer(); ?>

 

And it's calling from the feature.php . In which the code I don't use:

 

 

 


<!-- This is the title and intro text for the feature section -->
<!--
<div class="feat_box"><h2 style="padding:0 0 0 10px; margin:0px;color:#fc0; font:normal 26px Georgia, serif;"><span style="color:#FC0; font-weight:bold;">Content area 1</span><br/> You can use a bold headline here to catch the eye!</h2>
<p style="padding: 0 0 0 10px;">This is an area that can be used for featured content such as special offers or affiliate links.</p>
<p style="padding: 0 0 0 10px;">See the default content in feature.php to see how to replace this with your own content. You can also activate widgets to replace this content.</p>
<h2 style="padding:0 0 0 10px; margin:0px;color:#fff; font:normal 18px Georgia, serif;"> Link to other content: <a href="#" style="font-weight:bold; color:#FC0;">Link here!</a></h2>
</div>
-->

<!-- This is the top right side featured item in the feature section -->
<!--
<div class="feat_box">
 <img src="<?php bloginfo('template_directory'); ?>/images/sample-ebook.png" style="float:right; margin-left:10px;" alt=""/><h2>Special Offer 1</h2>
 This is an area that can be used for featured content such as special offers or affiliate links. Easily edit this text in the feature.php file.  <a href="#" target="_top"><strong>Read more!</strong></a> 
</div>
-->

<!-- This is the lower right side featured item in the feature section -->
<!--
<div class="feat_box">
 <img src="<?php bloginfo('template_directory'); ?>/images/sample-ebook.png" style="float:right; margin-left:10px;" alt=""/><h2>Special Offer 2</h2>
 This is an area that can be used for featured content such as special offers or affiliate links. Easily edit this text in the feature.php file.  <a href="#" target="_top"><strong>Read more!</strong></a> 
</div>
-->

 

Thanks!

Eric.

Link to comment
Share on other sites

Thanks Ben!

 

May I know how should I install this plugin in my wordpress? I installed in using the normal plugin installation process but it says "The plugin does not have a valid header."

 

I'm not good in coding nor jquery.

 

Can you please guide?

 

Thanks!

Eric.

 

If I remember correctly, this is the jquery plugin that the slideshow uses: http://jquery.malsup.com/cycle/ (or there is a "lite" version if you don't need as many features: http://jquery.malsup.com/cycle/lite/)

Link to comment
Share on other sites

Take a look at the source code of http://jquery.malsup.com/cycle/basic.html for a basic example of how to include the jquery plugin. This isn't a Wordpress plugin, so you won't be able to add it using Wordpress' interface.

 

Basically, there are four steps:

 

1) Include a link to the main jquery library within the <head> section of your theme (yourwebsite.com/wp-content/themes/yourtheme/header.php) like this:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2) Include a link to the cycle or cycle lite plugin (again, within the <head> section of your theme):

 

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

(you may need to update that link if you want to use a version of the cycle plugin that you upload to your hosting.)

 

3) Include a jquery block that initializes the cycle effect within the <head> section:

 

<script type="text/javascript">
$(document).ready(function() {
   $('.slideshow').cycle({
	fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

(the ".slideshow" section indicates which class you want to apply the cycle plugin to.)

 

4) Final thing: make sure the items that you want to cycle are in the correct format. You need to call the cycle effect on the parent element, and all child elements will cycle. For example, this would work:

 

<div class="slideshow">
 <div>Slide 1</div>
 <div>Slide 2</div>
 <div>Slide 3</div>
</div>

and so would this:

 

<ul class="slideshow">
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
</ul>

Those child elements can contain anything you want -- text, images, etc.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...