3D carousel using jQuery

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++;
}

A simple and lightweight Javascript calendar

This Javascript code will display a calendar in a table, useful for date picking…

// these are labels for the days of the week
cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

// these are human-readable month name labels, in order
cal_months_labels = ['January', 'February', 'March', 'April',
                     'May', 'June', 'July', 'August', 'September',
                     'October', 'November', 'December'];

// these are the days of the week for each month, in order
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

// this is the current date
var cal_current_date = new Date();

function Calendar(month, year) {
  this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
  this.year  = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;
}

Calendar.prototype.generateHTML = function(){

  // get first day of month
  var firstDay = new Date(this.year, this.month, 1);
  var startingDay = firstDay.getDay();
 
  // find number of days in month
  var monthLength = cal_days_in_month[this.month];
 
  // compensate for leap year
  if (this.month == 1) { // February only!
    if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0){
      monthLength = 29;
    }
  }

  // get todays date
  var cal_today_date = new Date();
  checkDay = (cal_today_date.getMonth() == this.month && cal_today_date.getFullYear() == this.year) ? true : false;
 
  // do the header
  var monthName = cal_months_labels[this.month]
  var html = '<table class="calendar-table" cellpadding="4" cellspacing="0">';
  html += '<tr><th><a href="javascript:cal.prevMonth()">&#171;</a></th><th colspan="5">';
  html +=  monthName + "&nbsp;" + this.year;
  html += '</th><th><a href="javascript:cal.nextMonth()">&#187;</a></th></tr>';
  html += '<tr class="calendar-header">';
  for(var i = 0; i <= 6; i++ ){
    html += '<td class="calendar-header-day">';
    html += cal_days_labels[i];
    html += '</td>';
  }
  html += '</tr><tr>';

  // fill in the days
  var day = 1;
  // this loop is for is weeks (rows)
  for (var i = 0; i < 9; i++) {
    // this loop is for weekdays (cells)
    for (var j = 0; j <= 6; j++) {
      html += '<td class="calendar-day">';
      if (day <= monthLength && (i > 0 || j >= startingDay)) {
        ts = this.generateTimestamp(day);
        if (checkDay == true && day == cal_today_date.getDate())
          html += '<a class="today" href="javascript:void(0)">' + day + '</a>';
        else
          html += '<a href="javascript:void(0)">' + day + '</a>';
        day++;
      }
      html += '</td>';
    }
    // stop making rows if we've run out of days
    if (day > monthLength) {
      break;
    } else {
      html += '</tr><tr>';
    }
  }
  html += '</tr></table>';
  document.getElementById('calendar-holder').innerHTML = html;
}

Calendar.prototype.generateTimestamp = function(day) {
  month = this.month + 1;
  return "'" + day + "','" + month + "','" + this.year + "'";
}

Calendar.prototype.prevMonth = function() {
  if (this.month == 0) {
    this.month = 12;
    this.year = (this.year - 1);
  }
  this.month = (this.month - 1);
  this.generateHTML();
}

Calendar.prototype.nextMonth = function() {
  if (this.month == 11) {
    this.month = -1;
    this.year = (this.year + 1);
  }
  this.month = (this.month + 1);
  this.generateHTML();
}

To display the calendar for example…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>Select date</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/calendar.css" />
    <script type="text/javascript" src="scripts/calendar.js"></script>
</head>
<body>
<div id="calendar-holder">
<script type="text/javascript">
// <![CDATA[
 var cal = new Calendar();
 cal.generateHTML();
// ]]>
</script>
</div>
</body>
</html>

Fancybox jQuery lightbox

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