Mip Design themes

Inspiredblog: How to implement filmstrip navigation from FancyThemeWed, Oct 28, 2009 in Freebies, Tutorials, WP templates

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

Related posts:

• ChangeLog – FancyTheme v3.1
• Retro theme tutorials (part I): How to position the navigation menu below the header image?
• Inspiredblog: How to disable style switchers and select your default color?
• ChangeLog – FancyTheme v4.2
• Inspiredblog: How to set up a simple contact form using Contact Form 7 plugin

About the Author

Danny is a freelance web designer and developer based in Zagreb, Croatia. He is also the founder and owner of Mip Design Studio. In his free time, he creates mostly wordpress themes sold on Themeforest, and on this blog gives support, advices and help. Contact the author | Visit authors website