view mbp.js @ 35:9c34b211740a

added width and height attribute information to images
author Atul Varma <varmaa@toolness.com>
date Fri, 11 Dec 2009 14:58:31 -0800
parents 5ef9f73615c1
children 2c5d734e1d2c
line wrap: on
line source

$(window).ready(
  function() {
    var rectRegexp = /rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)/;
    var smallImages = $(".mbp-entry img.small");
    var loadsLeft = smallImages.length;
    $("h1").mouseover(
      function() {
        $("#images").empty();
      });
    $(".mbp-entry img.large").each(
      function() {
        if (!$(this).hasClass("small"))
          $(this).remove();
      });
    smallImages.each(
      function() {
        function onLoaded() {
          $("#countdown").text(--loadsLeft);

          var siblings = [this.previousSibling,
                          this.nextSibling];
          for (var i = 0; i < siblings.length; i++)
            if (siblings[i] &&
                siblings[i].isElementContentWhitespace)
              $(siblings[i]).remove();

          var clip = $(this).css("clip");
          var parts = clip.match(rectRegexp);
          var crop = {top: parts[1],
                      right: parts[2],
                      bottom: parts[3],
                      left: parts[4]};
          crop.width = crop.right - crop.left;
          crop.height = crop.bottom - crop.top;
          var canvas = document.createElement("canvas");
          var self = $(this.parentNode).clone();
          $(canvas).mouseenter(
            function() {
              $("#images").empty();
              $("#images").append(self);
            });
          $(canvas).addClass("thumbnail");
          $(this).before(canvas);
          var ctx = canvas.getContext("2d");
          ctx.drawImage(this,
                        crop.left,
                        crop.top,
                        crop.width,
                        crop.height,
                        0,
                        0,
                        canvas.width,
                        canvas.height);
          $(this).remove();
          if (loadsLeft == 0) {
            $("#countdown").remove();
            $("#container").fadeIn();
          }
        }

        if (this.complete)
          onLoaded.call(this);
        else
          this.addEventListener("load", onLoaded, false);
      });
    $("#countdown").text(loadsLeft);
  });