財団の写真2024 年の最新の入門チュートリアル。このコースでは サムネイル,フィレ写真,コンサイスポップ,画像のテキスト記述,サムネイルのみを表示, について学習できます。
財団の写真
財団は、応答画像を提供し、あなたがポップアップを飲むサムネイル画像を作成することができます。
»をお試しください
サムネイル
<img>
要素の外側の追加<a>
アンカーリンクとして要素画像を。
で<a>
タグが追加.th
サムネイルとしてクラス絵。 水色枠の上部にマウスを移動表示されます。
例
<AのHREF = "paris.jpg"クラス = "th">
<IMG SRC = "あるparis.jpg" ALT = "パリ">
</ A>
»をお試しください | 対応する画像 デフォルトのスタイルに応じて画像財団。 ここでは、例の画像ズーム効果でページサイズを表示するには、ブラウザをリセットすることができます。 |
---|
フィレ写真
私たちはすることができます.th
クラスを追加します.radius
フィレットクラスサムネールを設定するには:
例
<AのHREF = "paris.jpg"クラス = "th radius">
<IMG SRC = "あるparis.jpg" ALT = "パリ">
</ A>
»をお試しください
コンサイスポップ
財団は、簡単に画像のポップを実現することができます。
シェル・ウィンドウを作成するには<ul>
要素を追加する.clearing-thumbs
クラスとdata-clearing
プロパティを。 では<ul>
写真を追加のリストインチ
注:画像のポップアップにはJavaScriptが必要です。 だから、財団JSを使用する前に初期化する必要があります。
例
<ULクラス= "クリア-親指 「データクリア>
<李> <aのHREF = "rock600x400.jpg"クラス= "th"> <IMG SRC =" rock200x100.jpg "> </ A> </ LI>
<李> <aのHREF = "skies600x400.jpg"クラス= "th"> <IMG SRC =" skies200x100.jpg "> </ A> </ LI>
<李> <aのHREF = "lights600x400.jpg"クラス= "th"> <IMG SRC =" lights200x100.jpg "> </ A> </ LI>
</ UL>
<! -初期財団JS - >
<スクリプト>
$(ドキュメント).ready(関数(){
$(ドキュメント).foundation();
})
</スクリプト>
»をお試しください
画像のテキスト記述
あなたが追加することができdata-caption
画像の説明を設定するには、各画像に属性を:
例
<ULクラス= "クリア-親指 「データクリア>
<李> <aのHREF = "rock600x400.jpg"クラス= "th">の<imgデータ・キャプション="講壇ロック"SRC =" rock200x100.jpg "> </ A> </ LI>
<李> <aのHREF = "skies600x400.jpg"クラス= "th">の<imgデータ・キャプション="サンライズ空"SRC =" skies200x100.jpg "> </ A> </ LI>
<李> <aのHREF = "lights600x400.jpg"クラス= "th">の<imgデータ・キャプション="ノーザンライツ"SRC =" lights200x100.jpg "> </ A> </ LI>
</ UL>
»をお試しください | ヒント:あなたは、このようなデータ・キャプションとして、HTML要素にデータ・キャプション属性を追加することができます= "<H2>講壇ロック</ H2> <P>ノルウェーに位置します。</ p>" |
---|
サムネイルのみを表示
あなたが達成する必要がある場合、あなたがすることができた場合にのみ、サムネイルが表示され<ul>
使用.clearing-feature
クラスをと<li>
使用は.clearing-featured-img
クラス。
例
<ULクラス= "クリア-親指クリア-機能「データクリア>
<李> <aのHREF = "rock600x400.jpg"クラス= "th">の<imgデータ・キャプション="講壇ロック"SRC =" rock200x100.jpg "> </ A> </ LI>
<李> <aのHREF = "skies600x400.jpg"クラス= "th">の<imgデータ・キャプション="サンライズ空"SRC =" skies200x100.jpg "> </ A> </ LI>
<李クラス= "クリア機能の -img"> <aのHREF = "lights600x400.jpg"クラス= "th">の<imgデータ・キャプション= "ノーザンライツ" SRC = "lights200x100.jpg"> </ A> < /李>
</ UL>
»をお試しください