Thumbnail opacity hover with CSS and jQuery

March 22nd, 2010 | CSS, jQuery
No Comments »

A nice effect when hovering over thumbnails is to change the opacity, so that it has that fade in and out effect.

<ul class="thumbnails">
 <li><a href="#"><img src="thumb-1.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb-2.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb-3.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb-4.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb-5.jpg" alt="" /></a></li>
</ul>

Take the above example, a simple list of images. Let’s apply the basic styling for it…

ul.thumbnails { list-style: none; margin: 0; padding: 0; }
ul.thumbnails li { float: left; margin: 10px; width: 50px; height: 50px; }
ul.thumbnails li img { filter: alpha(opacity=60); /* IE only */ opacity: .60; /* All other browsers */ }

As you can see all of the thumbnails will have a default opacity of 60%. Now comes the jQuery script to add the fade effect…

$(document).ready(function(){
 $('ul.thumbnails li').hover(function(){
  $('img', this).stop().animate({opacity: 1});
 }, function() {
  $('img', this).stop().animate({opacity: 0.6});
 });
});

And that’s all there is to it!

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