Portfolio effects in jQuery

Portfolio effects in jQuery

web solutions
English text only

The portfolio page is one of the most important for a company like ours, since it's one of the most visited by customers. In order to achieve this in our website, Di-SiDE, we studied different layouts, trying to get a professional result.What follows illustrates how we created the animation and grayscale images starting from colored ones.When the page is loaded, the images are retrieved one by one. Each one is then cloned and transformed into a grayscale version, and styled with some CSS classes.

jQuery(function($) {
  $('.image img').each(function() {
    var imgGrayscale = $(this);

    var imgColor = imgGrayscale.clone();
    imgColor.addClass('img_color').css({"opacity":"0","position":"absolute","z-index": "2"}).insertAfter(imgGrayscale);          

    imgGrayscale.grayscale();
    imgGrayscale.addClass('img_grayscale').css({"opacity":"1","position":"absolute"});
  })
;});

//Function grayscale
(function($) {    
  $.fn.grayscale = function() {
    if ($.browser.msie) { // ie IE      
      grayscaleIE(this);
      return this;
    }
   
    var self = this;    
    var canvas = $('<canvas />').get(0);
    var ctx = canvas.getContext('2d');
    canvas.width = self.width();
    canvas.height = self.height();
    var img = new Image();
   
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
      var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);

      for(var y = 0; y < imgPixels.height; y++) {
        for(var x = 0; x < imgPixels.width; x++) {
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
        }
      }
      ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);  
      self.attr('src', canvas.toDataURL());  
    }
   
    img.src = self.attr('src');
    return this;
  }
})(jQuery);

var grayscaleIE = (function(){        
  var init = function(context) {
    if (context && context[0] && context.length && context[0].nodeName) {
      var allContexts = Array.prototype.slice.call(context);
      for (var index = 0; index < allContexts.length; index++) {
        init.call(this, allContexts[index]);
      }
      return;
    }
       
    context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
    context.style.zoom = 1;
    return;
  };
  return init;
})();

jQuery Animations

A custome animation shows the color image when the mouse hovers upon it, and hides it otherwise.
We also added an animated menu, displayed together with the color image. This allows users to view a slideshow with more pictures or read a brief description of the product.

$('.box .menu').css('opacity', 0);

$('.box').hover(function() {
   $(this).addClass('hover');

   var imgColor = $(this).find('.img_color');
   imgColor.stop().animate( { opacity: '1' }, 800 );

   var menu = $(this).find('.menu');
   menu.stop().animate({ opacity: '.9' },800);

}, function() {
  $(this).removeClass('hover');
 
  var imgColor = $(this).find('.img_color');
  imgColor.stop().animate( { opacity: '0' }, 800 );

  var menu = $(this).find('.menu');
  menu.stop().animate({ opacity: '0' },800);
});

With some easy steps, we created a nice effect, to be used in any portfolio!

Links

Html5 grayscale image hover
Portfolio

Related News