HaikuImagePopup
by
Borom
2014-09-22 [2014/09/22 01:16:42]
はてなハイクの画像をポップアップ（オーバーレイ）表示に変更
@@ -1,113 +1,231 @@
/*
- * @title haikuimagepopup
- * @description ハイクのimgをオーバーレイでポップアップ表示させる
+ * @title HaikuImagePopup
+ * @description はてなハイクの画像をポップアップ（オーバーレイ）表示に変更
* @include http://h.hatena.ne.jp/*
* @license MIT License
- * @require jquery
+ * @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
*/
-$(function(){
- var activeFlag = false;
- $(".entry-body-content img").live("click",function(){
- // クリックした画像のファイルパス取得
- var imgFilePath = $(this).attr("src");
+// 編集履歴
+// 0.0.1 ベースを別に作成したポップアップ生成テンプレートに変更
- // オーバーレイ用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;
+ // プラグイン部分
+(function ( $ ){
+ $.fn.haikuImagePopup = function ( imgSrc, options ) {
+ // オプション設定
+ var settings = $.extend({}, {
+ // デフォルトパラメータ指定
+ openAnimation: false,
+ closeAnimation: true,
+
+ shadowName: "let-overlay-shadow",
+ shadowZIndex: 99998,
+ shadowOpacity: 0.6,
+ shadowColor: "#999",
+
+ contentName: "let-overlay-content",
+ contentClassName: "let-overlay",
+ contentZIndex: 99999,
+ contentColor: "#fff",
+ contentRadius: "10px",
+ contentWidth: 400,
+ contentHeight: 300,
+
+ disableShadowStyle: false,
+ disableContentStyle: false,
+
+ closeButtonClassName: "let-close",
+ }, options);
+
+
+ // プラグイン動作の記述
+
+
+ // オーバーレイ生成処理
+ if( !$("." + settings.contentClassName ).length){
+ createOverlay(imgSrc, settings);
}
+ // オーバーレイ削除処理
+ $(document).on("keydown", "body", function( e ){
+ if( e.keyCode == 27 ) {
+ removeOverlay( settings.contentClassName );
+ }
+ });
- // 影のスタイル指定
- $("#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%"
- });
+ // ウィンドウリサイズ時のサイズ・位置調整
+ var windowTimer = false;
+ $(window).resize(function(){
+ if ( windowTimer !== false) {
+ clearTimeout ( windowTimer );
+ }
+ windowTimer = setTimeout(function() {
+ restyleContent( settings );
+ },200);
+ });
- //ステータスフラグを立てる
- activeFlag = true;
- return false;
- });
+ $(document).on("click", "#" + settings.shadowName + " , ." + settings.closeButtonClassName , function() {
+ removeOverlay( settings.contentClassName );
+ });
- if(activeFlag){
- $(window).resize(function(){
- });
- }
+ // -------------------------------------------------------
+ // オーバーレイ生成関数
+ function createOverlay ( imgURL, param ){
+ // 生成用HTMLテキスト
+ var htmlShadow = "<div id=\"" + param.shadowName + "\" class=\"" + param.contentClassName + "\"></div>";
+ var htmlContent = "<div id=\"" + param.contentName + "\" class=\"" + param.contentClassName + "\"><img src=\"" + imgURL + "\"> " + "</div>";
+ var htmlOverlay = htmlShadow + htmlContent;
+
+ var windowSize = {
+ height: 0,
+ width: 0,
+ };
+ var contentSize = {
+ height: 0,
+ width: 0,
+ };
+
+ windowSize.width = $(window).width();
+ windowSize.height = $(window).height();
+
+
+
+ // ウィンドウ幅が指定コンテンツサイズ未満だった場合、
+ // コンテンツ幅をウィンドウ幅-40に指定
+ if (windowSize.width < param.contentWidth){
+ contentSize.width = windowSize.width - 40;
+ } else {
+ contentSize.width = param.contentWidth;
+ }
+
+ var contentPosition = {
+ top: 10,
+ left: 10,
+ }
+
+ // ウィンドウ高さが指定コンテンツサイズ以下だった場合、
+ // コンテンツ高さをウィンドウ幅-40に指定
+ if (windowSize.height < param.contentHeight){
+ contentSize.height = windowSize.height - 40;
+ } else {
+ contentSize.height = param.contentHeight;
+ }
+
+ var cssSettings = {
+ shadow: {
+ background: param.shadowColor,
+ opacity: param.shadowOpacity,
+ position: "fixed",
+ top: 0,
+ left: 0,
+ width: "100%",
+ height: "100%",
+ zIndex: param.shadowZIndex,
+ },
+ content : {
+ background: param.contentColor,
+ borderRadius: param.contentRadius,
+ position: "fixed",
+ top: contentPosition.top,
+ left: contentPosition.left,
+ zIndex: param.contentZIndex,
+ }
+ };
+ cssSettings.content = $.extend( cssSettings.content, getContentSize(param) );
+
+ // body 末尾にオーバーレイ用HTMLを追加
+ $("body").append(htmlOverlay);
+
+ // シャドウ・コンテンツの各オブジェクト取得
+ var elemShadow = $("#" + param.shadowName);
+ var elemContent = $("#" + param.contentName);
+
+ // シャドウのCSS指定
+ if(!param.disableShadowStyle){
+ elemShadow.css(cssSettings.shadow);
+ }
+ // コンテンツのCSS指定
+ if(!param.disableContentStyle){
+ elemContent.css(cssSettings.content);
+ }
+
+ };
+ // -------------------------------------------------------
+
+ // コンテンツ領域の再描画関数
+ // リサイズとポジション修正を行う
+ function restyleContent ( param ){
+ var elemContent = $( "#" + param.contentName );
+ var fixSize = getContentSize( param );
+ elemContent.css(fixSize);
+ return false;
+ }
+ // -------------------------------------------------------
+
+ // オーバーレイ削除関数
+ function removeOverlay( overlayClass ) {
+ $("." + overlayClass).remove();
+ return false;
+ };
+ // -------------------------------------------------------
+
+ // サイズ・ポジション取得関数
+ function getContentSize ( param ){
+ var fixSize = {
+ width: 0,
+ height: 0,
+ top: 0,
+ left: 0
+ }
+ var elemWindow = $(window);
+ var elemContent = $("#" + param.contentName);
+ var windowSize = {
+ width: elemWindow.width(),
+ height: elemWindow.height()
+ }
+
+ // コンテンツ領域サイズ指定
+ if(windowSize.width < param.contentWidth){
+ fixSize.width = windowSize.width - 40;
+ } else {
+ fixSize.width = param.contentWidth;
+ }
+ if(windowSize.height < param.contentHeight){
+ fixSize.height = windowSize.height - 40;
+ } else {
+ fixSize.height = param.contentHeight;
+ }
+
+ // ポジション修正
+ fixSize.left = Math.floor((windowSize.width - fixSize.width) /2);
+ fixSize.top = Math.floor((windowSize.height - fixSize.height) / 2);
+
+ return fixSize;
+ }
+ // -------------------------------------------------------
+
+ };
+}( jQuery ) );
- $("#brm-image-overlay-shadow, #brm-image-overlay").live("click",function(){
- $("#brm-image-overlay,#brm-image-overlay-shadow").remove();
- activeFlag = false;
+
+// 実行
+$(function(){
+ $(document).on("click",".entry-body-content a img",function(){
+ var sourceURL = $(this);
+ var imgOrigin = new Image();
+ imgOrigin.src = sourceURL.attr('src');
+ var sourceImageSize = {
+ width: imgOrigin.width,
+ height: imgOrigin.height,
+ }
+
+ $().haikuImagePopup(imgOrigin.src,{
+ contentWidth: sourceImageSize.width,
+ contentHeight: sourceImageSize.height
+ });
return false;
});
});
/*
* @title HaikuImagePopup
* @description はてなハイクの画像をポップアップ（オーバーレイ）表示に変更
* @include http://h.hatena.ne.jp/*
* @license MIT License
* @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
*/
// 編集履歴
// 0.0.1 ベースを別に作成したポップアップ生成テンプレートに変更
// プラグイン部分
(function ( $ ){
$.fn.haikuImagePopup = function ( imgSrc, options ) {
// オプション設定
var settings = $.extend({}, {
// デフォルトパラメータ指定
openAnimation: false,
closeAnimation: true,
shadowName: "let-overlay-shadow",
shadowZIndex: 99998,
shadowOpacity: 0.6,
shadowColor: "#999",
contentName: "let-overlay-content",
contentClassName: "let-overlay",
contentZIndex: 99999,
contentColor: "#fff",
contentRadius: "10px",
contentWidth: 400,
contentHeight: 300,
disableShadowStyle: false,
disableContentStyle: false,
closeButtonClassName: "let-close",
}, options);
// プラグイン動作の記述
// オーバーレイ生成処理
if( !$("." + settings.contentClassName ).length){
createOverlay(imgSrc, settings);
}
// オーバーレイ削除処理
$(document).on("keydown", "body", function( e ){
if( e.keyCode == 27 ) {
removeOverlay( settings.contentClassName );
}
});
// ウィンドウリサイズ時のサイズ・位置調整
var windowTimer = false;
$(window).resize(function(){
if ( windowTimer !== false) {
clearTimeout ( windowTimer );
}
windowTimer = setTimeout(function() {
restyleContent( settings );
},200);
});
$(document).on("click", "#" + settings.shadowName + " , ." + settings.closeButtonClassName , function() {
removeOverlay( settings.contentClassName );
});
// -------------------------------------------------------
// オーバーレイ生成関数
function createOverlay ( imgURL, param ){
// 生成用HTMLテキスト
var htmlShadow = "<div id=\"" + param.shadowName + "\" class=\"" + param.contentClassName + "\"></div>";
var htmlContent = "<div id=\"" + param.contentName + "\" class=\"" + param.contentClassName + "\"><img src=\"" + imgURL + "\"> " + "</div>";
var htmlOverlay = htmlShadow + htmlContent;
var windowSize = {
height: 0,
width: 0,
};
var contentSize = {
height: 0,
width: 0,
};
windowSize.width = $(window).width();
windowSize.height = $(window).height();
// ウィンドウ幅が指定コンテンツサイズ未満だった場合、
// コンテンツ幅をウィンドウ幅-40に指定
if (windowSize.width < param.contentWidth){
contentSize.width = windowSize.width - 40;
} else {
contentSize.width = param.contentWidth;
}
var contentPosition = {
top: 10,
left: 10,
}
// ウィンドウ高さが指定コンテンツサイズ以下だった場合、
// コンテンツ高さをウィンドウ幅-40に指定
if (windowSize.height < param.contentHeight){
contentSize.height = windowSize.height - 40;
} else {
contentSize.height = param.contentHeight;
}
var cssSettings = {
shadow: {
background: param.shadowColor,
opacity: param.shadowOpacity,
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
zIndex: param.shadowZIndex,
},
content : {
background: param.contentColor,
borderRadius: param.contentRadius,
position: "fixed",
top: contentPosition.top,
left: contentPosition.left,
zIndex: param.contentZIndex,
}
};
cssSettings.content = $.extend( cssSettings.content, getContentSize(param) );
// body 末尾にオーバーレイ用HTMLを追加
$("body").append(htmlOverlay);
// シャドウ・コンテンツの各オブジェクト取得
var elemShadow = $("#" + param.shadowName);
var elemContent = $("#" + param.contentName);
// シャドウのCSS指定
if(!param.disableShadowStyle){
elemShadow.css(cssSettings.shadow);
}
// コンテンツのCSS指定
if(!param.disableContentStyle){
elemContent.css(cssSettings.content);
}
};
// -------------------------------------------------------
// コンテンツ領域の再描画関数
// リサイズとポジション修正を行う
function restyleContent ( param ){
var elemContent = $( "#" + param.contentName );
var fixSize = getContentSize( param );
elemContent.css(fixSize);
return false;
}
// -------------------------------------------------------
// オーバーレイ削除関数
function removeOverlay( overlayClass ) {
$("." + overlayClass).remove();
return false;
};
// -------------------------------------------------------
// サイズ・ポジション取得関数
function getContentSize ( param ){
var fixSize = {
width: 0,
height: 0,
top: 0,
left: 0
}
var elemWindow = $(window);
var elemContent = $("#" + param.contentName);
var windowSize = {
width: elemWindow.width(),
height: elemWindow.height()
}
// コンテンツ領域サイズ指定
if(windowSize.width < param.contentWidth){
fixSize.width = windowSize.width - 40;
} else {
fixSize.width = param.contentWidth;
}
if(windowSize.height < param.contentHeight){
fixSize.height = windowSize.height - 40;
} else {
fixSize.height = param.contentHeight;
}
// ポジション修正
fixSize.left = Math.floor((windowSize.width - fixSize.width) /2);
fixSize.top = Math.floor((windowSize.height - fixSize.height) / 2);
return fixSize;
}
// -------------------------------------------------------
};
}( jQuery ) );
// 実行
$(function(){
$(document).on("click",".entry-body-content a img",function(){
var sourceURL = $(this);
var imgOrigin = new Image();
imgOrigin.src = sourceURL.attr('src');
var sourceImageSize = {
width: imgOrigin.width,
height: imgOrigin.height,
}
$().haikuImagePopup(imgOrigin.src,{
contentWidth: sourceImageSize.width,
contentHeight: sourceImageSize.height
});
return false;
});
});
- Permalink
- このページへの個別リンクです。
- RAW
- 書かれたコードへの直接のリンクです。
- Packed
- 文字列が圧縮された書かれたコードへのリンクです。
- Userscript
- Greasemonkey 等で利用する場合の .user.js へのリンクです。
- Loader
- @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
- Metadata
- コード中にコメントで @xxx と書かれたメタデータの JSON です。
