Forums

cjk

This one has me stumped because I had it working like a charm on my local server under mamp!

I have one page in wordpress that I would like easyslider.js to be on, along with a custom sidebar. So, my thinking is that I need a custom template for the page, using the 'include' wordpress function for a custom header, and then a custom sidebar.

Everything worked well on my live site. The custom page template pops up, the custom header displays and the custom sidebar displays. The javascript though doesn't. The slides just display (all of them) bulleted which leads me to believe that the scripts are not being loaded.

I am using a modified kubrick theme, basically re-styled.

I placed this into my custom header php file in the normal location , just above </head>

<script type=\"text/javascript\" src=\"jquery.js\"></script>
	<script type=\"text/javascript\" src=\"easySlider1.5.js\"></script>
	<script type=\"text/javascript\">
		$(document).ready(function(){	
			$(\"#slider\").easySlider({
				auto: true,
				speed: 800,
				pause: 4000,
				continuous: true,
				controlsShow: false
			});
		});	
	</script>

and placed the actual scripts into my theme folder.

the css is fine, I use the slider on my static (non-wordpress) home page at http://www.krowchukdressage.com and that works just fine.

Am I missing the obvious here?

Cheers!
Chris

edited!!

Nevermind! Solved, duh! Path... /

<script type=\"text/javascript\" src=\"/jquery.js\"></script>
	<script type=\"text/javascript\" src=\"/easySlider1.5.js\"></script>

cutescar2nis

i have a problem with integration of jslider with my wordpress... i'm trying to insert the script to my wordpress header but it's not working, the images are not showing up, but the alt message is (CSS Template Preview) and it is listed, meaning all of the given images alt message is being shown except the images. help... :|

cutescar2nis

i've solved it already! hayys~ after all the hardshi*s hehe... i uploaded all the images and called it from the upload folder. it's not working when i inserted all the scripts in the template that i'm using... it must be uploaded as of my case...

James R

Has anyone else encountered the problem of easySlider not working when you try include it in a WP theme that is calling a few more instances of jQuery?

:|

TheDoc

"James R" said:
Has anyone else encountered the problem of easySlider not working when you try include it in a WP theme that is calling a few more instances of jQuery?

:|

http://digwp.com/2009/06/including-jque ... right-way/

James R

Thanks for the reply Doc, I thought I had included everything correctly but I'm not so sure.

Here's what's going on:

header.php

<?php wp_head(); ?>

<script src=\"<?php bloginfo('template_directory'); ?>/includes/js/sifr.js\" type=\"text/javascript\"></script>
<script src=\"<?php bloginfo('template_directory'); ?>/includes/js/sifr-config.js\" type=\"text/javascript\"></script>

</head>

theme-js.php

<?php
	wp_enqueue_script('jquery');    
	
	wp_enqueue_script( 'easySlider', get_bloginfo('template_directory').'/includes/js/easySlider1.7.js', array( 'jquery' ) );
		
	wp_enqueue_script( 'superfish', get_bloginfo('template_directory').'/includes/js/superfish.js', array( 'jquery' ) );
	wp_enqueue_script( 'general', get_bloginfo('template_directory').'/includes/js/scripts.js', array( 'jquery' ) );
	wp_enqueue_script( 'innerfade', get_bloginfo('template_directory').'/includes/js/innerfade.js', array( 'jquery' ) );
	wp_enqueue_script( 'prettyPhoto', get_bloginfo('template_directory').'/includes/js/prettyPhoto.js', array( 'jquery' ) );

	wp_enqueue_script( 'scrollTo', get_bloginfo('template_directory').'/includes/js/scrollTo-1.4.2-min.js', array( 'jquery' ) );
	wp_enqueue_script( 'localscroll', get_bloginfo('template_directory').'/includes/js/localscroll-min.js', array( 'jquery' ) );
	wp_enqueue_script( 'serialScroll', get_bloginfo('template_directory').'/includes/js/serialScroll-1.2.2-min.js', array( 'jquery' ) );
?>

scripts.js

//lots of other scripts and finally

//easySlider
jQuery(document).ready(function($){	
				
				$(\"#box-slider1\").easySlider({
					nextId: \"slider1next\",
					prevId: \"slider1prev\"
				});
				$(\"#box-slider2\").easySlider({
					nextId: \"slider2next\",
					prevId: \"slider2prev\"
				});			
				$(\"#box-slider3\").easySlider({
					nextId: \"slider3next\",
					prevId: \"slider3prev\"
				});
			});

I've tried moving the script in to the header and calling the js file from there but that doesn't seem to work.

Any help would be great!

James R

Fixed it!

I placed the following script down the bottom of the easslider1.7.js file:



//more code above this..

if(options.numeric) setCurrent(0);
		
			if(!options.continuous && options.controlsFade){					
				$(\"a\",\"#\"+options.prevId).hide();
				$(\"a\",\"#\"+options.firstId).hide();				
			};				
			
		});
	  
	};

})(jQuery);

jQuery(document).ready( function(){ 	
				
				jQuery(\"#box-slider1\").easySlider({
					nextId: \"slider1next\",
					prevId: \"slider1prev\"
				});
				jQuery(\"#box-slider2\").easySlider({
					nextId: \"slider2next\",
					prevId: \"slider2prev\"
				});			
				jQuery(\"#box-slider3\").easySlider({
					nextId: \"slider3next\",
					prevId: \"slider3prev\"
				});
			});

8-)

treehouse : what would you like to learn today?

Forums

[Solved] Easyslider.js, Wordpress, custom templates issue