【jQuery】レスポンシブ対応で画像・動画が簡単にポップアップ表示ができるLity.jsの使い方
- 2017.09.01
- JavaScript
- プラグイン, プログラミング, フロントエンドエンジニア
画像や動画のポップアップ表示が簡単に実装できるプラグインLity.jsの使い方をご紹介します。
ポップアップ
ポップアップってボタンをクリックするとフワッと表示されるこんなやつです。
写真や動画を拡大して表示したいときなどによく使われる実装です。
レスポンシブ対応する時に、いい感じに表示できるプラグインLity.jsを導入する方法です。
導入方法
まずは公式配布サイトから必要なファイルをダウンロード。
zipファイルがをダウンロードしてきて、解凍します。
解凍したファイルの中で、使用するファイルは「lity.min.js」と「lity.min.css」です。
Lity.jsはjQueryに依存しますので、しっかりjQueryも読み込ませます。
<link rel="stylesheet" href="lity.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="lity.min.js"></script>
あとはポップアップ表示するhref属性にカスタムデータ属性（data-lity=”data-lity”）を追記すればOKです。
//画像 <a href="img01.jpg" data-lity="data-lity">image</a> //表示したいボックス要素を「class="lity-hide"」で非表示 <a href="#inline" data-lity="data-lity">inline</a> <div id="inline" class="lity-hide"> <img src="img02.jpg" alt=""> </div> //Google Map <a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity="data-lity">Google Map</a> //youtube <a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity="data-lity">youtube</a>
未経験からでもエンジニアにはなれる！
中堅の年代になり、最近よくどうやってエンジニアになったんですか？と聞かれる機会が多くなりました。私は転職組で未経験からエンジニアになりました。 そこら辺のストーリーは「未経験からWebデザイナーになった経緯を紹介」で書いているのでそちらをご覧ください。
当時はWebの技術を教えてくれるスクールがあまりなく、私はWebの勉強は独学で勉強し転職したのですが、今はスクールの数も多くなっていてオンラインで受講できるところも増えてきました。
もし私が未経験でエンジニアを目指すなら活用したいスクールを紹介してますので興味ある方はぜひ参考にしてくだいさい！
tech boostオンライン
tech boostはエンジニアに特化したキャリアサービスを展開しているBranding Engineerが運営するオンラインプログラミングスクールです。
エンジニアに特化したキャリアサービスを展開しているからこそのカリキュラムを実現しています。 また、転職サポート付きでスクール卒業後もキャリアも安心です。
オンラインスクールだからいつでもどこでも受講可能！これからプログラミングを学びたい方、エンジニアにキャリアチェンジを考えている方に、 特にオススメのサービスです。
CodeCamp（コードキャンプ）
オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスです。高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。
講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。
多くの受講生が、現役エンジニアの手厚いマンツーマン指導によって確実にプログラミングを習得し、キャリアアップ・転職・独立起業などの目標を実現しています。
DMM WEBCAMP
転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです！
プログラミング未経験者でも安心のサポート体制をご用意しており、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職を保証していただいていることで安心』というレビーが多くしっかとしたサポートを提供しています。
実務に近い実践的なカリキュラムで、DMM WEBCAMPはチーム開発など、実務により近い実践的カリキュラムを導入しているため、転職先・就職後にいち早く活躍できるスキル・経験を積むことができます。
Udemy
私の周りの現役のエンジニアの人も活用しています。基礎をしっかり固めたい方や、実践向けの配信など幅広く解説している動画が豊富にアップされているので活用するのはオススメです。
習得したいスキル（プログラム言語）が明確で、年収アップのために学習している方やAI・機械学習を学んでスキルアップを目指しているエンジニアの方に支持されているます。
1講座あたり数千～数万円程度で実践的なスキルアップを経済的でオススメです。
