HaikuImagePopup

by Borom 2014-09-22 [2014/09/22 01:16:42]

はてなハイクの画像をポップアップ（オーバーレイ）表示に変更

• /*
   * @title HaikuImagePopup
   * @description ハイクの画像リンクをポップアップ表示に変更
   * @include http://h.hatena.ne.jp/*
   * @license MIT License
   * @require jquery
   */
  
  
  
  $(function(){
    $(".entry-body-content img").live("click",function(){
      var imgFilePath = $(this).attr("src");
      var htmlShadowBlock = '<div id="brm-image-overlay-shadow"></div>';
  
      var htmlOverlayBlock;
      htmlOverlayBlock = '<div id="brm-image-overlay"><div id="brm-image-overlay-inner"><img src="' + imgFilePath + '"></div></div>';
  
      var windowWidth = $(window).width();
      var windowHeight = $(window).height();
  
      var overlayWidth = windowWidth;
      var overlayHeight = windowHeight;
  
  
      $("body").append(htmlShadowBlock);
      $("body").append(htmlOverlayBlock);
      $("#brm-image-overlay-shadow")
        .css({
          "position": "fixed",
          "width": "100%",
          "height": "100%",
          "top": "0",
          "left": "0",
          "background": "gray",
          "opacity": "0.5",
          "z-index": "10000"
        });
  
      overlayWidth = overlayWidth - 40;
      overlayHeight = overlayHeight - 40;
      $("#brm-image-overlay")
        .css({
          "position": "fixed",
          "width": overlayWidth,
          "height": overlayHeight,
          "top": 20,
          "left": 20,
          "z-index": "10001"
        });
      $("#brm-image-overlay-inner")
        .css({
          "position": "absolute",
          "height": "100%",
          "width": "100%",
          "background": "#fff",
          "border-radius": 10
        });
  
      var overlayInnerWidth = $("#brm-image-overlay-inner").width();
      var overlayInnerHeight = $("#brm-image-overlay-inner").height();
  
      var imgWidth = $("#brm-image-overlay-inner img").width();
      var imgHeight = $("#brm-image-overlay-inner img").height();
  
      $("#brm-image-overlay-inner img")
        .css({
          "position": "absolute",
          "left": (overlayInnerWidth / 2) - (imgWidth /2),
          "top": (overlayInnerHeight / 2) - (imgHeight /2),
          "max-width": "100%",
          "max-height": "100%"
        });
  
      return false;
    });
  
    $("#brm-image-overlay-shadow, #brm-image-overlay").live("click",function(){
      $("#brm-image-overlay,#brm-image-overlay-shadow").remove();
      return false;
    });
  });

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。