0

Javascriptを使用して制御する6つの画像を含む画像ギャラリーがあります。画像をクリックすると、フェードアウトして新しい画像が読み込まれます。サムネイルは「ギャラリー」divにあり、メイン画像は空の「写真」divに表示されます。

対応する画像で段落をロードする方法がわかりません。たとえば、画像をロードしたいのですが、その画像に固有のテキストの段落もロードします。

これはアレイで行う必要がありますか？いくつかのアイデアが必要です。これがJavascriptとhtmlです。

$('#gallery a').click(function(evt) {
evt.preventDefault();   
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src=" ' + imgPath + ' ">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();

<div id="photo">
</div>

<div id="gallery">
<a href="images/home1_h.jpg"><img src="images/home1.jpg" alt="home 1"></a>
<a href="images/home2_h.jpg"><img src="images/home2.jpg" alt="home 2"></a>
<a href="images/home3_h.jpg"><img src="images/home3.jpg" alt="home 3"></a>
<a href="images/home4_h.jpg"><img src="images/home4.jpg" alt="home 4"></a>
<a href="images/home5_h.jpg"><img src="images/home5.jpg" alt="home 5"></a>
<a href="images/home6_h.jpg"><img src="images/home6.jpg" alt="home 6"></a>
</div>

私はすべてがうまくいくことを指摘したいと思います。クリックしたときに読み込まれる適切な画像を使用してさまざまな段落を読み込むために、どこから始めればよいかわからなくなってしまいました。興味があれば、ライブサイトは次のとおりです。

すでに機能しているものを表示できるライブサイト

4

1 に答える 1

1

次のようなdisplay：noneスタイルを使用して、アンカータグ内に段落を配置できます。

<div id="gallery">
<a href="images/home1_h.jpg">
<img src="images/home1.jpg" alt="home 1">
<p style="display:none">this is a paragraph</p></a>
</div>

スクリプトでは、段落の内容を取得して画像とともに表示します

var paragraph=$(this).find("p:first").text();

HTMLに段落のdivを追加します。

<div id="photo"></div>
<div id="paragraph"></div>

JavaScriptに、次のdivを入力する必要があります。

$('#gallery a').click(function(evt) {
evt.preventDefault();   
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src=" ' + imgPath + ' ">');
var paragraph=$(this).find("p:first").text();
newImage.hide();
$('#photo').prepend(newImage);
$('#paragraph').html(paragraph);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();
于 2013-03-26T01:08:00.870 に答える