page template jquery slideshow

  • Resolved Shirley Studebaker

    (@shirley-studebaker)


    11 years, 1 month ago

    I’m pretty new so may be going about this all wrong. I’m attempting to read in files from an image folder for a slideshow. Gets hung up after <div id=”myslides”>. Here’s the page. I have added <?php wp_enqueue_script("jquery"); ?> to header.php just before <?php wp_head(); ?>. Maybe I’m not allowed to call the jquery function or scripts from within the template and if not where do I put them? Trying to modify theme files as little as possible. All tips are welcome as I am learning. Here’s the latest version of my code:

    <?php
/* Template Name: Custom Interior Page */
list($bfa_ata, $cols, $left_col, $left_col2, $right_col, $right_col2, $bfa_ata['h_blogtitle'], $bfa_ata['h_posttitle']) = bfa_get_options();
get_header();
extract($bfa_ata);
global $bfa_ata_postcount;
?>
<script type="text/javascript">
var $j = jQuery.noConflict();

$j($(document).ready(function(){
	$j($('#myslides').cycle({
		fit: 1, pause: 1, timeout: 4000
	}));
}));
</script>
<style> #myslides { height:400px; width:600px; } </style>
<div id="interior_wrapper">
<?php

    global $post;
    $post_slug=$post->post_name;

	$img_directory = '../../images/'.$post_slug;
	// echo $directory;
	// Styling for images
	echo '<div id="myslides">';
	foreach ( new DirectoryIterator($img_directory) as $item ) {
		if ($item->isFile()) {
			$path = $img_directory . '/' . $item;
			echo '<img src="' . $path . '"/>';
		}
	}
	echo '</div>';
?>	

</div>
<script src="../../scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../scripts/jquery.cycle.lite.js" type="text/javascript"></script>
<?php get_footer(); ?>


    [Please use the code buttons when posting code ]

Viewing 4 replies - 1 through 4 (of 4 total)
  • paulwpxp

    (@paulwp)

    11 years, 1 month ago

    wp_enqueue_script()
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    wp_enqueue_style()
    http://codex.wordpress.org/Function_Reference/wp_enqueue_style

    For the script, you don’t need to enqueue jQuery, just have your js in a file and state the dependency in the wp_enqueue_script()

    You’d also load the js only on the page(s) that need it using this:

    is_page_template()
    http://codex.wordpress.org/Function_Reference/is_page_template

    or other conditional tags
    http://codex.wordpress.org/Conditional_Tags

    Thread Starter Shirley Studebaker

    (@shirley-studebaker)

    11 years ago

    Thanks for your help!! I think I am getting closer. See if this sounds right. I have loaded following code into header.php before wp_head ();

    // custom jQuery added by 5B Tech
<?php wp_enqueue_script("jquery"); ?>
<?php if (is_page_template('custom_interior.php'))
	wp_enqueue_script('jquery-cycle', get_template_directory_uri() . '/js/jquery.cycle.lite.js'); ?>

    Added jquery.cycle.lite.js to my theme js folder.
    Put styles in proper place.
    My template php to load images is working now.
    I’m still unsure how to handle the actual jquery function. I think should make another js file for this function (with conditional statement added for template) but where do I call / load it?
    Here’s latest template code and page I’m testing:

    <?php
/* Template Name: Custom Interior Page */
list($bfa_ata, $cols, $left_col, $left_col2, $right_col, $right_col2, $bfa_ata['h_blogtitle'], $bfa_ata['h_posttitle']) = bfa_get_options();
get_header();
extract($bfa_ata);
global $bfa_ata_postcount;
?>

<script type="text/javascript">
jQuery(document).ready(function(){
	$('#myslides').cycle({
		fit: 1, pause: 1, timeout: 4000
	});
});
</script>

<div id="interior_wrapper">
<?php

    global $post;
    $post_slug=$post->post_name;

	$img_path .= '/home/galenalodge/www/wp-content/images/'.$post_slug;
	$img_directory = get_bloginfo("template_directory");
	$img_directory .= '/images/'.$post_slug;
	// echo $img_directory;
	// Styling for images
	echo '<div id="myslides">';
	if ($handle = @opendir($img_path) or die("There is an error with your image directory!")) {
		while (false !== ($file = readdir($handle))) {
    		if (strpos($file, ".jpg")) {
				$path = $img_directory . '/' . $file;
				echo '<img src="' . $path . '"/>';
    		}
		}
		closedir($handle);
	}
	echo '</div>';
?>
</div>

<?php get_footer(); ?>

    Thread Starter Shirley Studebaker

    (@shirley-studebaker)

    11 years ago

    So I took the call to jquery.cycle.lite.js out of header.php as it was not showing up in the source and added following to functions.php. Can I call two scripts with one add_action?

    function my_slideshow() {
	wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/jquery.cycle.lite.js',
		array( 'jquery' )
	);
	wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/slideshow.js',
		array( 'jquery' )
	);
}

if (is_page_template('custom_interior.php')) {
	add_action( 'wp_enqueue_scripts', 'my_slideshow' );
}

    Thread Starter Shirley Studebaker

    (@shirley-studebaker)

    11 years ago

    Hey I got it working!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘page template jquery slideshow’ is closed to new replies.