パソコンヲタクのにょびたが社会保険労務士の国家資格を取得をめざすメディアです

Fotorama メモ

By

html メモ

サムネイル付きjQueryスライダーのFotoramaのメモです。

ダウンロード

こちらからデータをダウンロード
http://fotorama.io/

 

使い方

1.<head>ないで以下を宣言する

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/fotorama.js"&gt;&lt;/script>
<link rel="stylesheet" href="./css/fotorama.css" >

2. スライドする画像を設定


<div class=“fotorama”>
<img src=“http://s.fotorama.io/1.jpg”>
<img src=“http://s.fotorama.io/2.jpg”>
</div>

3. オプション設定をする

サムネイルを追加する


<div class=“fotorama” data-nav=“thumbs”>
<a href=“1.jpg”&gt;&lt;img src=“1_thumb.jpg”>
<a href=“2.jpg”&gt;&lt;img src=“2_thumb.jpg”>
</div>

レスポンシブ化する

<div class="line number3 index2 alt2"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"fotorama"</span> <span class="attribute">data-width</span>=<span class="value">"100%"</span> <span class="attribute">data-ratio</span>=<span class="value">"800/600"</span>></span>
<span class="comment"><!-- ↑ The same as data-ratio="4/3" or data-ratio="1.3333333333". --></span>
<span class="tag"><<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"1.jpg"</span>>
</span> <span class="tag"><<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"2.jpg"</span>></span>
<span class="tag"></<span class="title">div</span>></span></div>
<div class="line number3 index2 alt2">

フルウィンドウ

</div>
<div class="line number3 index2 alt2"><span class="tag"><<span class="title">body</span> <span class="attribute">style</span>=<span class="value">"margin: 0;"</span>></span></div>
<div class="line number3 index2 alt2"></div>
<div class="line number3 index2 alt2"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"fotorama"</span> <span class="attribute">data-width</span>=<span class="value">"100%"</span> <span class="attribute">data-height</span>=<span class="value">"100%"</span>></span></div>
<div class="line number3 index2 alt2"><span class="tag"><<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"1.jpg"</span>></span></div>
<div class="line number3 index2 alt2"><span class="tag"><<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"2.jpg"</span>></span></div>
<div class="line number3 index2 alt2"><span class="tag"></<span class="title">div</span>></span></div>
<div class="line number3 index2 alt2"><span class="tag"></<span class="title">body</span>></span></div>
<div class="line number3 index2 alt2">


カテゴリー: webデザイン
タグ: