i want alt text to appear as a caption

Report · Aug 13, 2018

Hi,

I am trying to build a image gallery page for website in dreamweaver and I wanted alt text appear as a caption with bigger image when I click on thumbnail.

Its not happening I followed utube tutorial everything working fine.

</script>

</script>

$(document).ready(function() {

$("table img[width=196]").click(function(){

$("caption").text(this.alt)

})

)};

}

what is wrong?

and also please tell me I want 3d rotating image made on solid works , how can I insert it on website ?which software help in supporting 3d images on website.

Report · Aug 13, 2018

Copy & paste this code into a new, blank document. SaveAs test.html and preview in browsers.

<!doctype html>

<head>

<title>Image Captions</title>

<style>

.new {

display: inline-block;

position: relative;

}

.new img {

display: block;

}

.new::after {

content: attr(data-alt);

position: absolute;

bottom:0;

left: 0;

height: 1.5em;

width: 100%;

background: rgba(0,0,0,0.75);

z-index: 2;

color:white;

text-align: center;

line-height: 1.5em}

</style>

</head>

<body>

//Image Captions Function

$('img').each(function() {

var data = $(this).attr('alt');

$(this)

.wrap("<div class='new'></div>")

.parent('.new')

.attr('data-alt', data)

;

});

</script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 13, 2018

Use After Effects.

How to Create 3D Animated Rotating Logos in Adobe After Effects CC Tutorial - YouTube

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 13, 2018

You could always try using the figure and figcaption tags.

HTML figcaption Tag

Save you from fussing about with javascript as the caption can just be shown/hidden with css.

Report · Aug 14, 2018

What jquery solution are you using to make the big image appear?

There is literally probably a million ways to do this in jQuery or plain javascript.

One example is below:

<!DOCTYPE html>

<html>

<head>

<title>jQuery Image Gallery</title>

<style>

* {

box-sizing: border-box;

}

img {

max-width: 100%;

}

.gallery-wrapper {

width: 75%;

margin: 0 auto;

text-align: center;

}

@media screen and (max-width: 768px) {

.gallery-wrapper {

width: 90%;

}

@media screen and (max-width: 480px) {

.large-image {

display: none;

}

.large-image img {

padding: 10px;

border: 1px solid #ccc;

}

figure {

margin: 0;

padding: 0;

}

figcaption {

padding: 5px 0 15px 0;

}

.thumbnail-wrapper {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.thumbnail {

width: 24%;

height: auto;

}

@media screen and (max-width: 480px) {

.thumbnail {

width: 100%;

}

.thumbnail figcaption {

display: none;

}

@media screen and (max-width: 480px) {

.thumbnail figcaption {

display: block;

}

</style>

</head>

<body>

<figcaption>©Christian Domingues / pexels.com</figcaption>

</figure>

</div>

<figcaption>©Christian Domingues / pexels.com</figcaption>

</figure>

</div>

<figcaption>©Jodie DS / pexels.com</figcaption>

</figure>

</div>

<figcaption>©Kat Jayne / pexels.com</figcaption>

</figure>

</div>

<figcaption>©Adrianna Calvo / pexels.com</figcaption>

</figure>

</div>

</div>

$('.thumbnail img').click(function(){

var imgSrc = $(this).attr('src');

var imgCap = $(this).attr('alt');

$('.large-image').css('display','none');

$('.large-image').fadeIn().html('<figure><img src="' + imgSrc + '"><figcaption>' + imgCap + '</figcaption></figure>')

});

</script>

</body>

</html>

Report · Aug 14, 2018

If you are feeling adventurous then the code below is the same as the jQuery gallery in the post above but produced in Vue js.

I'm yet to be convinced that Vue is going to be a replacement for jQuery, to me it seems more complex more code and doesnt offer anywhere near what jQuery does............perhaps its better suited for SPAs rather than websites. I have not yet gotten my head around Vue transitions so the subtle fade in effect of the large image has not been applied. If anyone wants to wade in and introduce the Vue transition that would be good. I can add it with css but Vue is meant to have its own built in transitions but I can make them work for anything other than a simple toggle button, yet.

<!DOCTYPE HTML>

<head>

<title>Vue Image Gallery</title>

<style>

* {

box-sizing: border-box;

}

img {

max-width: 100%;

}

.gallery-wrapper {

width: 75%;

margin: 0 auto;

text-align: center;

}

@media screen and (max-width: 768px) {

.gallery-wrapper {

width: 90%;

}

@media screen and (max-width: 480px) {

.large-image {

display: none;

}

.large-image img {

padding: 10px;

border: 1px solid #ccc;

}

figure {

margin: 0;

padding: 0;

}

figcaption {

padding: 5px 0 15px 0;

}

.thumbnail-wrapper {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.thumbnail {

width: 24%;

height: auto;

}

@media screen and (max-width: 480px) {

.thumbnail {

width: 100%;

}

.thumbnail figcaption {

display: none;

}

@media screen and (max-width: 480px) {

.thumbnail figcaption {

display: block;

}

.fade-enter-active, .fade-leave-active {

transition: opacity .5s;

}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

opacity: 0;

}

</style>

</head>

<body>

</figure>

</div>

</figure>

</div>

</figure>

</div>

</div>

</div>

new Vue({

el: '.gallery-wrapper',

data: {

defaultImage: true,

defaultImg: "https://images.pexels.com/photos/731022/pexels-photo-731022.jpeg",

images: [

{imgSrc: "https://images.pexels.com/photos/731022/pexels-photo-731022.jpeg" , caption: "©Christian Domingues / pexels.com"},

],

selectedImage: {}

},

methods: {

showSelected (image) {

this.defaultImage = false,

this.selectedImage = image

}

})

</script>

</body>

</html>

Adobe Community

i want alt text to appear as a caption

1 Correct answer