top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_689

Supersized:簡単にフルスクリーンのスライドショーができる、jQueryプラグイン ・・・ 【jQueryプラグイン】

 2009-02-08
 最近、jQueryに関わった情報が多い。
 今回紹介するこのプラグインは、簡単な設定で、
 ・フルスクリーンで稼動するスライドショーが 簡単に作成
  だ。

Supersized - Full Screen Background/Slideshow jQuery Plugin
Supersized - Full Screen Background/Slideshow jQuery Plugin February 4th, 2009
 under Resources by Sam Dunn


 丁寧に利用方法が解説されている。
 やってみよう・・・

  ▼ 追記に

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more**************************************************
Supersized:JavaScript jQuery 利用テスト
**************************************************

 ■jsファイルをダウンロード
  ・http://buildinternet.com/live/supersized/supersized.zip

 ■HTMLファイルに設置
  ・jQuery を組み込んだ後に設置する。
<script type="text/javascript" src="*****/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="*****/supersized.1.0.js"></script>


 ■稼動設定するJavaScript を記述
  ・jQuery を組み込んだ後に設置する。
<script language='javascript'>
<!-- Hide from other Browsers
$(function(){
$.fn.supersized.options = {
startwidth: 1024,
startheight: 768,
minsize: .50,
slideshow: 1,
slideinterval: 5000
};
$('#supersize').supersized();
});
//-->
</script>

 ※ちなみにこれは、「supersized.js」にサンプルで用意されている
  ファイルの中身、そのまま。ここで
  ・最初のサイズやチェンジスピードを変えられる

 ■稼動設定するCSS を記述
  ・jQuery を組み込んだ後に設置する。
<style type="text/css">
#supersize img, #supersize a{
height:100%;
width:100%;
display:none;
}
#supersize .activeslide, #supersize .activeslide img{
display:inline;
}
</style>

 ※これもサンプルまんま

 で、
 ■ファイル設定
  ・ここは、サンプルでは
<div id="supersize">
<a class="activeslide" href="http://interfacelift.com/wallpaper_beta/details/1789/bright_ideas.html"><img src="images/bulbs.jpg"/></a>
<a href="http://interfacelift.com/wallpaper_beta/details/1787/eye_on_the_world.html"><img src="images/lense.jpg"/></a>
</div>

 ・・・のように、
 静的設定だったが、ここは少し面倒なので一工夫

 静的HTMLファイルの中で、PHPスクリプトを使えるように
 設定しているので、
<div id="supersize">
<?
$target_dir="*****";
$dir = "../".$target_dir;
if( $handle = opendir( $dir ) ) // ディレクトリハンドルを獲得
{
$tree = array();

while( false !== $file = readdir( $handle ) ) // ファイル名獲得
{
if( $file != "." && $file != ".." ){
if( is_dir( $dir."/".$file ) ){
}else{
$tree[ $file ] = $dir."/".$file;
if(file_exists($tree[ $file ])){
echo "<a class=\"activeslide\" ";
echo "href=\"http://www.metaboy.net/".$target_dir.$file."\" target=\"_blank\" border=0>";
echo "<img src=\"http://www.metaboy.net/".$target_dir.$file."\"/>";
echo "</a>\n";
}
}
}
}
closedir( $handle ); // ディレクトリハンドルを閉じる
}
?>
</div>

 ・・・として、
 特定のフォルダ内の画像の自動表示としてみる。
 ※本当はセキュリティ的にも、
  正しく画像であるか などの対応が必要。

 ■稼動サンプル
  は こちらだ!
  ※息子と発見・発掘した100万年前の貝の化石シリーズ

 プレゼンなんかで利用できそうだな。
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/689-affdf362
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

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