PHP Pause slider?

Shicky · 27 Jul 2010 at 14:54

Developing a webby over wordpress, all gone grand so far however there is a slider on the main page which changes page every 4seconds. I want to add a feature which basically 'pauses' the slider on the current slide for as long as the user's mouse is hovering on the slide. Never really done PHP so im a bit lost where to put it in here...or what exactly to put in.

Code:

<?php
	// Split the featured pages from the options, and put in an array
	$featpages = get_option('woo_feat_pages'); 
	$featarr=split(",",$featpages); 
	$featarr = array_diff($featarr, array(""));  
?>


<div id="featured" class="col-full">
    <div id="loopedSlider">
    	
        <?php if (count($featarr) > 1){ ?>
            
            <ul class="nav-buttons">
                    <li id="p"><a href="#" class="previous"><img src="<?php bloginfo('template_directory'); ?>/<?php woo_style_path(); ?>/sliderbutton_left.png" alt="&lt;" /></a></li>
                    <li id="n"><a href="#" class="next"><img src="<?php bloginfo('template_directory'); ?>/<?php woo_style_path(); ?>/sliderbutton_right.png" alt="&gt;" /></a></li>
            </ul>    
            
       	<?php } ?>       
        
        <div class="container">
            <div class="slides">  

                   
            <?php foreach ( $featarr as $featitem ) { ; ?>
                <?php query_posts('page_id=' . $featitem); ?>
                <?php if (have_posts()) : while (have_posts()) : the_post(); $count++; ?>		        					
                          
                        <div id="slide-<?php echo $count; ?>" class="slide" <?php if($count >= 2) { echo 'style="display:none"'; }?>>                
        
                            <?php if ( get_post_meta($post->ID, 'image', true) ) { ?>
                                <img src="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" alt="" class="alignright slider-image" />				
                            <?php } ?> 
                                                   
                            <?php the_content(); ?>
        
                        </div><!-- /.slide -->  
        
                <?php endwhile; endif; ?>
            <?php } ?>
                    
            </div><!-- /.slides -->
        </div><!-- /.container -->
        
        <div class="fix"></div>
        
        <div class="slider-nav col-full">
        
            <ul class="pagination">
            <?php foreach ( $featarr as $featitem ) { ; ?>
                <?php query_posts('page_id=' . $featitem); ?>
                <?php if (have_posts()) : while (have_posts()) : the_post(); $count++; ?>		        					
                                
                <li><a href="#" rel="<?php echo $count; ?>"><?php the_title(); ?></a></li>
        
                <?php endwhile; endif; ?>
            <?php } ?>
            </ul>
            
        </div>

    </div><!-- /#loopedSlider -->
    
    
</div><!-- /#featured -->

Confused · 27 Jul 2010 at 15:06

You won't be able to do that with just PHP - that is a server-side language, and you are trying to intercept a mouse-over on the client side.

You could using some Javascript to do this, however.

Shicky · 27 Jul 2010 at 15:09

ah sweet, javascript I know.

Just do a seperate .js file with an 'onmouseover' function and link it at the top of the PHP file?

Dj_Jestar · 27 Jul 2010 at 15:14

or, using google, find one of the millions of already developed "carousel" scripts that are already out there...

edit: voila.. http://sorgalla.com/projects/jcarousel/examples/static_auto.html

Shicky · 28 Jul 2010 at 11:13

Cheers for the Dj_Jestar but I already have a wordpress template which i've tweaked to work how I want almost entirely. This pause onmouseover thing is essentially the last thing other than buffering up the content.

Here is the .js file I found that was hidden, dirty wordpress! Im a little confused where to put it in, just a simple function on the div element?

Code:

/*
 * 	loopedSlider 0.5.5 - jQuery plugin
 *	written by Nathan Searles	
 *	http://nathansearles.com/loopedslider/
 *
 *	Copyright (c) 2009 Nathan Searles (http://nathansearles.com/)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *	Compatible with jQuery 1.3+
 *
 */

/*
 *	markup example for $("#loopedSlider").loopedSlider();
 *
 *	<div id="loopedSlider">	
 *		<div class="container">
 *			<div class="slides">
 *				<div><img src="01.jpg" alt="" /></div>
 *				<div><img src="02.jpg" alt="" /></div>
 *				<div><img src="03.jpg" alt="" /></div>
 *				<div><img src="04.jpg" alt="" /></div>
 *			</div>
 *		</div>
 *		<a href="#" class="previous">previous</a>
 *		<a href="#" class="next">next</a>	
 *	</div>
 *
*/

(function($) {
	$.fn.loopedSlider = function(options) {
		
	var defaults = {			
		container: ".container", //Class/id of main container. You can use "#container" for an id.
		slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
		pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
		containerClick: false, //Click slider to goto next slide? true/false
		autoStart: 0, //Set to positive number for true. This number will be the time between transitions.
		restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
		slidespeed: 300, //Speed of slide animation, 1000 = 1second.
		fadespeed: 200, //Speed of fade animation, 1000 = 1second.
		autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
		addPagination: false //Add pagination links based on content? true/false 
	};
		
	this.each(function() {
		var obj = $(this);
		var o = $.extend(defaults,options);
		var distance = 0;
		var times = 1;
		var slides = $(o.slides,obj).children().size();
		var width = $(o.slides,obj).children().outerWidth();
		var position = 0;
		var active = false;
		var number = 0;
		var interval = 0;
		var restart = 0;
		var pagination = $("."+o.pagination+" li a",obj);

		if(o.addPagination && !$(pagination).length){
			var buttons = slides;
			$(obj).append("<ul class="+o.pagination+">");
			$(o.slides,obj).children().each(function(){
				if (number<buttons) {
					$("."+o.pagination,obj).append("<li><a rel="+(number+1)+" href=\"#\" >"+(number+1)+"</a></li>");
					number = number+1;
				} else {
					number = 0;
					return false;
				}
				$("."+o.pagination+" li a:eq(0)",obj).parent().addClass("active");
			});
			pagination = $("."+o.pagination+" li a",obj);
		} else {
			$(pagination,obj).each(function(){
				number=number+1;
				$(this).attr("rel",number);
				$(pagination.eq(0),obj).parent().addClass("active");
			});
		}
		
		if (slides===1) {
			$(o.slides,obj).children().css({position:"absolute",left:position,display:"block"});
			return;
		}
		
		$(o.slides,obj).css({width:(slides*width)});
		
		$(o.slides,obj).children().each(function(){
			$(this).css({position:"absolute",left:position,display:"block"});
			position=position+width;
		});

		$(o.slides,obj).children(":eq("+(slides-1)+")").css({position:"absolute",left:-width});
		
		if (slides>3) {
			$(o.slides,obj).children(":eq("+(slides-1)+")").css({position:"absolute",left:-width});
		}
		
		if(o.autoHeight){autoHeight(times);}
		
		$(".next",obj).click(function(){
			if(active===false) {
				animate("next",true);
				if(o.autoStart){
					if (o.restart) {autoStart();}
					else {clearInterval(sliderIntervalID);}
				}
			} return false;
		});
		
		$(".previous",obj).click(function(){
			if(active===false) {	
				animate("prev",true);
				if(o.autoStart){
					if (o.restart) {autoStart();}
					else {clearInterval(sliderIntervalID);}
				}
			} return false;
		});
		
		if (o.containerClick) {
			$(o.container,obj).click(function(){
				if(active===false) {
					animate("next",true);
					if(o.autoStart){
						if (o.restart) {autoStart();}
						else {clearInterval(sliderIntervalID);}
					}
				} return false;
			});
		}
		
		$(pagination,obj).click(function(){
			if ($(this).parent().hasClass("active")) {return false;}
			else {
				times = $(this).attr("rel");
				$(pagination,obj).parent().siblings().removeClass("active");
				$(this).parent().addClass("active");
				animate("fade",times);
				if(o.autoStart){
					if (o.restart) {autoStart();}
					else {clearInterval(sliderIntervalID);}
				}
			} return false;
		});
	
		if (o.autoStart) {
			sliderIntervalID = setInterval(function(){
				if(active===false) {animate("next",true);}
			},o.autoStart);
			function autoStart() {
				if (o.restart) {
				clearInterval(sliderIntervalID,interval);
				clearTimeout(restart);
					restart = setTimeout(function() {
						interval = setInterval(	function(){
							animate("next",true);
						},o.autoStart);
					},o.restart);
				} else {
					sliderIntervalID = setInterval(function(){
						if(active===false) {animate("next",true);}
					},o.autoStart);
				}
			};
		}
		
		
		function current(times) {
			if(times===slides+1){times = 1;}
			if(times===0){times = slides;}
			$(pagination,obj).parent().siblings().removeClass("active");
			$(pagination+"[rel='" + (times) + "']",obj).parent().addClass("active");
		};
		
		function autoHeight(times) {
			if(times===slides+1){times=1;}
			if(times===0){times=slides;}	
			var getHeight = $(o.slides,obj).children(":eq("+(times-1)+")",obj).outerHeight();
			$(o.container,obj).animate({height: getHeight},o.autoHeight);					
		};		
		
		function animate(dir,clicked){	
			active = true;	
			switch(dir){
				case "next":
					times = times+1;
					distance = (-(times*width-width));
					current(times);
					if(o.autoHeight){autoHeight(times);}
					if(slides<3){
						if (times===3){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});}
						if (times===2){$(o.slides,obj).children(":eq("+(slides-1)+")").css({position:"absolute",left:width});}
					}
					$(o.slides,obj).animate({left: distance}, o.slidespeed,function(){
						if (times===slides+1) {
							times = 1;
							$(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:distance})});							
							$(o.slides,obj).children(":eq(0)").css({left:0});
							$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});				
						}
						if (times===slides) $(o.slides,obj).children(":eq(0)").css({left:(slides*width)});
						if (times===slides-1) $(o.slides,obj).children(":eq("+(slides-1)+")").css({left:(slides*width-width)});
						active = false;
					});					
					break; 
				case "prev":
					times = times-1;
					distance = (-(times*width-width));
					current(times);
					if(o.autoHeight){autoHeight(times);}
					if (slides<3){
						if(times===0){$(o.slides,obj).children(":eq("+(slides-1)+")").css({position:"absolute",left:(-width)});}
						if(times===1){$(o.slides,obj).children(":eq(0)").css({position:"absolute",left:0});}
					}
					$(o.slides,obj).animate({left: distance}, o.slidespeed,function(){
						if (times===0) {
							times = slides;
							$(o.slides,obj).children(":eq("+(slides-1)+")").css({position:"absolute",left:(slides*width-width)});
							$(o.slides,obj).css({left: -(slides*width-width)});
							$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});
						}
						if (times===2 ) $(o.slides,obj).children(":eq(0)").css({position:"absolute",left:0});
						if (times===1) $(o.slides,obj).children(":eq("+ (slides-1) +")").css({position:"absolute",left:-width});
						active = false;
					});
					break;
				case "fade":
					times = [times]*1;
					distance = (-(times*width-width));
					current(times);
					if(o.autoHeight){autoHeight(times);}
					$(o.slides,obj).children().fadeOut(o.fadespeed, function(){
						$(o.slides,obj).css({left: distance});
						$(o.slides,obj).children(":eq("+(slides-1)+")").css({left:slides*width-width});
						$(o.slides,obj).children(":eq(0)").css({left:0});
						if(times===slides){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});}
						if(times===1){$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
						$(o.slides,obj).children().fadeIn(o.fadespeed);
						active = false;
					});
					break; 
				default:
					break;
				}					
			};
		});
	};
})(jQuery);

Tripnologist · 28 Jul 2010 at 12:33

You'll have to write it in to the plugin yourself as it does not have a pause feature built in. You've picked one of the worst sliders to use.

Personally, I'd just replace it with a better slider. Provided you use the same html template for it, you shouldn't have to change anything other than the script and css.

Shicky · 28 Jul 2010 at 12:46

Unfortunately it comes as part of a theme the guy im doing the site for wanted so just tweaking that. Seems fairly simple in my head to get a pause feature in once I find out where it goes!

You saying i've got the wrong place with the loopedslider.js and need to put it inside the jquery plugin itself?

Tripnologist · 28 Jul 2010 at 12:52

loopedslider.js is the plugin and you'll need to write it in to that.

Shicky · 28 Jul 2010 at 13:21

Can you offer any guidance? Im a bit confused as to how I will fit this in.

Never done php but other server-side stuff which isnt helping. I dont see it linked in the slider.php i posted earlier. So link it at the top of that page to the javascript file and make my pause function?

Make the pause function in the .js file that is of course

Tripnologist · 28 Jul 2010 at 14:48

loopedslider.js will already be linked in somewhere, else it wouldn't work.

You'll need to add a hover function to stop the plugin and then restart it. tbh, I can't tell you how to do it without spending a bunch of time figuring it out myself.

It really would just be quicker and easier to replace the plugin.

Pho · 28 Jul 2010 at 15:06

If you can link to the page you're developing I can take a look (saves me having to setup a test environment for the script).

Tripnologist · 28 Jul 2010 at 15:15

I'd take advantage of Pho's offer. He's helped me out a bunch of times.

gord · 28 Jul 2010 at 15:17

Shicky said:
Can you offer any guidance? Im a bit confused as to how I will fit this in.

Never done php but other server-side stuff which isnt helping. I dont see it linked in the slider.php i posted earlier. So link it at the top of that page to the javascript file and make my pause function?

Make the pause function in the .js file that is of course

Thats because of the way Wordpress is built. Your slider is probably being used via a PHP include on the homepage, or wherever it is. Thats why the script isnt on that slider.php, but as Trip said, it is included prior.

So just write your function into the JS. My JS skills are weak, but it will probably be something like:

Code:

$("div#loopedSlider").mouseover(function() {
    $(this).pause the slider
  });

Shicky · 30 Jul 2010 at 11:35

Sorry forgot about this, no success so just moved on as not to waste too much time. Thanks for the offers of help but would rather crack it for myself as to actually learn something and not be a retard as usual.

Will come back to it later, thanks again

visibleman · 30 Jul 2010 at 21:59

I'm probably way off the mark on this one, but couldn't you call the clearTimeout and clearInterval functions on the divs onmouseover? Then restart the slide by setting the setInterval on the onmouseout?