JavaScript plugin not working

I found a great downloadable slider plugin at: Slides, A Slideshow Plugin for jQuery I love the look of this slider and want to incorporate it into our site, but I am a total newbie at coding. I am running the Thesis theme on Wordpress and thought this would be a simple cut and paste, but I’ve been pulling my hair out over it for about 5 days.

Here is the code as I have it right now on my site. It works partway in Safari and Opera on Mac, not at all in FF, Chrome or IE anywhere.

In the header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/js/slides.min.jquery.js"></script>

<script>
( function($) {		$(document).ready(function() {
		$('#slides').slides({
				preload: true,
				preloadImage: 'http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true
			});
		})) ( jQuery );
</script>

In the php:

function slides_standard() {
?>
<div id="slides_standard_container">
		<div id="example">
			<img src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/coming-soon.png" width="112" height="112" alt="Coming Soon" id="ribbon">
			<div id="slides">
				<div class="slides_container">
					<a href="http://www.journalinabox.com/product-testing/" title="Journal in a BoxTM Original Edition" target="_blank"><img src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/dont-pick-up.png" width="570" height="270" alt="Slide 1"></a>
					<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
				</div>
				<a href="#" class="prev"><img src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
		</div>
	</div>
<?php
}
add_action('thesis_hook_feature_box', 'slides_standard');

In the css:

#feature_box {
    background: none;
    border: none;
	padding: 0;
}

#slides_standard_container {
	width:580px;
	padding:10px;
	margin:0 auto;
	position:relative;
	z-index:0;
}

#example {
	width:600px;
	height:350px;
	position:relative;
}

#ribbon {
	position:absolute;
	top:-3px;
	left:-15px;
	z-index:500;
}

#frame {
	position:absolute;
	z-index:0;
	width:739px;
	height:341px;
	top:-3px;
	left:-80px;
}

/*
	Slideshow
*/

#slides {
	position:absolute;
	top:15px;
	left:4px;
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:570px;
	overflow:hidden;
	position:relative;
	display:none;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container a {
	width:570px;
	height:270px;
	display:block;
}

.slides_container a img {
	display:block;
}

/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:585px;
}

/*
	Pagination
*/

.pagination {
	margin:26px auto 0;
	width:100px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(http://www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

Any help as to what is going wrong with my code would be greatly appreciated!

There are a few issues that need to be addressed before you can do anything else, in your <head> tags you added the code for the slider but it has some issues.

  1. The path to the slides.min.jquery.js file doesn’t exist, ensure the file exists in the /thesis_18/custom/js/ folder.
  2. The JavaScript has errors in it which are preventing the slider from correctly working overall. See the updated code below which is 100% valid. The only thing i recommend you do however is add the code after the wp_head() declaration and remove the <script> element for the jQuery reference as jQuery automatically gets called by Wordpress.

    html <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="<?php bloginfo('template_directory'); ?>/thesis_18/custom/js/slides.min.jquery.js"></script> <script> $(function() { $('#slides').slides({ preload: true, preloadImage: '<?php bloginfo('template_directory'); ?>/thesis_18/custom/images/slides/loading.gif', play: 5000, pause: 2500, hoverPause: true }); }); </script>

The other thing i want to point out is in your CSS your using a full image path, CSS can use relative paths rather then absolute and they are a lot faster.

background-image:url(images/slides/pagination.png);

The js is in the folder to which I direct in the code, but it is thesis_18/thesis_18/custom/js

The JavaScript has errors in it which are preventing the slider from correctly working overall. See the updated code below which is 100% valid. The only thing i recommend you do however is add the code after the wp_head() declaration and remove the <script> element for the jQuery reference as jQuery automatically gets called by Wordpress.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/thesis_18/custom/js/slides.min.jquery.js"></script>
<script>
    $(function() {
        $('#slides').slides({
            preload: true,
            preloadImage: '<?php bloginfo('template_directory'); ?>/thesis_18/custom/images/slides/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true
        });
    });
</script>

[/LIST]
The other thing i want to point out is in your CSS your using a full image path, CSS can use relative paths rather then absolute and they are a lot faster.

background-image:url(images/slides/pagination.png);

Thank you so much I will make the changes and see how this works!

Hmmm. Okay, I made the changes, but still no progress. The Thesis theme has you add header scripts via the interface under Document Head/Additional Scripts, so apparently this is not placing after the wp_head() declaration. I might have to do that manually.

Also, since making the changes you suggested (and adjusting for the ‘other’ thesis_18 folder) I am now getting this error message in the console:

missing } after property list
[Break On This Error] preloadImage: ‘<?php blogi…18/custom/images/slides/loading.gif’,

The error is been caused because the code is been parsed as a string and not PHP like it should be, if you manually add the JavaScript after wp_head(), remove the jQuery <script> element and change $ to jQuery then everything should work fine after that given all the paths are correct.

Thank you for your help. Now I just have to figure out how to make those manual changes. :slight_smile:

Simply open the themes header.php file and after <?php wp_head(); ?> add the code in my previous post.

Yes, that is what I tried to do, but the Thesis theme does not have that in the header php file. I did a little research in the Thesis forum and it would seem I have to include it as a function in the custom.php file with

add_action('wp_head', 'your_function');

but that is not working, because it keeps telling me incorrect string, so I’m still trying to work through the exact syntax needed.

Thanks again for all of your help with this!

I am not sure if I should drop <script> completely when adding this as a function or not? I am supposed to add
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js”></script>
<script src=“<?php bloginfo(‘template_directory’); ?>/thesis_18/custom/js/slides.min.jquery.js”></script>

to that function as well, correct? Thanks! I’m wish I understood the process more. Trying to add this on a ‘crash course’ basis!

Sorry for the delay, for the purposes you need you can use the following…

add_action('wp_head', function() {
    return '<script src="' . bloginfo('template_directory') . '/thesis_18/custom/js/slides.min.jquery.js"></script>
    <script type="text/javascript">
        jQuery(function($) {
            $(\\'#slides\\').slides({
                preload: true,
                preloadImage: \\'' . bloginfo('template_directory') . '/thesis_18/custom/images/slides/loading.gif\\',
                play: 5000,
                pause: 2500,
                hoverPause: true
            });
        });
    </script>';
});

Thanks again for the help. Got it up and running now. :slight_smile:

Good to hear, also just noticed there is a typo in my above example but that doesn’t matter now :slight_smile: