Changing an image's ALT value with jQuery
- by NightMICU
Hi all,
I have a modal form that changes the caption of a photo (paragraph under the image) and I am also trying to change the image's ALT attribute but cannot seem to.
Here is the jQuery I am trying to make work
$(".edit").click(function() {
                var parent = $(this).parents('.item');
                var caption = $(parent).find('.labelCaption').html();
                $("#photoCaption").val(caption);
                $("#editCaptionDialog").dialog({
                        width: 450,
                        bgiframe: true,
                        resizable: false,
                        modal: true,
                        title: 'Edit Caption',
                        overlay: {
                            backgroundColor: '#000',
                            opacity: 0.5
                        },
                        buttons: {
                            'Edit': function() {
                                var newCaption = $("#photoCaption").val();
                                $(parent).find(".labelCaption").html(newCaption);
                                $(parent).find('img').attr('alt', newCaption);
                            }
                        }
                });
                return false;
            });
And the HTML
<li class="item ui-corner-all" id="photo<? echo $images['id'];?>">
                        <div>
                            <a href="http://tapp-essexvfd.org/gallery/photos/<?php echo $images['filename'];?>.jpg" class="lightbox" title="<?php echo $images['caption'];?>">
                            <img src="http://tapp-essexvfd.org/gallery/photos/thumbs/<?php echo $images['filename'];?>.jpg" alt="<?php echo $images['caption'];?>" class="photo ui-corner-all"/></a><br/>
                            <p><span class="labelCaption"><?php echo $images['caption'];?> </span></p>
                            <p><a href="edit_photo.php?filename=<?php echo $images['filename'];?>" class="button2 edit ui-state-default ui-corner-all">Edit</a></p>
                        </div>
                    </li>
The caption is changing like it should.
Thanks