カテゴリー別アーカイブ: Photo

Lightbox

Lightbox を使った画像表示

Sleeping egg では主に写真を掲載していくため、先に作成した fullPage.js ベースのティザーサイトで大きいイメージを表示するのに最適な Lightbox をとりあえず追加してみました。
※ ティザーサイトの作り方はこちら »

1. 公式サイトから Lightbox をダウンロード

Lightbox のダウンロード

Lightbox のダウンロード

トップページを下にスクロールすると、Lightbox v2.6 のリンクがあるので、そこからダウンロードします。

2. lightbox2.6.zip を解凍

lightbox2.6.zip の解凍ファイル一覧

lightbox2.6.zip の解凍ファイル一覧

解凍されたファイルには css, img, js の各ファイルと index.html が入っています。

3. 解凍した lightbox のフォルダを fullPage.js で作成したサイトに移動

fullPage サイトに lightbox フォルダを移動

fullPage サイトに lightbox フォルダを移動

Lightbox のファイルをまとめるために lightbox フォルダをそのまま移動していますが、外部リンク先を変更しない場合は img, js, css の各フォルダを example2.html と同じ階層に保存してください。

4. htmlファイルの<head>に JavaScript を追加

&lt;script type=&quot;text/javascript&quot; src=&quot;lightbox/js/lightbox-2.6.min.js&quot;&gt;&lt;/script&gt;

既にHTML内に jquery が入っているため、jquery-1.10.2.min.js は外しておきます。また、lightbox フォルダを使わない場合には lightbox/ の記述を消してください。

5. htmlファイルの <head> に CSS を追加

		&lt;link href=&quot;lightbox/css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;

lightbox フォルダを使わない場合には lightbox/ の記述を消してください。

6. 画像リンクに Lightbox を設定

&lt;a class=&quot;example-image-link&quot; title=&quot;キャプション-1.&quot; href=&quot;lightbox/img/demopage/画像-1.jpg&quot; data-lightbox=&quot;要素名/グループ名&quot;&gt;
&lt;img class=&quot;example-image&quot; alt=&quot;thumb-1&quot; src=&quot;lightbox/img/demopage/サムネール画像-.jpg&quot; width=&quot;150&quot; height=&quot;150&quot; /&gt;
&lt;/a&gt;
&lt;a class=&quot;example-image-link&quot; title=&quot;キャプション-2.&quot; href=&quot;lightbox/img/demopage/画像-2.jpg&quot; data-lightbox=&quot;要素名/グループ名&quot;&gt;
&lt;img class=&quot;example-image&quot; alt=&quot;thumb-1&quot; src=&quot;lightbox/img/demopage/サムネール画像-2.jpg&quot; width=&quot;150&quot; height=&quot;150&quot; /&gt;
&lt;/a&gt;

Lightboxを有効にするには、画像の a 要素に data-lightbox 属性を追加します。data-lightbox の値が単独の時は1枚画像に対しての効果、複数の画像に共通した data-lightbox 値を設定すると、共通のグループ画像として認識されます。また、キャプションを表示する場合は title 属性を設定します。

7. Lightbox の動作確認

通常の画像表示

通常の画像表示

↓画像をクリック↓

Lightbox 使用時の画像表示

Lightbox 使用時の画像表示

画像がモーダル・ダイアログで拡大表示されたら、Lightbox は正常に動作しています。

今回はサンプルをほぼそのまま使用していますが、ボタンやモーダル・ダイアログ時の背景色をはじめ、アレンジした使い方もやってみたいと思います。

このエントリーをはてなブックマークに追加
LINEで送る

フォトストック

写真やイラストを登録・販売できるサービス

仕事柄、写真やイラストの素材サイトをよく利用していますが、最近では自分で撮った写真を登録・販売できる素材サイトも少なくありません。…というわけで、今回はプロ・アマ問わず、写真・イラストを登録して販売・公開できるサービスをまとめてみました。
※ 写真・イラスト以外の詳細については省略していますがご了承ください。

Photolibrary

Photolibrary
取扱サービス ……… 写真,イラスト ※プロフィール必須
販売価格 ……………… 販売価格は自分で設定可
画像審査期間 ………  7~20日
ロイヤリティ ……… 60%(専売でない場合は50%)
サイズ・形式 ……… JPEG:長辺1500px〜
※ファイル名は英数半角のみ

TAGSTOCK

取扱サービス ……… 写真,イラスト ※プロフィール必須
取扱サービス ……… 写真,イラスト ※登録審査有
販売価格……………… XS(長辺640px)500円〜
画像審査期間………  1~2週間
ロイヤリティ ……… 最大70% (ダウンロード数により変動)
サイズ・形式 ………  JPEG:長辺2000px 〜

PIXTA

取扱サービス ……… 写真,イラスト ※プロフィール必須
取扱サービス ……… 写真,イラスト,動画 ※入門テスト有
販売価格……………… S(640×480px程度)525円〜
画像審査期間………  7営業日(画像・イラストの場合)
ロイヤリティ ……… 人物専属 54~60%, 専属 40~50% 一般 34~44%(販売数に応じてコミッション率が変動)
サイズ・形式 ……… JPEG:2400×1500px 〜, EPS:30MB以内, PNG:透過部分必須

iStockphoto

取扱サービス ……… 写真,イラスト ※プロフィール必須
取扱サービス ……… 写真,イラスト,オーディオ,ビデオ ※サンプル提出有
販売価格……………… 販売価格は画像ごとに設定
画像審査期間………  -
ロイヤリティ ……… 非専属 15~20%, 専属 最大45%
サイズ・形式 ………  JPEG:1600×1200px 〜
EPS: AI10互換のEPS + JPGプレビュー 1900×2800px

Fotolia

取扱サービス ……… 写真,イラスト ※プロフィール必須
取扱サービス ……… 写真,イラスト,動画
販売価格……………… S(640×480px程度)1クレジット〜
画像審査期間………  -
ロイヤリティ ……… 完全独占販売 35~63%
一部/非独占販売 20~46%
サイズ・形式 ……… JPEG:2400×1600px 〜, 30MB以下、AIまたはEPS 形式: JPEGプレビューは自動生成

Shutterstock

取扱サービス ……… 写真,イラスト ※プロフィール必須
取扱サービス ………… 写真,イラスト,動画 ※管理画面は英語
ロイヤリティ ………… ダウンロード1点に対し25セント
※報酬が500ドルを超えると1点あたりの支払い増
サイズ・形式 ………… JPEG:4MB以上
EPS:15MB,  JPEG:4MB以上

同じ画像素材を取り扱うサービスでも、ロイヤリティはもちろん審査の規定までそれぞれに異なりますので、各サービスの人気画像やダウンロードランキングの傾向なども含め、充分に比較検討してから登録・運用したいサービスです。

このエントリーをはてなブックマークに追加
LINEで送る