How to make PXSlider to stop on mouse over, show excerpt text…

PXSlider is wonderful WordPress slideshow plugin with nice parallax effect, but with a lack of some features like stop on mouse over, excerpt text…

To add stop on mouseover function you should navigate to wp-content/plugins/px-slider/inc/front/js and than open pxslider.js for edit.

It will be a little tricky to find where to insert code but its not so hard, so find this line, it’s on around 3/4 of the script. Search for word error in file if you cant find it.

slide(current,$pxs_slider,$pxs_bg3,$pxs_bg2,$pxs_bg1,1,o.easing,o.easingBg)})}}).error(function(){}).attr("src",$img.attr("src"))})})}};

Basically, what we need is to add this function just before .error(function().

$pxs_slider.hover(function(){clearInterval(slideshow)},function(){pxs_auto()})}})

It would probably be the best if you just replace the whole part of code with this one because of slight differences with brackets and comas.

slide(current,$pxs_slider,$pxs_bg3,$pxs_bg2,$pxs_bg1,1,o.easing,o.easingBg)});$pxs_slider.hover(function(){clearInterval(slideshow)},function(){pxs_auto()})}}).error(function(){}).attr("src",$img.attr("src"))})})}};

Save the file and that should be it, your pop up slider will now stop on mouse over 🙂

And just a quick CSS tune for PXSlider thumbnails which are constantly transparent, even on mouse over.
To fix that add this line to wp-content/plugins/px-slider/inc/front/css/pxsslider.css

#px_slider ul.pxs_thumbnails li img:hover {  
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1;
    }

Now, on mouse over, thumbnail will not be transparent, so it will be more visible, and it will have greater effect.

To add text content or excerpt to PXSlider (like on the image above) you must add this line to wp-content/plugins/px-slider/inc/front/px_front.php

$pxs_ptxt =  get_the_excerpt();

Put it right after

$pxs_ptitle = get_the_title();

It should be around line 37
Than add next line

<div class="pxs_ptxt"><?php echo $pxs_ptxt; ?></div>

Right after (around line 42)

<div class="pxs_ptitle"><?php echo $pxs_ptitle; ?></div>

And at the end we will need to add some extra css in wp-content/plugins/px-slider/inc/front/css/pxsslider.css.
Add this line after ptitle class

#px_slider ul.pxs_slider .pxs_ptxt { 
    background: url("../../images/blk_trans.png") repeat scroll 0 0 transparent; 
    top: 0px; 
    right:0px;
	color: #FFFFFF; 
	font-family: arial; 
	font-size: 14px; 
	padding: 15px 15px 13px; 
	padding-right:35px;
	position: absolute; 
	width: 50%; 
	text-align:justify;
	}

This is just an example CSS, now you can position text and title in the way you want

PXSlider can be found at www.wpfruits.com/downloads/wp-plugins/px-slider-wordpress-plugin/

Leave a Reply

Your email address will not be published. Required fields are marked *