プロが教えるわが家の防犯対策術!

画像スライドさせるためのCSS、jqueryjsについての質問です。

私はCSS入門したてのド素人ですが、GalleryViewをどうしてもサイトに掲載したく頑張ってみたのですが、どうしてもうまくいきません。
GalleryViewのキーワードで検索してあらゆるサイトを見て回ったのですが、バージョンが古かったり、いまいち分かりずらく、設置稼働できませんでした。

本当に初歩的で申し訳ないのですが、ド素人でも、その通りやれば表示ができる!!
というような分かりやすく日本語で説明されているサイトを探しております。

GalleryView3.0 http://spaceforaname.com/galleryview こちらのサイトで現時点(2011.04.04)GalleryView 3 Beta 3 をダウンロードできます。

同胞されている内容はcssとjsのフォルダです。

このフォルダをindexファイルと同じ階層にそのままアップして、README.txtに書かれているソースを記述してもうまくいきませんでした。その他、以下の過去質問の返答にあるようなリンク元も参考にイジってみたのですが、やはり作動しません。。。

http://oshiete.goo.ne.jp/qa/6229237.html

本当に困り果ててしまいました(´-∀-`;)

どなたか、こんな馬鹿野郎ド素人でも分かりやすくご教授いただくか、同様のサイトがあれば参考サイトをご教授いただけましたら幸いです。

最悪、素人では難しいということでしたら、初心者向けのプラグインツールもしくはサンプルCSSなどがあれば、代替でも問題なしです。

結果として複数の画像が1画像づつ自動スクロールしてメインに表示され、下にサムネイルがあれば問題なしです。

本当に初歩的な質問になってしまいますが、宜しくお願いいいたします。

A 回答 (1件)

 どこまで理解なされてるのか解りませんが、これが設置出来ないなら他のライブラリーをつかうにしろ、やはり躓く事になりかねません。



README.txtは読まれているようですが、そこのINSTRUCTIONS FOR USE
にある(1),(2),(3)はお分かりになりましたか、(1),(2),(3)の擬態的な記述方法は、このREADME.txtでは、自明の事なので、はしょられてます。

(1)では、galleryview-x.x folderを自分のサイトにアップしろと言ってます。
名前を変えてもかまわないとも言ってます

(2)では、scriptをインクルードしろと言ってます。
つまり、<head></head>の中に
一例ですが、

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" charset="utf-8" src ="./galleryview-3.0b3/js/jquery.timers-1.2.js"></script>
<script type="text/javascript" charset="utf-8" src ="./galleryview-3.0b3/js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" charset="utf-8" src ="./galleryview-3.0b3/js/jquery.galleryview-3.0.min.js"></script>

と書きます。

(3)では、CSSをインクルードしろと言ってます。
つまり、<head></head>の中に
一例ですが、
<link rel="stylesheet" type="text/css" href="./galleryview-3.0b3/css/jquery.galleryview-3.0.css">
と書きます。

その上で初期化のscriptを

<script type="text/javascript">
$(function(){
$('#gallery').galleryView()
});
</script>
 
のように記述します。

そして<body>部に<ul>でリストをマークアップするわけです。
<ul id="gallery">
<li><img src="../gv/path/to/image1.jpg" alt="image1" /></li>
<li><img src="../gv/path/to/image2.jpg" alt="image2" /></li>
<li><img src="../gv/path/to/image3.jpg" alt="image3" /></li>
<li><img src="../gv/path/to/image4.jpg" alt="image4" /></li>
</ul>

この説明で解らなければ、他のライブラリーを使うにしろ、苦労する事になるでしょう
    • good
    • 0
この回答へのお礼

ご丁寧に有難うございました。
とても参考になり、お陰様で解決することができました。

お礼日時:2011/07/20 14:01

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!