rcmdnk's blog
  1. Top
  2. › Blog
  3. › Octopress , jQuery

イマージュ

このブログでは画像のサイズを指定せずおいているので 画面が小さかったりブラウザを小さくしてるとその幅に合わせるように画像が表示されて、 細かいところを見るに画像だけ右クリックから表示させたりして拡大して。。。 みたいなことをしなくちゃいけなくて面倒です。

ので、画像を簡単に拡大できる様にしようと思いましたが、 結局はJavaScriptで元画像へのリンクを貼るようにしました。

Octopress/Markdownでの画像の貼り方

Octopressではimgというタグで画像を挿入できますが、これだとリンクは貼れません。 (/plugins/img_tag.rbで定義されてるのでいじればいけますが。)

ので、下のissueにあるようにMarkdownのリンク機能を使うなり HTMLで直接書いてしまうなりしないといけません。

Image with link and style · Issue #683 · imathis/octopress

例えば

[{% img /images/post/image.jpg %}](/images/post/image.jpg)

とか、Markdownだけで書くなら

[![alt text](/images/post/image.jpg)](/images/post/image.jpg)

な感じで最初の[]に通常の画像挿入の記述を入れてさらに全体を /images/post/image.jpgへのリンクへ。

JavaScriptを使ってリンクにする

ただ、コレを全てに書くのが面倒だし冗長なので、 JavaScript(jQuery使用)を使って画像の箇所に 元画像へのリンクを貼るようにしてみます。

Octopressでの適当な自家製スクリプトはsource/javascripts/utils.js にまとめて入れてsource/_includes/head.htmlで読み込んでいるので その中に次の物を追加します。

source/javascripts/utils.js 
1
2
3
4
5
6
7
8
9

jQuery(function($){
  $("img").each(function(){
    if( $(this).parent()[0].nodeName.toLowerCase() != "a"){
      if($(this).hasClass("imglink") || $(this).attr("src").startsWith('/images/post/')){
        $(this).wrap($('<a href="'+$(this).attr('src')+'" />'));
      }
    }
  });
});

imgタグのもので、親要素がaでなく、 imglinkというクラスを持っているか、もしくは/images/post/ に入ってるものに関してa要素でwrapしてあげます。 (通常、記事で使う画像はすべて/imgages/post/に入れてるため)

これを使いたい場合は通常/images/post/にあるものだけですが、 一応クラス指定でも出来る様に。

Kramdown等では、画像を挿入する際、 後ろに{}を使ってclass等を追加することが出来るので

![imglinktest](/images/post/20140727_imglinktest.jpg){:class="imglink"}

の様に書いておけば

<p><img src="/images/post/20140727_imglinktest.jpg" alt="imglinktest" class="imglink" /></p>

の様になります。

これを使って書いておけばJavaScriptが使える状態では 下の画像もリンクになってるはずです。 (HTMLのソースはただの<img~/>。/images/post/のものなのでクラスもimglinkなし。)

imglinktest

その他の方法

上に辿り着く前にちょっとやった方法。

source/javascripts/utils.js 
1
2
3
4
5

jQuery(function($){
  $(".imglink").click(function(){
    window.location=$(this).attr('src');
  });
});

こんな感じでクリック時にsrcの場所を開く様にする方法。

さらに、この場合はカーソルを画像上に持っていてもカーソルが変わらないので リンクと分かるように変更するためCSSで

sass/plugins/_plugins.scss 
1
2
3
4

// images
.imglink{
  cursor: pointer;
}

とリンク上のカーソルに変わるように指定しておきます。

CSSの定義を使うために/images/post/の方でも imglinkを加えてあげないといけないので、上の関数の前に

source/javascripts/utils.js 
1
2
3

jQuery(function($){
  $("img[src ^= '/images/post/']").addClass("imglink");
});

と書いてあげれば、先に書いたwrapを使った方法と大体おなじになります。 (ただ、この場合、このままだとマウスオーバー時にステータスバーにはURLが表示されません。)

まあ、wrapを使った方がシンプルかな、ということでそちらを使うようにしました。

他のプラグイン

最初、適当なLightbox系のプラグインを使って表示しようと思ってたのですが、 きちんと拡大したいと思った場合にシンプルに画像だけ表示した方が良かったので そうしました。

一応ちょっと見てみたものリスト。

Sponsored Links
Sponsored Links

« FirefoxでGitHub等のページでブックマークレットを有効にする Macのプレビューでサインを追加する »

}