Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] page template jquery slideshow


  #1  
Old Mar 23, 2013, 02:06 PM
sstudebaker
 
24 posts · Dec 2011
I'm trying to do add this to a template file and not use a plugin. Using all latest versions - Wordpress ATA 3.711 and WP 3.5.1. I'm pretty new to WP programming 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
HTML Code:
<div id="myslides">
.
HTML Code:
<a href="http://74.115.229.75/kids-camp/">Here's the page</a>
. I have added
PHP Code:
<?php wp_enqueue_script("jquery"); ?>
to header.php just before
PHP Code:
<?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 (code is all tested and works outside of WP):
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(); ?>
  #2  
Old Mar 23, 2013, 02:23 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Why don't you want to use a plugin? Most are built to intergrate easily, you won't have to maintain it yourself.

What do you mean that it gets hung up?
depending on your host the '../../' may be violating a security rule, try using the full url
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 23, 2013, 02:55 PM
sstudebaker
 
24 posts · Dec 2011
If you view source on page it doesn't get any further than the div for the slideshow. I have code that works (outside of WP) so would rather just keep it simple and not use a plugin that may or may not do what I want. I have some other complicated plugins to add in later so using as few as I can so as not to bog down the system.

Used full URL for scripts and still nothing. Seems to be broken at

Code:
foreach ( new DirectoryIterator($img_directory) as $item ) {			
		if ($item->isFile()) {
			$path = $img_directory . '/' . $item;	
			echo '<img src="' . $path . '"/>';	
		}
	}
Latest template version

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="http://74.115.229.75/scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://74.115.229.75/scripts/jquery.cycle.lite.js" type="text/javascript"></script>  
<?php get_footer(); ?>
  #4  
Old Mar 23, 2013, 04:53 PM
sstudebaker
 
24 posts · Dec 2011
I have part of problem narrowed down to issue with opendir and path to images folder. Could you take a quick look and let me know why folder is wrong. I've asked wordpress forum but no response from anyone. I can see image at http://74.115.229.75/wp-content/them...amp/KCimg1.jpg but script tells me - There is an error with your image directory! Page is at http://74.115.229.75/kids-camp/ and here is php code:
Code:
<?php
 
    global $post;
    $post_slug=$post->post_name;

	$img_directory = bloginfo("template_directory");
	$img_directory .= '/images/'.$post_slug;
	echo $img_directory;	  	
	// Styling for images	
	echo '<div id="myslides">';
	if ($handle = @opendir($img_directory) 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>';
?>
  #5  
Old Mar 23, 2013, 08:13 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Do a google search on 'wordpress bloginfo' and see what it returns
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Mar 23, 2013, 10:09 PM
sstudebaker
 
24 posts · Dec 2011
Hmmm I can see exactly what it returns as I have an echo on the variable. If you look at the page you can see what I get back which seems right but its not working. Sorry I don't get the sense you are looking at my problem/
  #7  
Old Mar 24, 2013, 04:00 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
Sorry I don't get the sense you are looking at my problem
that was a two minute look whale I was out at dinner

What is the file permission for the folder?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Mar 24, 2013, 09:52 AM
sstudebaker
 
24 posts · Dec 2011
Thanks for yur help so far! I think I am getting closer. I have loaded following code into header.php before wp_head ();
PHP Code:
<?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'); ?>
I 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 needed server path to get opendir to work right.
I'm still unsure how to handle the actual jquery function. Should I make another js file for this function (with conditional statement added for template) and where do I call / load it?
Here's latest template code and page I'm testing:
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">
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(); ?>
  #9  
Old Mar 24, 2013, 11:06 AM
sstudebaker
 
24 posts · Dec 2011
Hey I got it working
  #10  
Old Mar 24, 2013, 11:44 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
congratulations!
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
jquery, slideshow, template

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Is it possible to add a JQuery slideshow to the header or just below the header image GRF Header configuration & styling 3 Aug 22, 2011 10:16 AM
Creative ideas for d13 Slideshow or other Slideshow theadventurebite Plugins & Atahualpa 0 Jun 16, 2010 02:30 AM


All times are GMT -6. The time now is 05:14 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.