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

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


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

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

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


SpryのSAMPLEにある Photo Galleryを使ってみた


Spryを利用した、画像のサムネイルだ

View Sourceをクリックするとソースが現れるのでこれを解析していこうと思う。

ちなみにSpryライブラリ関数がちょくちょく現れるが、それは今後すこしずつ調べていこうと思います。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Gallery</title>
<link href="../css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../includes/xpath.js"></script>
<script type="text/javascript" src="../../includes/SpryData.js"></script>
<script type="text/javascript" src="../../includes/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("galleries/galleries.xml", "galleries/gallery");
var dsGallery = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery");
var dsPhotos = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery/photos/photo");
</script>
<script src="gallery.js" type="text/javascript"></script>
</head>
<body id="gallery">
<noscript><h1>This page requires JavaScript. Please enable JavaScript in your browser and reload this page.</h1></noscript>
<div id="wrap">
<h1 id="albumName" spry:region="dsGallery">{sitename} <span class="return"><a href="../index.html">Back to Demos</a></span> <span class="source"><a href="source.html">View Source </a></span></h1>
<div id="previews">
<div id="galleries" spry:region="dsGalleries">
<label for="gallerySelect">View:</label>
<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>
</div>
<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>
<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>
</div>
<div id="picture">
<div id="mainImageOutline" style="width: 0px; height: 0px;"><img id="mainImage" alt="main image" /></div>
</div>
<p class="clear"></p>
</div>
</body>
</html>




使用しているJavaScriptは
xpath.js
SpryData.js
SpryEffects.js
の3つである



次に調べる点はXMLファイルを読み込みSpryデータセットを生成するためのJavaScriptコード

まず


var dsGalleries = new Spry.Data.XMLDataSet("galleries/galleries.xml", "galleries/gallery");


"galleries/galleries.xml"
がXMLファイルの場所を示し

"galleries/gallery"
はXMLデータのどの部分をデータセットとして生成するかを指定するパラメータ


さらに下記のようにパラメータを可変にすることができる


var dsGallery = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery");
var dsPhotos = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery/photos/photo");




その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 - ジャンル:コンピュータ

<<SpryのSAMPLEにある Photo Galleryを使ってみた その2 (編集中・・・) | ホーム | 「スタンバイ」と「電源を切る」は、どっちがPCにとっていいの? >>

コメント

コメントの投稿


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

トラックバック

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