HaikuImagePopup

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

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

@@ -1,30 +1,56 @@
 /*
- * @title HaikuImagePopup
- * @description ハイクの画像リンクをポップアップ表示に変更
+ * @title haikuimagepopup
+ * @description ハイクのimgをオーバーレイでポップアップ表示させる
  * @include http://h.hatena.ne.jp/*
  * @license MIT License
  * @require jquery
  */
 
-
-
 $(function(){
+  var activeFlag = false;
   $(".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>';
+    // オーバーレイ用HTML生成
+    var htmlShadowBlock = '<div id="brm-image-overlay-shadow"></div>';
+    var 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;
-
-
+    // HTMLブロックをbody末尾に追加
     $("body").append(htmlShadowBlock);
     $("body").append(htmlOverlayBlock);
+
+    // リサイズ前の画像サイズ取得
+    var imgWidth = $("#brm-image-overlay-inner img").width();
+    var imgHeight = $("#brm-image-overlay-inner img").height();
+
+    // オーバーレイサイズの取得
+    var overlayWidth;
+    var overlayHeight;
+    // width取得
+    if(imgWidth > windowWidth - 40){
+      // 画像サイズ＞ウィンドウサイズ-40pxの場合、オーバーレイサイズをウィンドウサイズ-40pxに指定する
+      overlayWidth = windowWidth - 40;
+    } else {
+      // 画像サイズ <= ウィンドウサイズ-40pxの場合、オーバーレイサイズを画像サイズ+40pxに指定する 
+      overlayWidth = imgWidth + 40;
+    }
+    //Height取得
+    if(imgHeight > windowHeight - 40){
+      // 画像サイズ＞ウィンドウサイズ-40pxの場合、オーバーレイサイズをウィンドウサイズ-40pxに指定する
+      overlayHeight = windowHeight - 40;
+    } else {
+      // 画像サイズ <= ウィンドウサイズ-40pxの場合、オーバーレイサイズを画像サイズ+40pxに指定する 
+      overlayHeight = imgHeight + 40;
+    }
+
+
+    // 影のスタイル指定
     $("#brm-image-overlay-shadow")
       .css({
         "position": "fixed",
@@ -37,46 +63,51 @@
         "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"
+        "top": (windowHeight / 2) - (overlayHeight / 2),
+        "left": (windowWidth / 2) - (overlayWidth / 2),
+        "z-index": "10001",
+        "background": "#fff",
+        "border-radius": 10
       });
+
+    // オーバーレイ中身のスタイル指定
     $("#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();
 
+    // 生成されたimgタグの整形
     $("#brm-image-overlay-inner img")
       .css({
-        "position": "absolute",
-        "left": (overlayInnerWidth / 2) - (imgWidth /2),
-        "top": (overlayInnerHeight / 2) - (imgHeight /2),
         "max-width": "100%",
         "max-height": "100%"
       });
 
+    //ステータスフラグを立てる
+    activeFlag = true;
+
     return false;
   });
 
+  if(activeFlag){
+    $(window).resize(function(){
+
+    });
+  }
+
   $("#brm-image-overlay-shadow, #brm-image-overlay").live("click",function(){
     $("#brm-image-overlay,#brm-image-overlay-shadow").remove();
+    activeFlag = false;
     return false;
   });
 });

• /*
   * @title haikuimagepopup
   * @description ハイクのimgをオーバーレイでポップアップ表示させる
   * @include http://h.hatena.ne.jp/*
   * @license MIT License
   * @require jquery
   */
  
  $(function(){
    var activeFlag = false;
    $(".entry-body-content img").live("click",function(){
  
      // クリックした画像のファイルパス取得
      var imgFilePath = $(this).attr("src");
  
      // オーバーレイ用HTML生成
      var htmlShadowBlock = '<div id="brm-image-overlay-shadow"></div>';
      var 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();
  
      // HTMLブロックをbody末尾に追加
      $("body").append(htmlShadowBlock);
      $("body").append(htmlOverlayBlock);
  
      // リサイズ前の画像サイズ取得
      var imgWidth = $("#brm-image-overlay-inner img").width();
      var imgHeight = $("#brm-image-overlay-inner img").height();
  
      // オーバーレイサイズの取得
      var overlayWidth;
      var overlayHeight;
      // width取得
      if(imgWidth > windowWidth - 40){
        // 画像サイズ＞ウィンドウサイズ-40pxの場合、オーバーレイサイズをウィンドウサイズ-40pxに指定する
        overlayWidth = windowWidth - 40;
      } else {
        // 画像サイズ <= ウィンドウサイズ-40pxの場合、オーバーレイサイズを画像サイズ+40pxに指定する 
        overlayWidth = imgWidth + 40;
      }
      //Height取得
      if(imgHeight > windowHeight - 40){
        // 画像サイズ＞ウィンドウサイズ-40pxの場合、オーバーレイサイズをウィンドウサイズ-40pxに指定する
        overlayHeight = windowHeight - 40;
      } else {
        // 画像サイズ <= ウィンドウサイズ-40pxの場合、オーバーレイサイズを画像サイズ+40pxに指定する 
        overlayHeight = imgHeight + 40;
      }
  
  
      // 影のスタイル指定
      $("#brm-image-overlay-shadow")
        .css({
          "position": "fixed",
          "width": "100%",
          "height": "100%",
          "top": "0",
          "left": "0",
          "background": "gray",
          "opacity": "0.5",
          "z-index": "10000"
        });
  
      // オーバーレイ本体のスタイル指定
      $("#brm-image-overlay")
        .css({
          "position": "fixed",
          "width": overlayWidth,
          "height": overlayHeight,
          "top": (windowHeight / 2) - (overlayHeight / 2),
          "left": (windowWidth / 2) - (overlayWidth / 2),
          "z-index": "10001",
          "background": "#fff",
          "border-radius": 10
        });
  
      // オーバーレイ中身のスタイル指定
      $("#brm-image-overlay-inner")
        .css({
        });
  
      // 生成されたオーバーレイ中身のサイズ指定
      var overlayInnerWidth = $("#brm-image-overlay-inner").width();
      var overlayInnerHeight = $("#brm-image-overlay-inner").height();
  
  
      // 生成されたimgタグの整形
      $("#brm-image-overlay-inner img")
        .css({
          "max-width": "100%",
          "max-height": "100%"
        });
  
      //ステータスフラグを立てる
      activeFlag = true;
  
      return false;
    });
  
    if(activeFlag){
      $(window).resize(function(){
  
      });
    }
  
    $("#brm-image-overlay-shadow, #brm-image-overlay").live("click",function(){
      $("#brm-image-overlay,#brm-image-overlay-shadow").remove();
      activeFlag = false;
      return false;
    });
  });

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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