Support » Plugin: Post Rotator » Fade instead of slide in from right

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author sirbolkins

    (@sirbolkins)

    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)

    cm123077

    (@cm123077)

    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: http://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);
    });
    Plugin Author sirbolkins

    (@sirbolkins)

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

    }}
    	}
    cm123077

    (@cm123077)

    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!

    Plugin Author sirbolkins

    (@sirbolkins)

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

    cm123077

    (@cm123077)

    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);
    });’

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Fade instead of slide in from right’ is closed to new replies.