IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / Javascript, jQuery のイベントを削除する

Javascript, jQuery のイベントを削除する

2020/10/28 javascript, はてなブログ

はてなブログでは記事に画像を挿入しますと自動的にリンクが貼られ、クリックしますとポップアップで画像が表示されます。ただ、ポップアップで表示される画像は元画像と同じものですので、記事そのものを1カラムで表示するスマートフォンでは意味がないですよね。

で、ポップアップでは高解像度のものを表示することはできないかということでいろいろやってみました。

  • CSS でリンクを無効にする方法
  • はてなブログの画像ポップアップ
  • Javascript, jQuery のイベントを削除する
  • はてなブログの画像クリックでオリジナル画像を表示する

CSS でリンクを無効にする方法

現在は意味がないということで画像のリンクは CSS で無効にしています。

img.hatena-fotolife {
pointer-events: none;
}

編集サイドバーの「写真を投稿」で画像を挿入したり、はてな記法で画像を挿入しますと img タグに hatena-fotolife の class 名が付きます。ですので上記のように pointer-events プロパティに none を指定すればクリックできなくなります。

はてなブログの画像ポップアップ

画像のポップアップには jQuery のプラグイン colorbox が使われています。

はてなブログのソースを表示し、body の閉じタグの直前にある

https://cdn.blog.st-hatena.com/js/hatenablog.js

このライブラリの中にあります。hatena-fotolife で検索してください。

f(document).on("click","img.hatena-fotolife, img.magnifiable, img.http-image",(function(e){
var t=e.currentTarget,
n=f(t);
if(!n.data("colorbox")){
var r=n.closest("a").get(0);
if(!r||r.href===t.src)return
n.colorbox({maxWidth:"95%",maxHeight:"95%",transition:"none",photo:!0,href:n.attr("src"),title:" ",open:!0,opacity:.9})

この部分です。

Javascript, jQuery のイベントを削除する

jQuery の on メソッドで登録されたイベントは off メソッドで削除できます。ただし、セレクタもすべて指定しないと削除されないようです。

$(document).off("click","img.hatena-fotolife, img.magnifiable, img.http-image");

これは削除されますが、

$(document).off("click","img.hatena-fotolife");

これでは削除されません。

その他、onclick, addEventListener は次のように削除できます。

document.onclick = hogehoge();
↓
document.onclick = "";
element.addEventListener("click", hogehoge);
↓
element.removeEventListener("click", hogehoge);

はてなブログの画像クリックでオリジナル画像を表示する

window.addEventListener('DOMContentLoaded', () => {
$(document).off("click","img.hatena-fotolife, img.magnifiable, img.http-image");
$(document).on("click","img.hatena-fotolife", (e) => {
let src = $(e.currentTarget).attr('src');
src = src.replace('.jpg', '_original.jpg');
$(this).colorbox({maxWidth:"95%",maxHeight:"95%",transition:"none",photo:!0,href:src,title:" ",open:!0,opacity:.9});
});
});

とりあえずは上のコードでオリジナル画像があれば表示されます。

後は、オリジナル画像がなければ元画像を表示するようにし、また、このままですと閉じる場合は「X」しか機能しなくなりますのでどこをクリックしても閉じるようにしなくてはいけません。

次回です。

jQuery最高の教科書

jQuery最高の教科書

  • 作者:株式会社シフトブレイン
  • 発売日: 2014/07/12
  • メディア: Kindle版

ウェブからスマホアプリを起動 URLスキーム、ユニバーサルリンク
はてなブログの画像ポップアップをオリジナル画像に変える
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

2022/06/06

WordPress Popular Posts 表示されないを解決する

2022/06/03

WordPress Popular Posts 表示されない(解決だが…)

2022/05/29

WordPress:テーマをゼロから作ってみる(2)

最新記事を一覧で見る

よく読まれている記事

カテゴリー

  • はてなブログ211
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress34
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php18
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • cms-style10
  • Chrome10
  • iPhone9
  • Git入門6
  • genesis6
  • Android4
  • Python4
  • ConoHa WING4
  • 静的サイトジェネレーター3
  • Firefox3
  • Blankslate3
  • Docker3
  • SSD3
  • Facebook3
  • スマートフォン3
  • GitHub2
  • Mactype2
  • 映画1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com