※ ChatGPTを利用し、要約された質問です(原文:jQueryでappleっぽい画像ギャラリー設置したいです)
jQueryでappleっぽい画像ギャラリー設置したいです
このQ&Aのポイント
最近勉強し始めた初心者が、http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを自分のホームページに組み込みたいと思っています。しかし、設置方法やjquery.jsのダウンロード場所などが分からず、質問しています。
画像ギャラリーを自分のホームページに組み込むためには、まずjquery.jsをダウンロードする必要がありますが、どこに配置すれば良いか分からないという質問です。
また、HTMLコードやCSSの組み込み、そしてjQueryの使い方についても分からない部分があり、質問させていただいています。
jQueryでappleっぽい画像ギャラリー設置したいです
http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを私のホームページにも組み込みたいと思っているのですが、CSS・JAVAを最近本を買ったりして勉強しはじめた初心者なだけに、紹介されている設置方法だけでは理解できなく質問させていただきました。
(1)とりあえずjQueryからjquery.jsをダウンロードはしましたが、こjquery.jsはどこにどうすればいいのでしょうか?
(2)
<div id="main">
<div id="gallery">
<div id="slides">
<div class="slide"><img src="画像パス1" width="920" height="400" /></div>
<div class="slide"><img src="画像パス2" width="920" height="400" /></div>
<div class="slide"><img src="画像パス3" width="920" height="400" /></div>
<!-- 画像にはwidthとheightを指定します -->
</div>
<div id="menu">
<ul>
<li class="fbar"> </li> //区切り線用
<li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li>
<li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li>
<li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li>
</ul>
</div>
</div>
</div>
このコードはhtmlのheadに組み込むのでしょうか?それともbodyでしょうか?
(3)
次にCSSを記述します。
特に難しい部分はないので、cssを見ていただくとして・・・
とありますが、リンク先のcssはいじらなくてもそのまま使用すればいいのでしょうか?
最後に、jQueryを記述すれば完成です。
$(document).ready(function(){
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
positions[i]= totWidth;
totWidth += $(this).width();
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
$('#menu ul li a').click(function(e){
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
e.preventDefault();
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
});
とありますが、これはどこに組み込めばいいのでしょうか?また何も触らなくてもいいのでしょうか?
他にも分からないところだらけなので、立て続けに質問させていただくと思いますが、お手数おかけしますが力を貸してください。
よろしく御願いいたします。
お礼
お礼遅くなり申し訳ありません。 何度もアドバイスありがとうございます! 教えていただいた通り(といっても自分の知識がそこまでマスターしてないからだと思います)やってみたのですが、 うまくいきません。 どう説明したらいいかこんがらがってきてるので、また後日再質問させていただきたく思いますので、そのときもしよろしければアドバイスいただければ、嬉しいです。 本当にありがとうございます。