“I would really appreciate your suggestion of a tutorial, how to include the gallery of your Fancy Theme’s starting page to the starting page of Inspired Blog. I guess, this would be interesting to others, too.. “ said Colorit.
Well, it took me a little while, but here is a tutorial how to do it.
1. Add new options to administration
Open “admin-options.php” file located in “functions” folder and insert (paste) the following code at line 46:
array( "name" => "Filmstrip navigation", "type" => "heading", "desc" => "Settings for home post animation"), array( "name" => "Post/page Highlight IDs", "desc" => "Please enter ID of post(s) you want to display on homepage and separate them by commas", "id" => $shortname."_hl_ID", "std" => "", "type" => "text"), array( "name" => "Highlight overlay color", "desc" => "Please enter color of overlay panel", "id" => $shortname."_hl_overlay", "std" => "", "type" => "text"), array( "name" => "Highlight opacity", "desc" => "Please enter opacity overlay panel (Example: 0.6, 0.3 ...)", "id" => $shortname."_hl_opacity", "std" => "", "type" => "text"), array( "name" => "Filmstrip Thumbnail width", "desc" => "Please enter desired thumbnail width", "id" => $shortname."_h1_thumb_width", "std" => "", "type" => "text"), array( "name" => "Filmstrip Thumbnail height", "desc" => "Please enter desired thumbnail height", "id" => $shortname."_h1_thumb_height", "std" => "", "type" => "text"),
2. Copy all javascript files
Just download this zip file and extract it to themes “js” folder.
3. Include javascript files
Open “header.php” file and replace old jQuery easing plugin at line 43:
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.min.js" type="text/javascript"></script>
with the following code:
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.1.3.js" type="text/javascript"></script>
and add this two lines as last called javascript functions:
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.galleryview-1.1.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.timers-1.1.2.js" type="text/javascript"></script>
4. Set new easing effect for LavaLamp menu
New easing plugin has changed animation names so we need to change line 56:
jQuery("#nav").lavaLamp({ fx: "backout", speed: 700 });
to:
jQuery("#nav").lavaLamp({ fx: "easeOutBack", speed: 700 });
5. Create filmstrip navigation file
Create new blank file “filmstrip_navigation.php” in themes root directory and paste the following code:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#photos').galleryView({
panel_width: 930,
panel_height: 275,
overlay_width: 285,
overlay_opacity: <?php echo get_option('miptheme_hl_opacity');?>,
overlay_position: 'top',
overlay_color: '<?php echo get_option('miptheme_hl_overlay');?>',
overlay_text_color: '#fff',
caption_text_color: '#dedfdf',
background_color: '#444444',
border: 'none',
nav_theme: 'light',
frame_width: <?php echo get_option('miptheme_h1_thumb_width');?>,
frame_height: <?php echo get_option('miptheme_h1_thumb_height');?>,
easing: 'easeInOutQuad',
pause_on_hover: true
});
});
</script>
<div id="head-highlight" class="box">
<div class="head-highlight-inner clearfix">
<div id="photos" class="galleryview">
<?php
global $post;
$nav = '';
$my_query = get_posts('include='.get_option('miptheme_hl_ID').'');
foreach($my_query as $post) :
?>
<div class="panel">
<?php
if ( get_post_meta($post->ID,'thumb', true) ) {
?>
<img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&amp;amp;amp;amp;h=275&amp;amp;amp;amp;w=928&amp;amp;amp;amp;zc=1&amp;amp;amp;amp;q=80" alt="<?php the_title(); ?>" />
<?php
}
?>
<div class="panel-overlay">
<h2><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<p><?php echo ShortenText( $post->post_content, 250 ); ?></p>
<a title="Permanent Link to <?php the_title(); ?>" class="detail" href="<?php the_permalink(); ?>">more detail</a>
</div>
</div>
<?php
$nav .= '<li><img src="'. get_bloginfo('template_url') .'/thumb.php?src='. get_post_meta($post->ID, "thumb", $single = true) .'&amp;amp;amp;amp;h='. get_option('miptheme_h1_thumb_height') .'&amp;amp;amp;amp;w='. get_option('miptheme_h1_thumb_width') .'&amp;amp;amp;amp;zc=1&amp;amp;amp;amp;q=80" alt="'. $post->post_title .'" /></li>';
endforeach;
?>
<ul class="filmstrip">
<?php echo $nav; ?>
</ul>
</div>
</div><!-- end head-highlight-inner -->
</div><!-- end head-highlight -->
6. Include filmstrip navigation on homepage
Open “index.php” file and insert this code at line 12:
<?php include ('filmstrip_navigation.php'); ?>
7. Let’s style the navigation
Open “style.css” file and just insert the following code:
/* Highlight - Main
------------------------------------------------------*/
#head-highlight
{
padding: 15px 15px 2px 15px;
margin-bottom: 15px;
font-size: 1.1em;
color: #dedfdf;
background-color: #444;
}
#head-highlight .panel img { border: 1px solid #999; }
#head-highlight h2
{
font: normal 1.8em/120% Georgia, Times, serif;
color: #fff;
margin-bottom: 10px;
}
#head-highlight h2 a
{
color: #fff;
}
#head-highlight p
{
color: #dedfdf;
}
#head-highlight a.detail
{
display: block;
font: bold 1.0em/140% Arial, Tahoma, sans-serif;
color: #fff;
margin-bottom: 5px;
background: url("images/bullet_1.png") no-repeat 0% 80%;
padding-left: 18px;
}
8. Set up your navigation
Go to wordpress administration and under Appearance select “Theme Options”. You will se new section here called “Filmstrip navigation”. You have to populate all the fields and click “Update” at the end of page. Here is the example how to insert proper values:
Preview
You can preview live demo here.
