読者です 読者をやめる 読者になる 読者になる

画像をクリックしたら大きくなるようにする & Javascriptの簡単な理解

今日やること

  1. 画像をクリックしたら大きくなるように
  2. Javascriptのライブラリを自分のサイトに入れてみる

準備するもの

前回使った「pinterest」というフォルダを今回も使います。 また、後半では年末に課題として提出してもらった作品に前回、今回会得した表現方法を組み込んで、さらにクオリティを上げていきます。

画像をクリックしたら大きくなるように

まずはpinterestというフォルダを見つけ、Atomで開きます。

今回やりたいことはこんな感じです。

この画像をクリックすると...

f:id:dorak:20170117092508p:plain

こうなるように!!!

f:id:dorak:20170117092618p:plain

ということで、一個一個解説していきます。

まずは、「クリックすると画像が大きくなるようにするプラグイン」を導入します。

プラグインとは...

たとえば「クリックしたら画像を大きくしたい」とか、「pinterestみたいな複雑なレイアウトを簡単に実現したい」とかを読み込むだけで実現できる便利なファイルのことです。Photoshopなどでも、グリッドを決めたりするプラグインがあるかと思いますが、まああれと同じようなものです。

今回導入するプラグインは「Lightbox」。

index.htmlを開く

プラグインは単なるCSSファイル、Javascriptファイルなので、HTMLで読み込ませれば簡単に使えます。 ということで、今回使うlightboxを読み込んでいきましょう。

必要なプラグインファイルはlightbox.csslightbox.jsです。

ということで、まずはcssファイルから読み込んでいきましょう。 cssはheadタグの中にリンクを記載します。以下の記述を、app.cssが記載されている行よりも前に入れましょう。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css">

はい、これでOKです。次はjavascriptファイルを読み込んでいきます。 javascriptはbodyタグ直前に記載されています。これは、body閉じタグの直前に入れましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js"></script>

これで準備はOKです。

headタグの中, bodyタグのとじタグ前の状態をそれぞれ見ていきます。

headタグ前(css)

  <head>
    <title>Pinterest</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
  </head>

bodyタグ前(js)

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js"></script>
    <script src="assets/js/app.js"></script>

クリックして画像を大きくするにはもうひと工夫必要

ここまでだと、単に「大きく出来るファイル」を読み込んだだけです。 最後、必要なのは「大きく出来るファイルを実行する」という命令を出す必要があります。

これをするには、以前つくった.workの調整が必要になります。 ここです。

<div class="work">
        <div class="work-image">
            <img src="assets/images/1.jpg">
        </div>
        <div class="caption">
          My work
        </div>
      </div>

lightboxを使って、クリックして画像を大きくするには、画像の周りをaタグで囲んで、リンクに画像を指定し、さらにrel要素にlightboxをしていしてあげる必要があります。 意味不明だとは思いますが、実際には以下のようなかんじです。

まず、<a href="assets/images/1.jpg" rel="lightbox"></a>を用意します。そしたら、もとからあるimgタグをこのaタグの中に入れてしまいます。具体的にはこんな感じです。

<div class="work">
        <div class="work-image">
          <a href="assets/images/1.jpg" rel="lightbox">
            <img src="assets/images/1.jpg">
          </a>
        </div>
        <div class="caption">
          My work
        </div>
      </div>

反映を確認してみましょう。 クリックしたら大きくなりましたか??

まだこれだけだと、「1つの画像しか大きくならない」という感じです。なので、一旦前回までの.workは全部消して、新しくつくった上の.workをコピペしていきましょう。 そうするとpinterestみたいな見た目でクリックしたら大きくなります。

以前つくった課題のポートフォリオページにも、pinterestレイアウトとlightboxを入れてみましょう。

ポイントは次の2点。

  1. プラグインファイルを読み込む
  2. プラグインを使う!という命令を書く

です。ということで、以前の課題ファイルを開いてみましょう。

Javascriptプラグインを使えるようにする

これは簡単です。bodyのとじタグの直前に、以下のコードを入れてください。

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

これで、いろいろなプラグインを使用するための準備が整いました。 ※これは厳密に言うとJavascriptプラグインではなく、jQueryプラグインです。jQueryとは、Javascriptをより書きやすくしたプログラミング言語です。この先Webをやるなら必ず使うことになりますが、まあ使ってさえしまえば簡単なものです。

さて、今回使った2つのプラグインを入れてみましょう。といっても、リンクを入れるだけです。 さっきのscriptタグの下に、以下のscriptタグを入れてみましょう。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js"></script>

これでpinterestライクなレイアウトと画像クリックしたら大きくなるプラグインの導入が完了しました。

次は、「これらのプラグインを有効にします!」という命令を入れます。 scriptタグの一番下に以下のタグを入れてください。ファイル名を見るとわかると思いますが、app.jsなので、みなさんが使うファイルです。

    <script src="assets/js/app.js"></script>

はい、次はapp.jsを開きます。

そしたら、以下のコードをコピペしてください。

$(function(){
  $('#masonry').masonry({
    itemSelector: '.work',
    isFitWidth: true,
    isAnimated: true
  });
});

これで使用準備は完了です。 この段階で利用できない場合は、itemSelectorに指定されているクラス名が間違っているか、app.cssにコピペしちゃってるかの二択です。上記だと、.workというクラスがついたものを並べます。なので、クラス名がworkじゃないとちゃんと並びません。そこが要注意です。

次、lightboxです。 lightboxはもう一個、cssを別途で読み込む必要があります。 なので、headタグのcssのリンクが書いてあるところに以下を読み込んで見ましょう。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css">

これで使用準備は万全です。 最後に、HTMLの状態を整えましょう。

lightboxを使う際は、まず、<a href="assets/images/1.jpg" rel="lightbox"></a>を用意します。そしたら、もとからあるimgタグをこのaタグの中に入れてしまいます。

そんな手順が必要です。なので、imgタグを上記のaタグで囲ってあげましょう。

こんな感じです。

<a href="assets/images/1.jpg" rel="lightbox">
  <img src="assets/images/1.jpg">
</a>

これでオールオッケーだと思います。