スライドショー「jFancyTile」(jQuery)

jFancyTile

これもjQeryを使った楽しいスライドショーです♪

画像中の「<」「>」をクリックして下さい。
(scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてからクリックして下さい。)










CSSとスクリプトをヘッド部分に記入。

<head>
<link rel="stylesheet" type="text/css" href="css/jfancytile.css"/>
<script type="text/javascript" src="js/jquery.jfancytile.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

使い方

<div id="selector">
<ul>
<li><img src="images/img01.jpg" alt="Title 01" /></li>
<li><img src="images/img02.jpg" alt="Title 02" /></li>
<!-- More images -->
</ul>
</div>

2パターンあり、別パターンはこちら。









jQueryってすごいのね~。
楽しいぃ~~(#^.^#)

それにしても……
なんだかこのブログどんどん重くなる………。
読み込みに時間がかかりすぎてるのね…(^^ゞ




【追 記】

私はいつもFirefoxで記事を編集しています。
この記事を書き終えたあと、Firefoxで確認するときちんと表示されていました。
ところがIEで見るとうまく表示されず、「識別子、文字列または数がありません。」とエラーメッセージが出ます。

どうやらダウンロードした「jquery.jfancytile.js」に不備がある様子。

「jquery.jfancytile.js」を開き、
「// Create forwards navigation」の
「"margin-left" : container.width - 50,」の「」と
「// Create image container」の「"position" : "absolute",」の「」を削除すると
このエラーメッセージは出なくなりました。

次に出たのは「オブジェクトでサポートされていないプロパティまたはメソッドです。」というメッセージ。
私はjquery.jsをGoogle AJAX APIから読み込ませ、最新バージョンが使えるように設定していましたが、どうやら最新バージョンが引っかかっている様子。
jquery.jsを旧バージョンに差し替えると、このエラーメッセージは出なくなりました。

このスクリプトをダウンロードしてお使いになる方、このようなエラーメッセージが出た場合は、参考になさってください。

あと……1つ目の表示のフレーム部分、右側の方が幅が広くなってしまうことと、2つ目の画像表示の下部にスペースができてしまうのですが、これを解決するにはどうすればよいのかわかりませんでした。
(なにしろスクリプトなんてチンプンカンプンなもので……(^^ゞ 見てもわからないっ!)
ので、この件は放置。


関連記事

コメントの投稿

オォー! 感動!!!

またまた素敵なスライドですね。

コスモス画像に (* ̄・ ̄*)ウットリ


簡単そうに見えるけど、これは難しそう σ( ̄、 ̄=)ンート・・・

れんさん おはようございます。

素敵です。
楽しいです。

わたしもやってみたいけど難しそうだから無理かも・・・

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ふーこ様

ふーこさん、再度のご訪問、ありがとうございますm(__)m

もし、これお使いになるようでしたら、大元からダウンロードするより、私がアップロードしているところからダウンロードしていただく方が面倒くさくないかもです。
大元のはIEでエラー出ますから…。
スクリプトに詳しくない私、原因を追求するのに何時間かかっていたことやら…。

このコスモスの写真は数年前のものなんです。
最近撮影に行ってなかったもので…。
でも!今日、コスモスの写真を撮って来ました♪
後ほど記事にするつもりです!

紅葉様

紅葉さん、こんばんは~。
毎度のことながら、ご無沙汰してしまい申し訳ありませんm(__)m

ね? おもしろいでしょ~?
ちょっと設定に四苦八苦することもありますけど、上手く表示できるようになると喜びひとしおです♪

いつもお越しくださってありがとうございますm(__)m

鍵コメ 2011/10/21(Fri) 09:49様

こんばんは。
おかげんはいかがですか?

手術って怖いですよね…。
場所が場所だけに、想像するだけでもひえぇぇ~!ってなりそうです(T_T)

今はお疲れにならないように十分休息をとって、しっかりと回復してくださいね!

コメントありがとうございましたm(__)m
とても嬉しかったです♪
**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ