Was getting a bit frustrated with the very good vSlider plugin for WordPress. it's a very good and simple image slider plugin for WordPress, with a nice interface for adding images and changing the sliding effects, BUT there's one problem, it doesn't do proper image fading. The nearest you can get is to set the square sizes to 1, but it still isn't quite the image fading I wanted. This is because it uses the 'coinslider' jquery script, which doesn't have a proper image fader, I wanted something like the well known innerfade uses. So, having a look, I discovered it was relatively easy to add the famous innerfade.js jquery script to it and hey presto! it works. Just copy jquery.innerfade.js to the js folder, cut/paste the following two sections in vslider.php and there you have it.
Lines 45-66 of the vslider.php file found in /wp-content/plugins/vslider/js
function vslider_head_scripts() {
wp_enqueue_script ('jquery');
wp_enqueue_script('vslider', WP_CONTENT_URL.'/plugins/vslider/js/vslider.js', $deps = array('jquery'));
wp_enqueue_script('innerfade', WP_CONTENT_URL.'/plugins/vslider/js/jquery.innerfade.js', $deps = array('jquery'));
}
function vslider_head() { $options = get_option('vslider_options'); ?>
<!-- Start vSlider options -->
<script type="text/javascript">var $jq = jQuery.noConflict(); $jq(document).ready(function() {
$eft='';
if ($eft!='fader') { // use coinslider
$jq('#vslider').coinslider({ width: , height: , spw: , sph: , delay: , sDelay: , opacity: , titleSpeed: , effect: '<?php echo $options["effect"]; ?>', navigation: , links : , hoverPause: });
} // end of coinslider js
else { // use innerfade instead
$jq('#vslider').wrapInner('<ul id="vslider" />');
$jq('#vslider a').wrap('<li>');
$jq('ul#vslider').unwrap();
$jq('#vslider').innerfade({ speed: 'slow', timeout: , type: 'sequence', containerheight: 'px' });
}
}); </script>
<style type="text/css" media="screen">
ul#vslider { list-style-type:none; }
AND change Line 194 to this:
<p><?php _e("Effect", 'vslider'); ?>:<select name="vslider_options[effect]"><option value="" >all combined</option><option value="random" >random</option><option value="swirl" >swirl</option><option value="rain" >rain</option><option value="straight" >straight</option><option value="fader" <?php selected('fader', $options['effect']); ?>>fader</option></select></p>
OR TO MAKE THIS EASY just download the files here:
jquery.innerfade.js
vslider.php
copy vslider.js to the wp-content/plugins/vslider/ folder and innerfade.js to the /wp-content/plugins/vslider/js folder
thanks,
James