Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

jquery plugin to create square-tiles with a background image

jquery plugin to create square-tiles with a background image

Problem

I need to split an image into square-shape tiles on which users can hover or click on.

Should i use pure css or do I have to use Jquery ? Do you have examples of jquery plugins doing that? (I found this one but would be interested in other suggestions)

Thanks for your help.

Problem courtesy of: Mathieu

Solution

That plugin is kinda old, I'd suggest you use this one, adapted from this other plugin:

Demo: http://jsfiddle.net/elclanrs/HmpGx/

;(function( $, window ) {

  var _defaults = { x: 3, y: 3, gap: 2 };

  $.fn.splitInTiles = function( options ) {

    var o = $.extend( {}, _defaults, options );

    return this.each(function() {

      var $container = $(this),
          width = $container.width(),
          height = $container.height(),
          $img = $container.find('img'),
          n_tiles = o.x * o.y,
          wraps = [], $wraps;

      for ( var i = 0; i ');
      }

      $wraps = $( wraps.join('') );
      $img.hide().after( $wraps );

      $wraps.css({
        width: (width / o.x) - o.gap,
        height: (height / o.y) - o.gap,
        marginBottom: o.gap +'px',
        marginRight: o.gap +'px',
        backgroundImage: 'url('+ $img.attr('src') +')'
      });

      $wraps.each(function() {
        var pos = $(this).position();
        $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
      });

    });

  };

}( jQuery, window ));
Solution courtesy of: elclanrs

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

jquery plugin to create square-tiles with a background image

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×