[Summary view] [Print] [Text view]

   1     var getSizeImg = function(src) {
   2          var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
   3          var size = {width: timg.get(0).offsetWidth, height: timg.get(0).offsetHeight };
   4          
   5          try { document.body.removeChild(timg[0]); }
   6          catch(e) {};
   7  
   8          return size;
   9      };
  10  
  11  $().ready(function(){
  12  
  13      $('#_Container').resizable({
  14          containment: $('#_Wrapper'),
  15          handles: 'all',
  16          knobHandles: true,
  17          autoHide: true,
  18          minWidth: 100,
  19          minHeight: 100,
  20          resize: function(event, ui){
  21              var self = $(this).data("resizable"),
  22                  imageSize = $('#_Container').data("image-size"),
  23                  top = self.position.top, 
  24                  height = ((self.position.top + self.size.height) <= imageSize.height ? self.size.height : imageSize.height),
  25                  left = self.position.left,
  26                  width = ((self.position.left + self.size.width) <= imageSize.width ? self.size.width : imageSize.width);
  27  
  28              left = left > 0 ? left : 0;
  29              top = top > 0 ? top : 0;
  30              
  31              var bgPos = '-' + (left + 1) + 'px -' + (top + 1) + 'px';
  32  
  33              //the borders of the resize rect are offsetting the bg pos incorrectly. subtract (add, since its a negative) 1 to fix.

  34              $(this).css({backgroundPosition: bgPos});
  35  
  36              $("#log-top").html(top + "px");
  37              $("#log-height").html(height + "px");
  38              $("#log-left").html(left + "px");
  39              $("#log-width").html(width + "px");
  40          },
  41          stop: function(event, ui){
  42              var self = $(this).data("resizable"),
  43                  top = self.position.top,
  44                  left = self.position.left;
  45  
  46              left = left > 0 ? left : 0;
  47              top = top > 0 ? top : 0;
  48  
  49            $(this).css({backgroundPosition: ((left + 1) * -1) + 'px ' + ((top + 1) * -1) + 'px'});
  50          }
  51      })
  52      .draggable({
  53          cursor: 'move',
  54          containment: $('#_Wrapper'),
  55          drag: function(event, ui){
  56              var self = $(this).data("draggable");
  57              $(this).css({backgroundPosition: ((self.position.left + 1) * -1) + 'px ' + ((self.position.top + 1) * -1) + 'px'});
  58  
  59              $("#log-top").html(self.position.top+"px");
  60              $("#log-left").html(self.position.left+"px");
  61          }
  62      });
  63  
  64      $('.thumbs')
  65          .find("li a")
  66          .click(function(event){
  67            $('#_Container').css({top: '0', left: '0'});
  68        
  69        var size = getSizeImg($(this).find("img").attr("src"));
  70  
  71            $('#_Container_Image').css({
  72                width: size.width, 
  73                height: size.height, 
  74                background: 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0%' 
  75            });
  76            
  77        $('#_Wrapper').css({ width: size.width, height: size.height });
  78            $('#_Container')
  79                .css('background', 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0px 0px')
  80                .data("image-size", size);
  81  
  82        return false;
  83          });
  84  
  85      $('#_Container_Image').css({ opacity: 0.5 });
  86    $("#log-height").html($('#_Container').height()+"px");
  87    $("#log-width").html($('#_Container').width()+"px");
  88    
  89    $(".thumbs li a:first").click();
  90  });