[Summary view] [Print] [Text view]

   1  // $Id: screenshot.js,v 1.1.2.2 2010/02/14 06:44:15 sociotech Exp $

   2  /*

   3   * Screenshot preview script 

   4   * (based on "Easiest Tooltip" script by Alen Grakalic: http://cssglobe.com)

   5   *

   6   */
   7  
   8  this.screenshotPreview = function(){
   9    // configure distance of preview from the cursor

  10    var xOffset = 20;
  11    var yOffset = 0;
  12  
  13    $('span.preview-icon').hover(function(e){
  14      var img_class = this.id;
  15      var caption = $(this).parent().text();
  16      // add preview markup

  17      $('body').append('<div id="screenshot">' +
  18                       '<div class="screenshot-preview ' + img_class + '" alt="preview"></div>' + 
  19                       '<div class="screenshot-caption">' + caption + '</div>' +
  20                       '</div>');
  21      $("#screenshot").hide();  // hide preview until dimensions are set

  22      $("#screenshot").css("left", (e.pageX + xOffset) + "px").css("top", (e.pageY + yOffset) + "px");  // set initial preview position

  23      // load image in order to set preview dimensions

  24      var img = new Image();
  25      img.onload = function() {
  26        var caption_height = parseFloat($("#screenshot .screenshot-caption").css("height"));
  27        $("#screenshot").css("height", img.height + caption_height);
  28        $("#screenshot").css("width", img.width);
  29        $("#screenshot ." + img_class).css("height", img.height);
  30        $("#screenshot ." + img_class).css("width", img.width);
  31        $("#screenshot .screenshot-caption").css("width", img.width - 10);
  32        $("#screenshot").fadeIn("fast");  // now show preview

  33      }
  34      img.src = $("." + img_class).css("background-image").replace(/^url|[\(\)\"]/g, '');
  35    },
  36    function(){
  37      $("#screenshot").remove();
  38    });
  39    // adjust preview position with cursor movement

  40    $("span.preview-icon").mousemove(function(e){
  41      $("#screenshot").css("left", (e.pageX + xOffset) + "px").css("top", (e.pageY + yOffset) + "px");
  42    });
  43  };
  44  
  45  // start the script on page load

  46  $(document).ready(function(){
  47    if ($('span.preview-icon').size() > 0) {
  48      screenshotPreview();
  49    }
  50  });