CODEWITHSUNDEEP
javascriptjquery
Robert Mailloux
Robert Mailloux

Reputation: 397

Javascript Corresponding Caption Handling

I have an image gallery with 6 images that I use Javascript to control. When you click on an image it fades out and the new one loads in. The thumbnails are in a "gallery" div, the main image is displayed in an empty "photo" div.

I cant figure out how to get a paragraph to load with the corresponding image. For instance, I want to load an image but also have a paragraph of text, specific to that image, load with it.

Would this have to be done with an array? I need some ideas. Here is the Javascript and the 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>

I want to point out that everything works. I am just lost as to where to start in order to load different paragraphs in with the proper image that is loaded when clicked. Here is the live site if interested:

Live site that you can view what is working already

Upvotes: 0

Views: 52

Answers (1)

Rachid O
Rachid O

Reputation: 14002

you can a put a paragraph inside the anchor tag with a display:none style like this:

<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>

and in your script you get the paragraph content and display it with the image

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

in your html add a div for your paragraph:

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

in your javascript you should fill in this 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();

Upvotes: 1

Related Questions