WordPress.org

Ready to get started?Download WordPress

Forums

Post Rotator
[resolved] Fade instead of slide in from right (8 posts)

  1. cm123077
    Member
    Posted 1 year ago #

    How can I change the code to allow a fade in, delay, and fade out of the post info, instead of it sliding in from the right to left?

    http://wordpress.org/extend/plugins/post-rotator/

  2. sirbolkins
    Member
    Plugin Author

    Posted 1 year ago #

    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)

  3. cm123077
    Member
    Posted 1 year ago #

    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);
    });
  4. sirbolkins
    Member
    Plugin Author

    Posted 1 year ago #

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

    }}
    	}
  5. cm123077
    Member
    Posted 1 year ago #

    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!

  6. sirbolkins
    Member
    Plugin Author

    Posted 1 year ago #

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

  7. cm123077
    Member
    Posted 1 year ago #

    will do, thanks

  8. DDoran
    Member
    Posted 12 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.