Fade instead of slide in from right

You can replace the two functions wppr_interval() and wppr_back() with the following code:
UPDATE: they are of course inside post-rotator.js

// next slide
	function wppr_interval(){
	  r_pointer++;
	  if(r_pointer == post_rotator_arr.length)
	  {
	    r_pointer = 0;
	    $("#rotator_prop").fadeOut(200);
	    $("#rotator_prop").delay(200).animate({"left":"0"},500, function(){
		$(this).fadeIn(200);
	    });
	  }
	  else {
	    $("#rotator_prop").fadeOut(200);
	    $("#rotator_prop").animate({"left":"-=100%"},250, function(){
		$(this).fadeIn(200);
	    });
	}}

	// previous slide
	function wppr_back(){
	  r_pointer--;
	  if(r_pointer < 0)
	  {
	   r_pointer = post_rotator_arr.length - 1;
	   var to_last_rotater = "-=" + (100 * (r_pointer)) + "%";
	   $("#rotator_prop").fadeOut(200);
	   $("#rotator_prop").delay(200).animate({"left" : to_last_rotater},500, function(){
		$(this).fadeIn(200);
	   });
	  }
	  else {
	    $("#rotator_prop").fadeOut(200);
	    $("#rotator_prop").delay(200).animate({"left" : "+=100%"},500,
		function(){
		  $(this).fadeIn(200);
		  if(auto_rotate)
		    rotatorInterval = setInterval(function(){
			  wppr_interval()},post_rotator_speed);
		});
	}}

Use the plugin’s interval to set the delay, and replace the value in .fadeIn(), .fadeOut() and .delay() in this snippet if you want a different fadeIn speed (I used 200ms in this example)

ok, I replaced that bit of code with the new code, uploaded the file, and now the fist post is displayed but there is no action to speak of.

Here is the page: https://biostreamcompost.com/press/

It’s the bit after Local News at the top of the page.

I am using: [postrotator cat=51 height=20px speed=3000]

and full code below:

/*
*
* Post Rotator WordPress Plugin - js
* Written by: Shai Barash
* Git: https://github.com/sirbolkins/postrotator
*
*/
jQuery(document).ready(function() {
  jQuery.noConflict();
  (function($) {
	// get all the slides and initialize the pointer
	var post_rotator_arr = $(".post_rotator").get(),
		r_pointer = 0,
		auto_rotate = true;

        // get rotater params for shortcode. Ex.[post_rotator_params height=500px speed=15000]

	 post_rotator_height = $("#post_rotator_params").css("height");
	 post_rotator_speed = $("#post_rotator_params").html();
	 if(parseInt(post_rotator_speed)<1000)
	  post_rotator_speed = 2000;
	 if($("#post_rotator_params").hasClass("off"))
	  auto_rotate = false;

	// build the rotater gallery right before the first slide

	$(".post_rotator").eq(0).before('<div id="rotator_stage" style="height:'+post_rotator_height+'"><div id="post_rotator_arrow_left" style="line-height:'+post_rotator_height+'"><</div><div id="post_rotator_arrow_right" style="line-height:'+post_rotator_height+'">></div><ul id="rotator_prop" style="height:'+post_rotator_height+'"></ul></div>');

	// calculate the stage (100% * slides) and slides (stage / num of slides)

	var post_rotator_width = (100 * post_rotator_arr.length) + "%";
	var post_rotator_slide_width = (100 / post_rotator_arr.length) + "%";
	var post_rotator_slide_padding = "0, " + (5 / post_rotator_arr.length) + "%";

	// now build the slides html inside the rotater gallery
	for(var i=0;i<post_rotator_arr.length;i++)
	{
	  $("#rotator_prop").append('<li class="rotator_slide" style="width:'+post_rotator_slide_width+';height:'+post_rotator_height+';">'+$(post_rotator_arr).eq(i).html()+'</li>')
	}

	// once all the content is inside, set gallery width and remove the code used to build the gallery
	$("#rotator_prop").css("width", post_rotator_width);
	$(".post_rotator").remove();

        //get each individual slide height to influence gallery height. if slide is higher than the given width, increase the gallery height to that of the tallest slide.

        function fix_rotater_height() {
          var get_ends = $('.rotator_end').get();
          var end_helper, height_changed = false;
          var max_height = parseInt($("#rotator_stage").css("height"));

          $.each(get_ends, function(index, value){
            end_helper = $(value).position().top;
            if(end_helper > max_height)
            {
              max_height = end_helper;
              height_changed = true;
            }
          });

         // correct the measurement (add 50 px to the highest offset)
         if(height_changed)
         max_height += 50;
         max_height+= "px";
         $("#rotator_stage").css("height", max_height);
         $("#post_rotator_arrow_left").css("line-height", max_height);
         $("#post_rotator_arrow_right").css("line-height", max_height);
         $("#rotator_prop").css("height", max_height);
      }

        fix_rotater_height();

	// start the rotation interval
	if(auto_rotate)
	 var rotatorInterval = setInterval(function(){wppr_interval()},post_rotator_speed);

	// next slide
	function wppr_interval(){
	  r_pointer++;
	  if(r_pointer == post_rotator_arr.length)
	  {
	    r_pointer = 0;
	    $("#rotator_prop").fadeOut(200);
	    $("#rotator_prop").delay(200).animate({"left":"0"},500, function(){
		$(this).fadeIn(200);
	    });
	  }
	  else {
	    $("#rotator_prop").fadeOut(200);
	    $("#rotator_prop").animate({"left":"-=100%"},250, function(){
		$(this).fadeIn(200);
	    });
	}}

	// previous slide
	function wppr_back(){
	  r_pointer--;
	  if(r_pointer < 0)
	  {
	   r_pointer = post_rotator_arr.length - 1;
	   var to_last_rotater = "-=" + (100 * (r_pointer)) + "%";
	   $("#rotator_prop").fadeOut(200);
	   $("#rotator_prop").delay(200).animate({"left" : to_last_rotater},500, function(){
		$(this).fadeIn(200);
	   });
	  }
	  else {
	    $("#rotator_prop").fadeOut(200);
	    $("#rotator_prop").delay(200).animate({"left" : "+=100%"},500,
		function(){
		  $(this).fadeIn(200);
		  if(auto_rotate)
		    rotatorInterval = setInterval(function(){
			  wppr_interval()},post_rotator_speed);
		});
	}}
	}

	// rotater UI: click arrows

	$("#post_rotator_arrow_left").click(function(){
	 if(auto_rotate)
	   clearInterval(rotatorInterval);
	 wppr_back();
	});

	$("#post_rotator_arrow_right").click(function(){
	  if(auto_rotate)
	   clearInterval(rotatorInterval);
	  wppr_interval();
	  if(auto_rotate)
	   rotatorInterval = setInterval(function(){wppr_interval()},post_rotator_speed);
	});

  })(jQuery);
});

There’s an extra curvy closing bracket there that should have been written over

}}
	}

Ahh, I see my error now. Thank you for pointing that out. This works great now. ??

you should include different options for transitions in your next version. That would be pretty cool. Thanks for the great plugin. Have a nice day!

Glad to help, please rate the plugin so other people can enjoy it. I’ll definitely add this to the next version!

will do, thanks

sirbolkins –

I attempted to change from the slide in from right to the fade in as shown above – however, the rotator only shows 2 posts now, not the original 4 as was working previously.

Any ideas? Please help…

Here is my call:
[postrotator cat=”Rotate Post” height=565px speed=6000 autorotate=on numberposts=4]

And here is the js:
‘/*
*
* Post Rotator WordPress Plugin – js
* Written by: Shai Barash
* Git: https://github.com/sirbolkins/postrotator
*
*/
jQuery(document).ready(function() {
jQuery.noConflict();
(function($) {
// get all the slides and initialize the pointer
var post_rotator_arr = $(“.post_rotator”).get(),
r_pointer = 0,
auto_rotate = true;

// get rotater params for shortcode. Ex.[post_rotator_params height=500px speed=15000]

post_rotator_height = $(“#post_rotator_params”).css(“height”);
post_rotator_speed = $(“#post_rotator_params”).html();
if(parseInt(post_rotator_speed)<1000)
post_rotator_speed = 2000;
if($(“#post_rotator_params”).hasClass(“off”))
auto_rotate = false;

// build the rotater gallery right before the first slide
// Below sets the Right and Left <> signs //

$(“.post_rotator”).eq(0).before(‘<div id=”rotator_stage” style=”height:’+post_rotator_height+'”><div id=”post_rotator_arrow_left” style=”line-height:’+post_rotator_height+'”><</div><div id=”post_rotator_arrow_right” style=”line-height:’+post_rotator_height+'”>></div><ul id=”rotator_prop” style=”height:’+post_rotator_height+'”></div>’);

// calculate the stage (100% * slides) and slides (stage / num of slides)

var post_rotator_width = (100 * post_rotator_arr.length) + “%”;
var post_rotator_slide_width = (100 / post_rotator_arr.length) + “%”;
var post_rotator_slide_padding = “0, ” + (5 / post_rotator_arr.length) + “%”;

// now build the slides html inside the rotater gallery
for(var i=0;i<post_rotator_arr.length;i++)
{
$(“#rotator_prop”).append(‘<li class=”rotator_slide” style=”width:’+post_rotator_slide_width+’;height:’+post_rotator_height+’;”>’+$(post_rotator_arr).eq(i).html()+”)
}

// once all the content is inside, set gallery width and remove the code used to build the gallery
$(“#rotator_prop”).css(“width”, post_rotator_width);
$(“.post_rotator”).remove();

//get each individual slide height to influence gallery height. if slide is higher than the given width, increase the gallery height to that of the tallest slide.

function fix_rotater_height() {
var get_ends = $(‘.rotator_end’).get();
var end_helper, height_changed = false;
var max_height = parseInt($(“#rotator_stage”).css(“height”));

$.each(get_ends, function(index, value){
end_helper = $(value).position().top;
if(end_helper > max_height)
{
max_height = end_helper;
height_changed = true;
}
});

// correct the measurement (add 50 px to the highest offset)
if(height_changed)
max_height += 50;
max_height+= “px”;
$(“#rotator_stage”).css(“height”, max_height);
$(“#post_rotator_arrow_left”).css(“line-height”, max_height);
$(“#post_rotator_arrow_right”).css(“line-height”, max_height);
$(“#rotator_prop”).css(“height”, max_height);
}

fix_rotater_height();

// start the rotation interval
if(auto_rotate)
var rotatorInterval = setInterval(function(){wppr_interval()},post_rotator_speed);

// next slide
function wppr_interval(){
r_pointer++;
if(r_pointer == post_rotator_arr.length)
{
r_pointer = 0;
$(“#rotator_prop”).fadeOut(200);
$(“#rotator_prop”).delay(200).animate({“left”:”0″},500, function(){
$(this).fadeIn(200);
});
}
else {
$(“#rotator_prop”).fadeOut(200);
$(“#rotator_prop”).animate({“left”:”-=100%”},250, function(){
$(this).fadeIn(200);
});
}}

// previous slide
function wppr_back(){
r_pointer–;
if(r_pointer < 0)
{
r_pointer = post_rotator_arr.length – 1;
var to_last_rotater = “-=” + (100 * (r_pointer)) + “%”;
$(“#rotator_prop”).fadeOut(200);
$(“#rotator_prop”).delay(200).animate({“left” : to_last_rotater},500, function(){
$(this).fadeIn(200);
});
}
else {
$(“#rotator_prop”).fadeOut(200);
$(“#rotator_prop”).delay(200).animate({“left” : “+=100%”},500,
function(){
$(this).fadeIn(200);
if(auto_rotate)
rotatorInterval = setInterval(function(){
wppr_interval()},post_rotator_speed);
});
}}

// rotater UI: click arrows

$(“#post_rotator_arrow_left”).click(function(){
if(auto_rotate)
clearInterval(rotatorInterval);
wppr_back();
});

$(“#post_rotator_arrow_right”).click(function(){
if(auto_rotate)
clearInterval(rotatorInterval);
wppr_interval();
if(auto_rotate)
rotatorInterval = setInterval(function(){wppr_interval()},post_rotator_speed);
});

})(jQuery);
});’