Simple Javascript Help

[andr923]

Hi all, I'm a complete javascript philistine.  I need help implementing a very simple function to an existing jquery plugin I added on my website. It's basically a content slider that has the option of starting automatically and stopping when you click on either the arrows or on the breadcrumb dots at the bottom.  I'm pretty sure the code I need to apply is this

 

.click(function() {
				// Disable auto change on click
				if (myInterval)
				{
					if (options.stoponclick) { pause_loop = true; }
					clearInterval(myInterval);
				}

 

I would like to make it so that when you click the '.showcase' division it runs that script, can anybody help me?  I've tried a couple of different things, but they clearly did not work...  The whole point, is that I want the slider to stop sliding when you click anywhere (not just the arrows, or breadcrumbs,) so that if you clicked to watch one of the videos, it won't slide to the next slide.

 

This is the code that the plugin uses for the arrows.  Now I just need to create a script that also does it for the '.showcase' div but that doesn't create a showcase div (it's already created.

 

// Left arrow
		jQuery(document.createElement('div'))
			.addClass('showcase-arrow-previous')
			.prependTo(showcase)
			.click(function() {
				// Disable auto change on click
				if (myInterval)
				{
					if (options.stoponclick) { pause_loop = true; }
					clearInterval(myInterval);
				}
				changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous');
			});
		// Right arrow
		jQuery(document.createElement('div'))
			.addClass('showcase-arrow-next')
			.prependTo(showcase)
			.click(function() {
				// Disable auto change on click
				if (myInterval)
				{
					if (options.stoponclick) { pause_loop = true; }
					clearInterval(myInterval);
				}
				changeContent(current_id+1, 'next');
			});

 

 

 

Here is the page I'm trying to get to work properly.. http://andreimatorin.com THANK YOU!!!

 

[andr923]

I tried adding

 

$('.showcase').click(function() {
					if (options.stoponclick) { pause_loop = true; }
					clearInterval(myInterval);
				});

 

after the function that calls the plugin script in my header (but still within the documentready function and it didn't do anything...

[scootstah]

Try just

$('.showcase').click(function() {
     clearInterval(myInterval);
}

[andr923]

Thanks Scootstah, but that still didn't help.

[andr923]

Whatever I do, is this an acceptable way of adding the modification to the code? or do I have to modify the original js file?

 

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/js/jquery.aw-showcase/jquery.aw-showcase.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
$("#showcase").awShowcase();
	//Add stop on click event for .showcase div


	$('.showcase-content').click(function() {
	     clearInterval(myInterval);
	});

});



</script>

 

 

This is the full code of the .js file http://www.andreimatorin.com/wordpress/wp-content/themes/2012_theme/js/jquery.aw-showcase/jquery.aw-showcase.js