Coda Slider not working with Static Page

I guess I have posted the question in a wrong section… Please anyone help me…

hello anan

please don’t confuse me with someone who knows what they’re doing but I’ve got the above to work, though with variation:

index.php

<?php get_header(); ?>

	<div id="mid" class="index">

		<!-- Start slider -->
		<div class="stripViewer">
			<div class="panelContainer">

			<?php if (have_posts()) : ?>

				<?php while (have_posts()) : the_post(); ?>

				<div class="panel" id="post-<?php the_ID(); ?>" title="<?php the_title() ?>">
					<div class="wrapper">

<?php
$media_type = get_post_meta($post->ID, 'lead_type', true);
$media = get_post_meta($post->ID, 'lead_image', true);
/* Display relevant code based on media type */
if(stristr($media, '.flv') || $media_type == 'flash') {
/* Grab video preview image if the user has added one */
$video_preview = get_post_meta($post->ID, 'video_preview', true); ?>
<span id="video-<?php the_ID(); ?>" class="flashvideo" style="height: 600px; width: 940px;">
<script type="text/javascript">
var s<?php the_ID(); ?> = new SWFObject("<?php bloginfo('template_directory'); ?>/flash/player.swf","n0","940","600","7");
s<?php the_ID(); ?>.addParam("allowfullscreen","false");
s<?php the_ID(); ?>.addParam("allowscriptaccess","always");
s<?php the_ID(); ?>.addParam("wmode","transparent");
s<?php the_ID(); ?>.addVariable("javascriptid","n0");
s<?php the_ID(); ?>.addVariable("controlbar","none");
s<?php the_ID(); ?>.addVariable("stretching","fill");
s<?php the_ID(); ?>.addVariable("height","600");
s<?php the_ID(); ?>.addVariable("width","940");
s<?php the_ID(); ?>.addVariable("searchbar","false");
s<?php the_ID(); ?>.addVariable("screencolor","0xffffff");
s<?php the_ID(); ?>.addVariable("overstretch","true");
s<?php the_ID(); ?>.addVariable("showeq","false");
s<?php the_ID(); ?>.addVariable("showicons","false");
s<?php the_ID(); ?>.addVariable("shownavigation","false");
s<?php the_ID(); ?>.addVariable("showstop","false");
s<?php the_ID(); ?>.addVariable("showdigits","false");
s<?php the_ID(); ?>.addVariable("showdownload","false");
s<?php the_ID(); ?>.addVariable("usefullscreen","true");
s<?php the_ID(); ?>.addVariable("autoscroll","false");
s<?php the_ID(); ?>.addVariable("thumbsinplaylist","false");
s<?php the_ID(); ?>.addVariable("autostart","false");
s<?php the_ID(); ?>.addVariable("bufferlength","3");
s<?php the_ID(); ?>.addVariable("repeat","false");
s<?php the_ID(); ?>.addVariable("rotatetime","5");
s<?php the_ID(); ?>.addVariable("shuffle","false");
s<?php the_ID(); ?>.addVariable("smoothing","true");
s<?php the_ID(); ?>.addVariable("volume","100");
s<?php the_ID(); ?>.addVariable("enablejs","true");
s<?php the_ID(); ?>.addVariable("linkfromdisplay","false");
s<?php the_ID(); ?>.addVariable("linktarget","_self");
s<?php the_ID(); ?>.addVariable("image","<?php echo $preview_image; ?>");
s<?php the_ID(); ?>.addVariable("file","<?php echo $media; ?>");
s<?php the_ID(); ?>.write("video-<?php the_ID(); ?>");
</script>
</span>

<? } elseif(stristr($media, 'iframe') || $media_type == 'iframe') {

/* Insert Iframe directly, stripping slashes from links etc */

echo stripslashes($media);

} else {

/* Else default behaviour is to display image */ ?>

<img src="<?php echo $media; ?>" alt="" width="940" height="600" />

<? }
?>

						<!-- <?php $image = get_post_meta($post->ID, 'lead_image', true); ?> -->
						<!-- <img src="<?php echo $image; ?>" alt="" width="940" height="600" />  -->

						<div class="post-title">
							<!-- <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"> -->
							<?php the_title(); ?>
							<!-- </a> -->
						</div>
						<div class="entry">
							<?php the_content(); ?>
						</div>
					</div>
				</div>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

				<div class="panel" id="nav-panel">
					<div class="wrapper">
						<img src="<?php bloginfo('template_directory'); ?>/images/where.jpg" alt="" width="940" height="600" />
						<div class="post-title">
							Where next?
						</div>
						<div class="entry">
							<span class="big"><a href="<?php bloginfo('comments_rss2_url'); ?>" class="rss-big">Recent Comments</a></span>
							<ul><li></li><?php dp_recent_comments(); ?></ul>
							<span class="big"><span class="left"><?php previous_posts_link('&laquo; Newer Entries') ?></span>
							<span class="right"><?php next_posts_link('Older Entries &raquo;') ?></span></span>
						</div>
					</div>
				</div>

			</div><!-- .panelContainer -->
		</div><!--.stripViewer -->

	</div><!-- .mid -->

	<div class="stripNavL" id="stripNavL0"><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/left.png" alt="Left" /></a></div>
	<div class="stripNavR" id="stripNavR0"><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/right.png" alt="Right" /></a></div>

<?php get_footer(); ?>

header.php (for js files):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="https://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php if(is_home() || is_category()) : ?>
	<script src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.1.pack.js" type="text/javascript"></script>
	<script src="<?php bloginfo('template_directory'); ?>/js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
	<script src="<?php bloginfo('template_directory'); ?>/js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
	<script src="<?php bloginfo('template_directory'); ?>/js/coda-slider.1.1.1.js" type="text/javascript"></script>
	<script src="<?php bloginfo('template_directory'); ?>/js/swfobject2.js" type="text/javascript"></script>
	<script src="<?php bloginfo('template_directory'); ?>/js/scale.js" type="text/javascript"></script>
	<script type="text/javascript">
		jQuery(window).bind("load", function() {
			jQuery("div#mid").codaSlider()
		});
	</script>

	<script src="<?php bloginfo('template_directory'); ?>/js/imgSizer.js" type="text/javascript"></script>

<?php endif; ?>

<?php if(get_background()!="") : ?>
<style type="text/css">
	body {
		background: <?php echo get_background(); ?>;
	}
</style>
<?php endif; ?>

<?php wp_head(); ?>
</head>
<body>
<div id="page">

<div id="header">
	<!-- <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> -->
<h1><a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png"></a></h1>

The only thing I’ve failed to get to work (that I tried to) was the preview_image…

Hope you get this, or you’ve worked it out.

kindest

pils

Hi anandpadia. Did you manage to get this to work? I have a similar problem – using viewpoint theme and unable to get the slider to work on a static page with a template applied ie.

1. Created a template called work.php (template name: work)
2. Copied code from index file (similar to what is above) into work.php file
3. Created a page called ‘work’ and applied the work template to it.
4. Created a category called work and added <?php query_posts( 'cat=3' ); ?> to the loop to call just the work categories.
5. Created several posts and applied the work category
6. Set up ‘work’ link in menu (using appearance/menu).
7. Clicked on ‘work’ link and the first post with work category applied displays but when you click on the left/right arrow the slider doesn’t work.

It works fine using the <?php query_posts( 'cat=3' ); ?> on the index page and going to https://www.sitename.com/# but not when called post into a static page.

I know nothing about JQuery scripts so have no idea where to even start in solving this.

pils.schouler – I tried copying and pasting your revised code (couldn’t figure out what changes you made) but that didn’t work either… but thanks for the help anyway.

Any more ideas anyone?

Hi Calicosun

I’ll be v.honest, I’ve completely forgotten what the heck I did with the above…soz…

:[