New to the community? Start here

Name of plugun wpmudev uses on home page?

On the WPMUDEV home page under “The only place you are going to find great Multisite themes…” and then below that, “Meet our developers, designers …” What is the plugin that creates the very cool rollovers?

Thanks,

Paul

Thu, 6 Jun 2013 5:29:23

Jack Kitterhing
- Code Norris
- 13,199 pts: Hero points 20,416 pts: Rep. points LEVEL 30
Hiya Paul,

I hope you are well today, thanks for your question.

The gallery with the rollovers on the home page is custom coded by our great lead developers and designer.

I think there may be some gallery plugins that could achieve a similar effect, perhaps take a look on codecanyon here http://codecanyon.net/category/wordpress/galleries

Thank you for being a WPMU DEV member!

Kind Regards

Jack.

Dr_Scythe

Design Lord, Child of Thor

125 pts: Hero points 65 pts: Rep. points LEVEL 3

Hi Paul,

It’s not a plugin but instead a custom function wpmudev have made in their wpmudev.js file.

Here is the code for the function:

Direction aware animation for staff avatar

*/

jQuery(document).ready(function($){

$('.staff-avatar').bind('mouseenter mouseleave', function(e){

// Credit: http://stackoverflow.com/a/3647634

/** the width and height of the current div **/

var w = $(this).width();

var h = $(this).height();



/** calculate the x and y to get an angle to the center of the div from that x and y. **/

/** gets the x value relative to the center of the DIV and "normalize" it **/

var x = (e.pageX - this.offsetLeft - (w/2)) * ( w > h ? (h/w) : 1 );

var y = (e.pageY - this.offsetTop  - (h/2)) * ( h > w ? (w/h) : 1 );



/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/

/** first calculate the angle of the point,

add 180 deg to get rid of the negative values

divide by 90 to get the quadrant

add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/

var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;

switch ( direction ){

case 0:

var dir_class = 'staff-meta-top';

break;

case 1:

var dir_class = 'staff-meta-right';

break;

case 2:

var dir_class = 'staff-meta-bottom';

break;

case 3:

var dir_class = 'staff-meta-left';

break;

}

var meta = $(this).find('.staff-meta');

meta.removeClass('staff-meta-top staff-meta-left staff-meta-right staff-meta-bottom staff-meta-animate staff-meta-display');

if ( e.type == 'mouseenter' )

meta.hide().addClass(dir_class).show(0, function(){

$(this).addClass('staff-meta-animate').addClass('staff-meta-display');

});

else

meta.addClass('staff-meta-animate').addClass(dir_class);

});

});