新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


次にcontrols部


<div id="controls">
 <ul id="transport">
  <li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage(true);" title="Previous">Previous</a></li>
  <li class="pausebtn"><a href="#" onclick="if (gSlideShowOn) StopSlideShow(); else StartSlideShow();" title="Play/Pause" id="playLabel">Play</a></li>
  <li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage();" title="Next">Next</a></li>
 </ul>
</div>


ここでPrevious、Play、Next
のどの機能で表示するかを選択します。
それぞれSpryライブラリ関数を使用します。



次に


<div id="thumbnails" spry:region="dsPhotos dsGalleries dsGallery">
 <div spry:repeat="dsPhotos" onclick="HandleThumbnailClick('{ds_RowID}');" onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0], '{@thumbwidth}', '{@thumbheight}');" onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
  <img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}" src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}" width="24" height="24" style="left: 0px; right: 0px;" />
 </div>
 <p class="ClearAll"></p>
</div>


imageタグ内にサムネイルの表示項目を宣言している


■ds_RowID
データセットに含まれる行の ID

■onmouseover~
マウスオーバーしたときSpryライブラリ関数のGrowThumbnail()を実行

■onmouseout~
離したときにSpryライブラリ関数のShrinkThumbnail()を実行

<select spry:repeatchildren="dsGalleries" spry:choose="choose" id="gallerySelect" onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);">
 <option spry:when="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{sitename}</option>
 <option spry:default="default">{sitename}</option>
</select>



その1

http://kanamehackday.blog17.fc2.com/blog-entry-109.html

その2

http://kanamehackday.blog17.fc2.com/blog-entry-110.html

その3

http://kanamehackday.blog17.fc2.com/blog-entry-111.html
スポンサーサイト

テーマ:Spry - ジャンル:コンピュータ

<<SyntaxHighlighterを使ってソースをHTMLに表示してみよう | ホーム | SpryのSAMPLEにある Photo Galleryを使ってみた その2 (編集中・・・)>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/111-2f325b4b
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。