3D carousel using jQuery

February 2nd, 2010 | Javascript, jQuery
No Comments »

3D carousel using jQueryInspired by Andrew Sellick’s Simple 3D Carousel using Mootools I needed a jQuery version of the script, source code of which is below (tested with jQuery 1.4).

Please refer to the original tutorial for instructions and a working demo.

var count = 0;
var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;
var imageDivs = '';
var numberOfElements = 0;
var carousel = '';
var speedTest = '';

$(document).ready(function(){
 
 carousel = $('#carousel');
 imageDivs = $('#carousel div');
 numberOfElements = imageDivs.length;

 setInterval('startCarousel()', 40);
 
 carousel.mousemove(function(event) {
  tempX = event.clientX;
  speed = (tempX - centerX) / 2500;
 });
});

function startCarousel(){
 
 for(i=0; i < numberOfElements; i++){

  angle = i * ( Math.PI * 2 ) / numberOfElements;
 
  posX = ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );
  posY = ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );
 
  imageDivWidth = posY/3;
  imageDivZIndex = Math.round(imageDivWidth)+100;
 
  $('#carousel div').eq(i).css({'position': 'absolute', 'left': posX + 'px', 'top': posY + 'px', 'width': imageDivWidth + 'px', 'zIndex': imageDivZIndex});

  angle += speed;
 }
 count++;
}

Fancybox jQuery lightbox

December 27th, 2009 | Javascript, jQuery
1 Comment »

Fancybox jQuery lightboxFancyBox is a tool for displaying images, html content and multi-media in a modal window (lightbox) based on the jQuery library.

What I love about FancyBox is loading new windows in an iframe. For example one website that I built used the RPX system allowing users to log in via their favorite social networking site. Rather than just redirect users to the RPX page I had it load in a modal window so they were never taken away from my site.

$(document).ready(function(){
 $('a.iframe').fancybox({
  'frameURL': 'https://XX.rpxnow.com/openid/embed?token_url=XX',
  'frameHeight': 280,
  'hideOnContentClick': false
 });
});