XEWeb » jQuery

Thumbnail opacity hover with CSS and jQuery

Jason — Mon, 22 Mar 2010 16:32:38 +0000

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

Jason — Tue, 02 Feb 2010 16:47:12 +0000

Inspired 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

Jason — Sun, 27 Dec 2009 19:20:32 +0000

FancyBox 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

 });

});