magnificpopup
画像をクリックすると、画像が浮き出るようにするには、magnificpopupと言われるコードを読み込みます。
この場合は、jQueryのように外部サイトから、直接読み込むのでなく、同じ作業フォルダ内に配置したmagnificpopupを記述したデータから読み込みます。
同じように、animated.cssも作業フォルダ内に設置し、HTMLで読み込むことで作動します。
NOTEでは、magnificpopup同様に、画像をクリックするとデフォルトで拡大する機能が付いています。
以下の有料NOTEでは、画像化した図面が拡大表示されます。
アニメーション
画面をスクロールすると、下から浮き上がるように要素が現れることをアニメーションをつけるといいます。
通常パソコンを使って文字を読むと、基本的には本と同じようにじっくり目で追いながら読んでいくこととなりますが、動きがつくことで見る側の印象が変わります。
下から画面に浮き上がるように表示したい場合は、fadInUpを適用します。
fadeInUpは、画面を下方向にスクロールされた時に適用されるため、animatedクラスをつけた要素の上端が画面の下に来た時に適用されるという理解になります。
一方で上方向にスクロールした場合に、動きをつけたい場合は、animatedクラスをつけた要素の下端が画面上に来た時にfadeOutUpが適用されるようにします。
fadeOutUpを適用すると、画面の外に消えていくような動きをします。
JSON
Webサービスで提供されている写真にアクセスすることが可能なサービスです。
$.param( )にパラメータに与えてアクセスする写真等の情報を作成します。
与えられたパラメーターは、$.param( )によって、url用の文字列に変換されます。
作成した写真情報のurl用文字列をparameters変数に代入し、${parameters}として一括りにし、アクセスの大元となるurlと繋げたものをurl変数に代入します。
url変数の値をコンソールに表示させ、リンク先をクリックするとJSONオブジェクトを取得できます。
JSONオブジェクトの取得
JSONオブジェクトは、$.getJSONメソッドからでも取得することができます。
$.getJSON(URL,(data)=>{
console.lot(data)
});
によって、コンソールにJSONオブジェクトが取得されるのを確認することができます。
Gallery画像の作成
Flickrを用いて画像ギャラリーを作るためには、表示させたい条件を指定するため、リクエストパラメーターを記述します。
パラメーターには、まず何の写真を表示するのかを示すための記述が必要です。
例えば、建物の写真を表示させたいのであれば、building、動物を表示させたいのであれば、animalのような記述が必要です。
何を記述する必要があるのか、理解不足の段階では落としがちな内容であり、プレビュー結果がうまくいかない原因でもあります。
また、その他のパラメーターとして、画像を４枚表示させたいのであれば、license: '4',といったパラメーターの記述をします。
パラメーターを与えた後は、画像をブラウザに表示させるための記述を行うことで、Gallery画像を作成することができます。
【プログラミング学習方法の無料相談から開始】
