Yumval

Fancybox – 画像ギャラリー・デモその１

参考： https://fancyapps.com/fancybox/plugins/images/

Demo-1（基本利用）

Demo-2（別のギャラリー）

上の Demo-1 か Demo-2 の画像をクリックすると、両デモの画像が一緒のポップアップ内に表示されます。下のデモのように、グループごとに違う名称をHTML属性（data-fancybox=""）に指定することでグループ分けが可能です。

1ページ内で複数のギャラリーに分けたい場合

上記サンプルの作成手順

  • ２個のスクリプトBOXを作成し、「外部JSライブラリ」に ”fancybox” を設定します。
  • それぞれのスクリプトBOX内に、ギャラリーの画像の数だけ子要素（シングルBOXなど）を作成します。
  • 各子要素内にサムネイル用の画像ブロックを作成して画像を設定します。（サムネイル用に縮小した画像を作成してアップロードする必要はありません。メディアから画像を選択した場合でも、表示サイズは自動的に最適なものが使用されます）
  • 各子要素（シングルBOXなど）の「HTML属性」欄に、data-src=”最大画像のURL” を設定します。このURLの画像が Fancybox のポップアップ内で表示されます。
  • 各子要素（シングルBOXなど）の「HTML属性」欄に、ギャラリー固有の名称 data-fancybox="ギャラリー名" を設定します。（ギャラリー名は半角）
  • それぞれのスクリプトBOXの 「Javascriptコード」欄に Fancybox を動作させるコードを書きます。data-fancybox="gallery-3a" の値は上で設定したギャラリー名となります。
  • この方法で、1ページ内に何個でもグループ分けしたギャラリーを作成できます。

スクリプトBOX（ギャラリーその１）のコード例

Fancybox.bind('[data-fancybox="gallery-3a"]', {
});

スクリプトBOX（ギャラリーその２）のコード例

Fancybox.bind('[data-fancybox="gallery-3b"]', {
});

巨大な画像やPDFを拡大表示

巨大な図表やPDFファイルなどを、サムネイルクリック時に拡大して閲覧できるようにするなどの用途にも Fancybox は利用できます。

How to become a Backend Developer?

If you are a complete beginner who is just getting started, you can start by learning a backend programming language such as Python, Ruby, Java, Go etc. Once you have got the basic to intermediate understanding of the language, learn about the package manager for that language and learn how to install and use external packages into your applications. Learn the basics of some relational database e.g. PostgreSQL and learn how to run simple CRUD operations. Optionally, you can pick up and learn a web framework for the language of your choice as well. Learn how to build a simple RESTful API and implement simple Authentication/Authorization into it. While you are learning all the items mentioned above, don’t forget to learn about Git and GitHub as well.

After following all the instructions above, you can start applying for the entry level backend developer jobs. Also, look at the backend developer roadmap above to get an idea about the landscape and see what else you are missing. A degree in computer science or related field is not always necessary but networking, building a portfolio and actively seeking internships, junior developer positions or consulting can help to start and advance a career as a backend developer.

Note: remember to create a lot of projects while you are learning to solidify your understanding of the concepts. Also, it’s important to have the attitude of continuous learning to improve your skills and be prepared for the fast-paced technology evolution in the industry.

Fancybox – 画像ギャラリー・デモその１

参考： https://fancyapps.com/fancybox/plugins/images/

Demo-1（基本利用）

Demo-2（別のギャラリー）

上の Demo-1 か Demo-2 の画像をクリックすると、両デモの画像が一緒のポップアップ内に表示されます。下のデモのように、グループごとに違う名称をHTML属性（data-fancybox=""）に指定することでグループ分けが可能です。

1ページ内で複数のギャラリーに分けたい場合

上記サンプルの作成手順

  • ２個のスクリプトBOXを作成し、「外部JSライブラリ」に ”fancybox” を設定します。
  • それぞれのスクリプトBOX内に、ギャラリーの画像の数だけ子要素（シングルBOXなど）を作成します。
  • 各子要素内にサムネイル用の画像ブロックを作成して画像を設定します。（サムネイル用に縮小した画像を作成してアップロードする必要はありません。メディアから画像を選択した場合でも、表示サイズは自動的に最適なものが使用されます）
  • 各子要素（シングルBOXなど）の「HTML属性」欄に、data-src=”最大画像のURL” を設定します。このURLの画像が Fancybox のポップアップ内で表示されます。
  • 各子要素（シングルBOXなど）の「HTML属性」欄に、ギャラリー固有の名称 data-fancybox="ギャラリー名" を設定します。（ギャラリー名は半角）
  • それぞれのスクリプトBOXの 「Javascriptコード」欄に Fancybox を動作させるコードを書きます。data-fancybox="gallery-3a" の値は上で設定したギャラリー名となります。
  • この方法で、1ページ内に何個でもグループ分けしたギャラリーを作成できます。

スクリプトBOX（ギャラリーその１）のコード例

Fancybox.bind('[data-fancybox="gallery-3a"]', {
});

スクリプトBOX（ギャラリーその２）のコード例

Fancybox.bind('[data-fancybox="gallery-3b"]', {
});

巨大な画像やPDFを拡大表示

巨大な図表やPDFファイルなどを、サムネイルクリック時に拡大して閲覧できるようにするなどの用途にも Fancybox は利用できます。

How to become a Backend Developer?

If you are a complete beginner who is just getting started, you can start by learning a backend programming language such as Python, Ruby, Java, Go etc. Once you have got the basic to intermediate understanding of the language, learn about the package manager for that language and learn how to install and use external packages into your applications. Learn the basics of some relational database e.g. PostgreSQL and learn how to run simple CRUD operations. Optionally, you can pick up and learn a web framework for the language of your choice as well. Learn how to build a simple RESTful API and implement simple Authentication/Authorization into it. While you are learning all the items mentioned above, don’t forget to learn about Git and GitHub as well.

After following all the instructions above, you can start applying for the entry level backend developer jobs. Also, look at the backend developer roadmap above to get an idea about the landscape and see what else you are missing. A degree in computer science or related field is not always necessary but networking, building a portfolio and actively seeking internships, junior developer positions or consulting can help to start and advance a career as a backend developer.

Note: remember to create a lot of projects while you are learning to solidify your understanding of the concepts. Also, it’s important to have the attitude of continuous learning to improve your skills and be prepared for the fast-paced technology evolution in the industry.