How to get img alt tag and display under image as html?

Question

I'm currently trying to get the img alt tag from each image on a slideshow and use that as the caption to be displayed below the slide.

Is there any simple way of doing this with javascript and css?

Thank you in advance!

Here's a link to the site: http://www.alison-jackson.co.uk

Here's my written HTML:

 <div id="galleryWrapper"> <div id="slideshowWrapper"> <div id="slideshow"> {.repeated section items} {.if clickthroughUrl}<a href="{clickthroughUrl}" {.or}<div {.end}class="slide" data-slide-id="{id}" data-slide-url="{urlId}"> <img {@|image-meta} /> {.if clickthroughUrl}</a>{.or}</div>{.end} {.end} </div> <div class="gallery-controls"> <span class="gallery-prev"><span>Prev</span></span><span class="gallery-divider"></span><span class="gallery-next"><span>Next</span></span> </div> </div> <!-- <div id="simpleControls"> <span class="wrapper"><span class="control prev-slide">prev</span> / <span class="control next-slide">next</span></span> </div> --> </div> 

Here's the outputted HTML:

 <div id="galleryWrapper"> <div id="slideshowWrapper"> <div id="slideshow" class="sqs-gallery-design-stacked"> <div data-slide-url="xhpxqx84l4s2dz1sxvz24un4h9bt5h" data-slide-id="544d38fbe4b0dd27d7036a64" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_199" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="552x666" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fbe4b0dd27d7036a64/1444823277877/03-OBAMA_SMOKING_XMAS_231012_HiRes-1024x682.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fbe4b0dd27d7036a64/1444823277877/03-OBAMA_SMOKING_XMAS_231012_HiRes-1024x682.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 387px; width: 662px; height: 798px; position: relative;" alt="Obama Smoking 2012. C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fbe4b0dd27d7036a64/1444823277877/03-OBAMA_SMOKING_XMAS_231012_HiRes-1024x682.jpg?format=1500w" data-image-resolution="1500w"> </div> <div data-slide-url="wte8thrzcfhfe00unh2q75vtzj7n0i" data-slide-id="544d38fce4b0dd27d7036a66" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_201" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="1024x690" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fce4b0dd27d7036a66/1444826067827/04-2002_Marilyn_wank_window_bars-1024x690.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fce4b0dd27d7036a66/1444826067827/04-2002_Marilyn_wank_window_bars-1024x690.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 126px; width: 1185px; height: 798px; position: relative;" alt="Marilyn Reclining C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fce4b0dd27d7036a66/1444826067827/04-2002_Marilyn_wank_window_bars-1024x690.jpg?format=2500w" data-image-resolution="2500w"> </div> <div data-slide-url="fl83poim6cqov9t6i4qpg30jp7galt" data-slide-id="544d38fee4b0dd27d7036a70" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_203" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="682x1024" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a70/1444821495137/05-2824_001-Queen-on-looHR-682x1024.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a70/1444821495137/05-2824_001-Queen-on-looHR-682x1024.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 452px; width: 532px; height: 798px; position: relative;" alt="Queen on the Loo C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a70/1444821495137/05-2824_001-Queen-on-looHR-682x1024.jpg?format=1500w" data-image-resolution="1500w"> </div> <div data-slide-url="2zrbx5dnwpzuczi0vx7ewgeqa7nhbn" data-slide-id="544d38fee4b0dd27d7036a72" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_205" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="1024x771" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a72/1444821531252/06-BRANGELINAS_ORPHANAGE_HIRES_S-1024x771.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a72/1444821531252/06-BRANGELINAS_ORPHANAGE_HIRES_S-1024x771.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 188px; width: 1060px; height: 799px; position: relative;" alt="Brangelinas at the Orphanage C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a72/1444821531252/06-BRANGELINAS_ORPHANAGE_HIRES_S-1024x771.jpg?format=2500w" data-image-resolution="2500w"> </div> <div data-slide-url="ibzi4a7wff74lm3vdducwz4zyp1c7w" data-slide-id="544d3901e4b013df5bcd17be" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_207" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="682x1024" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b013df5bcd17be/1444821567803/08-083-Marilyn-Back%2BJFK-682x1024.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b013df5bcd17be/1444821567803/08-083-Marilyn-Back%2BJFK-682x1024.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 452px; width: 532px; height: 798px; position: relative;" alt="Marilyn and JFK C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b013df5bcd17be/1444821567803/08-083-Marilyn-Back%2BJFK-682x1024.jpg?format=1500w" data-image-resolution="1500w"> </div> <div data-slide-url="46f2v80gmwzuxhsvuiqte3a1g87gl0" data-slide-id="544d3901e4b04e8632c63118" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_209" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="1024x682" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b04e8632c63118/1444822864869/09_MG_4915_KANYE_BABY_HEADPHONES_MRes-1024x682.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b04e8632c63118/1444822864869/09_MG_4915_KANYE_BABY_HEADPHONES_MRes-1024x682.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 119px; width: 1199px; height: 798px; position: relative;" alt="Kanye and his Baby C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b04e8632c63118/1444822864869/09_MG_4915_KANYE_BABY_HEADPHONES_MRes-1024x682.jpg?format=2500w" data-image-resolution="2500w"> </div> <div data-slide-url="y9nvmit9z4fyq553moepomk3dub6ka" data-slide-id="544d3904e4b04e8632c6311a" class="slide sqs-gallery-design-stacked-slide loaded sqs-active-slide" id="yui_3_17_2_1_1444864321837_211" data-type="image" style="opacity: 1; z-index: 889;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="840x571" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3904e4b04e8632c6311a/1444821696436/10-JACKPOOL-1024x681.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3904e4b04e8632c6311a/1444821696436/10-JACKPOOL-1024x681.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 131px; width: 1174px; height: 798px; position: relative;" alt="Jack Nicholson in the Pool C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3904e4b04e8632c6311a/1444821696436/10-JACKPOOL-1024x681.jpg?format=2500w" data-image-resolution="2500w" id="yui_3_17_2_1_1444864321837_497"> </div> <div data-slide-url="0xc0wmfensimmqyqhriwr7f78fh972" data-slide-id="561e3db7e4b0111ed6127992" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_213" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="1000x782" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3db7e4b0111ed6127992/1444823271267/marilyn-undressing-for-jfk.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3db7e4b0111ed6127992/1444823271267/marilyn-undressing-for-jfk.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 208px; width: 1021px; height: 798px; position: relative;" alt="Marilyn Undressing for JFK C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3db7e4b0111ed6127992/1444823271267/marilyn-undressing-for-jfk.jpg?format=2500w" data-image-resolution="2500w"> </div> <div data-slide-url="xemwpiezb8gnz59ozhblaal2yg8q5z" data-slide-id="561e3dc8e4b0111ed61279d1" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_215" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="3179x4308" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3dc8e4b0111ed61279d1/1444823271253/7+-+36+-+Breasts+-+Sepia_LoRes.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3dc8e4b0111ed61279d1/1444823271253/7+-+36+-+Breasts+-+Sepia_LoRes.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 424px; width: 589px; height: 798px; position: relative;" alt="Marilyn Undressing C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3dc8e4b0111ed61279d1/1444823271253/7+-+36+-+Breasts+-+Sepia_LoRes.jpg?format=2500w" data-image-resolution="2500w"> </div> <div data-slide-url="hxzcjn2dokmsl5m8q3p547s03n74xa" data-slide-id="561e3ebce4b006d31181e84c" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_217" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="2772x1845" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3ebce4b006d31181e84c/1444823270781/Elton-colonic.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3ebce4b006d31181e84c/1444823270781/Elton-colonic.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 119px; width: 1199px; height: 798px; position: relative;" alt="Elton has Colonic C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e3ebce4b006d31181e84c/1444823270781/Elton-colonic.jpg?format=2500w" data-image-resolution="2500w"> </div> <div data-slide-url="fz6fd3xi34im798puf0fvjn1z0yvgw" data-slide-id="54c2306ae4b0fe251ef9410a" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_219" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="683x1024" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c2306ae4b0fe251ef9410a/1444823270830/0Yz1Ak7xMMlEzJ4H6bkvw74ISAYeFtGJYJv8D8nsdfY.jpeg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c2306ae4b0fe251ef9410a/1444823270830/0Yz1Ak7xMMlEzJ4H6bkvw74ISAYeFtGJYJv8D8nsdfY.jpeg" class="slide-photo" style="font-size: 0px; top: 0px; left: 452px; width: 533px; height: 798px; position: relative;" alt="Queen at William Hill C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c2306ae4b0fe251ef9410a/1444823270830/0Yz1Ak7xMMlEzJ4H6bkvw74ISAYeFtGJYJv8D8nsdfY.jpeg?format=1500w" data-image-resolution="1500w"> </div> <div data-slide-url="y4d6tul9hptqw68l7rbh871qrq0uun" data-slide-id="54c230b9e4b07b213a484c9c" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_221" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="1000x667" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c230b9e4b07b213a484c9c/1444823271255/Wills_Kate_Baby_Bath_Helicopter.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c230b9e4b07b213a484c9c/1444823271255/Wills_Kate_Baby_Bath_Helicopter.jpg" class="slide-photo" style="font-size: 0px; top: 0px; left: 120px; width: 1197px; height: 798px; position: relative;" alt="Wills, Kate and the Baby in the Bath C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/54c230b9e4b07b213a484c9c/1444823271255/Wills_Kate_Baby_Bath_Helicopter.jpg?format=2500w" data-image-resolution="2500w"> </div> <div data-slide-url="2015/10/14/queen-tries-on-marigolds-c-type-archival-print" data-slide-id="561e4959e4b0f8015d9008e6" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_223" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="400x600" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e4959e4b0f8015d9008e6/1444825475506/" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e4959e4b0f8015d9008e6/1444825475506/" class="slide-photo loaded" style="font-size: 0px; top: 0px; left: 452px; width: 532px; height: 798px; position: relative;" alt="Queen tries on Marigolds. C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e4959e4b0f8015d9008e6/1444825475506/?format=1500w" data-image-resolution="1500w"> </div> <div data-slide-url="2015/10/14/diana-gives-the-finger-c-type-archival-print" data-slide-id="561e49e0e4b08862a349ef7b" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_225" data-type="image" style="opacity: 0; z-index: 888;"> <img data-image-focal-point="0.5,0.5" data-image-dimensions="1280x953" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e49e0e4b08862a349ef7b/1444825980193/" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e49e0e4b08862a349ef7b/1444825980193/" class="slide-photo" style="font-size: 0px; top: 0px; left: 182px; width: 1072px; height: 798px; position: relative;" alt="Diana gives the finger. C Type Archival Print" src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/561e49e0e4b08862a349ef7b/1444825980193/?format=2500w" data-image-resolution="2500w"> </div> </div> <div class="gallery-controls"> <span class="gallery-prev"><span>Prev</span></span><span class="gallery-divider"></span><span class="gallery-next"><span>Next</span></span> </div> </div> <!-- <div id="simpleControls"> <span class="wrapper"><span class="control prev-slide">prev</span> / <span class="control next-slide">next</span></span> </div> --> </div> 

Answer 1

You can do this using simple JavaScript :

 var img = document.getElementById("imgGoogle"); document.getElementById('divText').innerHTML = img.alt; 

 <img id="imgGoogle" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="This is Google's logo"> <div id="divText"></div> 

To do this using jQuery, you can do :

 var altText = ($("#imgGoogle").attr("alt")); $('#divText').html(altText); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <img id="imgGoogle" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google's logo"> <div id="divText"></div> 

EDIT : To answer your query of multiple images, you can use jQuery to do this :

 $.each($(".imgGoogle"), function() { var altText = $(this).attr('alt'); $(this).next().html(altText); }); 

 .divText { background-color: rgba(51, 51, 51, 0.81); color: #fff; padding: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <img class="imgGoogle" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google's logo"> <div class="divText"></div> <br> <img class="imgGoogle" src="http://72gpf1za5iq428ekh3r7qjc1.wpengine.netdna-cdn.com/wp-content/uploads/2015/02/google.png" alt="Google's logo 2"> <div class="divText"></div> <br> <img class="imgGoogle" src="http://www.google.com/logos/2011/ausday11-hp.jpg" alt="Google's logo 3"> <div class="divText"></div> <br> <img class="imgGoogle" src="http://searchengineland.com/figz/wp-content/seloads/2014/08/google-algorithm-fade-ss-1920-800x450.jpg" alt="Google's logo 4"> <div class="divText"></div> 

EDIT : To answer with respect to the output html you have provided :

 $.each($(".slide-photo"), function() { var newDiv = document.createElement("div"); var altText = $(this).attr('alt'); $(newDiv).html(altText); $(newDiv).attr('class','divAltText'); $(this).after(newDiv); }); 

 div.slide { box-shadow: 2px 2px 5px 3px #888; border-radius: 6px; margin: 20px auto; max-width: 100%; padding: 10px 0px; text-align: center; width:100%; } div.slide img { max-width: 85%; width:100%; margin: 0 auto; } .divAltText { display: inline-block; background-color: rgba(51, 51, 51, 0.81); color: #fff; padding: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="galleryWrapper"> <div id="slideshowWrapper"> <div id="slideshow" class="sqs-gallery-design-stacked"> <div data-slide-url="xhpxqx84l4s2dz1sxvz24un4h9bt5h" data-slide-id="544d38fbe4b0dd27d7036a64" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_199" data-type="image" > <img data-image-focal-point="0.5,0.5" data-image-dimensions="552x666" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fbe4b0dd27d7036a64/1444823277877/03-OBAMA_SMOKING_XMAS_231012_HiRes-1024x682.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fbe4b0dd27d7036a64/1444823277877/03-OBAMA_SMOKING_XMAS_231012_HiRes-1024x682.jpg" class="slide-photo" alt="Obama Smoking 2012. C Type Archival Print" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" data-image-resolution="1500w"> </div> <div data-slide-url="wte8thrzcfhfe00unh2q75vtzj7n0i" data-slide-id="544d38fce4b0dd27d7036a66" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_201" data-type="image" > <img data-image-focal-point="0.5,0.5" data-image-dimensions="1024x690" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fce4b0dd27d7036a66/1444826067827/04-2002_Marilyn_wank_window_bars-1024x690.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fce4b0dd27d7036a66/1444826067827/04-2002_Marilyn_wank_window_bars-1024x690.jpg" class="slide-photo" alt="Marilyn Reclining C Type Archival Print" src="http://72gpf1za5iq428ekh3r7qjc1.wpengine.netdna-cdn.com/wp-content/uploads/2015/02/google.png" data-image-resolution="2500w"> </div> <div data-slide-url="fl83poim6cqov9t6i4qpg30jp7galt" data-slide-id="544d38fee4b0dd27d7036a70" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_203" data-type="image" > <img data-image-focal-point="0.5,0.5" data-image-dimensions="682x1024" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a70/1444821495137/05-2824_001-Queen-on-looHR-682x1024.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a70/1444821495137/05-2824_001-Queen-on-looHR-682x1024.jpg" class="slide-photo" alt="Queen on the Loo C Type Archival Print" src="http://www.google.com/logos/2011/ausday11-hp.jpg" data-image-resolution="1500w"> </div> <div data-slide-url="2zrbx5dnwpzuczi0vx7ewgeqa7nhbn" data-slide-id="544d38fee4b0dd27d7036a72" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_205" data-type="image" > <img data-image-focal-point="0.5,0.5" data-image-dimensions="1024x771" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a72/1444821531252/06-BRANGELINAS_ORPHANAGE_HIRES_S-1024x771.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d38fee4b0dd27d7036a72/1444821531252/06-BRANGELINAS_ORPHANAGE_HIRES_S-1024x771.jpg" class="slide-photo" alt="Brangelinas at the Orphanage C Type Archival Print" src="http://searchengineland.com/figz/wp-content/seloads/2014/08/google-algorithm-fade-ss-1920-800x450.jpg" data-image-resolution="2500w"> </div> <div data-slide-url="ibzi4a7wff74lm3vdducwz4zyp1c7w" data-slide-id="544d3901e4b013df5bcd17be" class="slide sqs-gallery-design-stacked-slide loaded" id="yui_3_17_2_1_1444864321837_207" data-type="image" > <img data-image-focal-point="0.5,0.5" data-image-dimensions="682x1024" data-image="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b013df5bcd17be/1444821567803/08-083-Marilyn-Back%2BJFK-682x1024.jpg" data-src="http://static1.squarespace.com/static/544d37fde4b0420e8843b42e/544d38eee4b04e8632c630f6/544d3901e4b013df5bcd17be/1444821567803/08-083-Marilyn-Back%2BJFK-682x1024.jpg" class="slide-photo" alt="Marilyn and JFK C Type Archival Print" src="http://core0.staticworld.net/images/article/2014/09/google_tunnel-100432147-primary.idge.jpg" data-image-resolution="1500w"> </div> 

Hope this helps!!!

Answer 2

You can do something like:

var myphotoCaption = $( "#photoid" ).attr( "alt");
$('.altHolder').append(myphotoCaption)

<img src="test.gif" alt="test gif"/>
<div class="altHolder"></div>

Answer 3

It's hard to solve your problem exactly without seeing some of your code, but I can show you some stuff below about taking a list of <img> elements and making captions based on the alt="" attribute of those images.

TL;DR

• Using plain JS https://jsfiddle.net/hcp77o1a/3/
• Using jQuery https://jsfiddle.net/hcp77o1a/4/

Plain JavaScript

I've used jQuery for this sort of thing in the past, but I wanted to see if it was possible using plain JavaScript. I don't know your exact setup, but I imagined a gallery that houses images, with each image wrapped by a <div> :

<div id="gallery">
    <div class="image">
        <img src="https://c2.staticflickr.com/8/7685/16678214344_aef36b7a5a_n.jpg"
        alt="An illustration of two falcons">
    </div>

    <div class="image">
        <img src="https://c1.staticflickr.com/9/8635/16713817201_f5a828e2ed_n.jpg"
        alt="A hand-painted botanical print">
    </div>    

    <div class="image">    
        <img src="https://c2.staticflickr.com/4/3885/14953162645_5d99097f2b_n.jpg"
        alt="An engraved plate of Jesus College">
    </div>     
</div>

Then with a simple bit of JavaScript we can look at each of these images and put the contents of their alt attributes into <span> elements:

First, find our gallery container, and the list of image containers within it:

var gallery = document.getElementById('gallery');
var imageContainers = gallery.getElementsByClassName('image-container');

Loop through the image containers, finding the alt attributes, creating <span> elements for them to live in, putting the alt contents into the <span> you've created, and finally insert that <span> into the image containers, alongside each image:

for (var i = 0; i < imageContainers.length; i++) {
    // Find the image in each container:
    var image = imageContainers[i].getElementsByTagName('img')[0];

    // Create a span element - we'll use this to house our caption:
    var caption = document.createElement('span');

    // Stick the alt tag from the image we found above into the caption <span>:
    caption.innerHTML = image.alt;

    // Insert the caption <span> into the image container:
    imageContainers[i].appendChild(caption);
}

Check out the fiddle at https://jsfiddle.net/hcp77o1a/3/ to see this in action.

jQuery

Using the same HTML template, this jQuery will perform the same work:

// Find our gallery container, and the list of image containers within it:
var imageContainers = $('#gallery').find('.image-container');

// Loop through the image containers:
$.each(imageContainers, function (i) {

    // Find the image in each container:
    var image = $(imageContainers[i]).find('img')[0];

    // Create a span element - we'll use this to house our caption:
    var caption = document.createElement('span');

    // Stick the alt tag from the image we found above into the caption
    $(caption).html(image.alt);

    // Insert the caption <span> into the image container:
    $(imageContainers[i]).append(caption);
});

In action at the following fiddle: https://jsfiddle.net/hcp77o1a/4/

Hope that helps - let me know if not!