Jquery Slideshow ALT text

Question

Using jQuery, I have a slideshow and I'm showing the name of each slide in a div with a class of caption. I want the text inside the div, which is being taken from the alt text of the images, to change - so I need to remove the previous text - right now the text from each image is popping up into a list that continues to grow with the click of each image. I want the first text to go away when the next image's text pops up - I have tried using remove(), but can't seem to get it to work correctly.

the html:

<!DOCTYPE html>
<html>

    <head>
        <title>jQuery Gallery</title>
        <meta charset='utf-8'>
        <link href="css/styles.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="js/project7.js"></script>
        <style type="text/css">
</style>
    </head>

    <body>
         <h1>jQuery-based Gallery</h1>

        <div id="gallery">
            <ul id="thumbs">
                <li><a href="images/andytimmons.jpg"><img src="images/thumbs/andytimmons.jpg"   alt="Andy Timmons plays Sgt. Pepper"></a>
                </li>
                <li><a href="images/ericgales.jpg"><img src="images/thumbs/ericgales.jpg" alt="Eric Gales - Relentless"></a>
                </li>
                <li><a href="images/jellyfish.jpg"><img src="images/thumbs/jellyfish.jpg" alt="Jelly Fish - Spilt Milk"></a>
                </li>
                <li><a href="images/kingsx.jpg"><img src="images/thumbs/kingsx.jpg" alt="King's X"></a>
                </li>
            </ul>
        </div>
    </body>

</html>

the CSS:

/* style the thumbnails */
 #thumbs {
    list-style: none;
    padding: 0 0 20px;
    margin: 0 0 20px;
    border-bottom: 2px solid #333;
}
#thumbs li {
    display: inline;
    margin: 0 5px;
}
#thumbs li a img {
    border: 1px dashed #000;
    padding: 1px;
    background: #fff;
    opacity: .6;
}
#thumbs li a img:hover {
    opacity: 1;
}
/* style the big main image and caption */
.galleryBig {
    border: 4px solid #333;
    padding: 2px;
    background: #666;
}
.caption {
    font: bold 18px georgia, times, serif;
    background: rgba(255, 255, 255, .7);
    position: relative;
    top: -3em;
    padding: 5px;
}

the jQuery:

   $('document').ready(function(){
loadImages();
displayFirst();
gallery();

 });

 function loadImages(){
var galleryImages = [];
var loadThese = $('#thumbs a');
for(i=0; i<loadThese.length; i++){
    galleryImages[i] = new Image();
    galleryImages[i].src = loadThese[i];
    }   

} // end loadImages

function displayFirst(){
    var firstImagePath = $('#thumbs a').attr('href');
    var firstImage = $('<img class="galleryBig" src="' + firstImagePath + '">');
    $('#thumbs').after(firstImage);
    var firstAltText = $('#thumbs img').attr('alt');
    $('.galleryBig').after('<div class="caption">' + firstAltText + '</div>');

}
// end displayFirst


 function gallery(){
$('#gallery a').click(function(evt){
    evt.preventDefault();
    $(".caption").hide();

    var alt = $(this).children("img").attr("alt"); 

    oldImage = $('#thumbs').next();

    var imgPath = $(this).attr('href');

    var newImage = $('<img class="galleryBig" src="' + imgPath + '">');
    var altText = $('.galleryBig').after('<div class="caption">' + alt + '</div>');


    newImage.hide();

    $('#thumbs').after(newImage);

    newImage.fadeIn();
    oldImage.remove();  


  }); //end anonymous fcn

 } //end gallery

No - I haven't tried the element.html(textvar). I'm not sure how to do that. I'm very new to jquery and am learning. If you could tell me how I should do this, I would appreciate it. Thanks. — Regina Shepherd Riddle
I tried using the element.html, but it didn't work. I know there is a way of hiding and have tried hide(), but might not be using it the right way... the text, so that the next text replaces it instead of showing up just below it. Any ideas will be helpful and thank you in advance. — Regina Shepherd Riddle
I found my answer. I had to take out all the oldtext stuff and add a .caption.hide() and it worked. It is working perfectly now. — Regina Shepherd Riddle

skip405 skip405 · Accepted Answer · 2013-10-22T15:10:39

The solution you chose to use is not good. As a result of caption.hide() you have multiple captions hidden from the user. It's not the way it's supposed to be. As an alternative - have a look at this fiddle: http://jsfiddle.net/dVmq2/

In it I simplified your code and your logics. Hope you'll find it useful as I don't hide captions or remove elements from the DOM, I simply modify those that are inserted on pageload.

$('document').ready(function(){
    var thumbs = $('#thumbs'),
        thumbs_links = thumbs.find('a'),
        firstAltText = thumbs.find('img').attr('alt'),
        newImage = $('<img />', {class: 'galleryBig'}),
        caption = $('<div />', {class: 'caption'}),
        full_image = newImage.attr('src', thumbs_links.attr('href')).insertAfter(thumbs),
        caption_block = caption.text(firstAltText).insertAfter('.galleryBig');

    thumbs.on('click', 'a', function(evt){
        evt.preventDefault();

        var link = $(this),
            imgPath = link.attr('href'),
            alt = link.children("img").attr("alt");

        caption_block.text(alt);
        full_image.hide().attr('src', imgPath).fadeIn();
    });
});

Jquery Slideshow ALT text

1 Answers