1. дома
  2. Вопрос и ответ
  3. Как получить тег img alt и отображать под изображением как html?

Как получить тег img alt и отображать под изображением как html?

2015-10-14 6 views
0

В настоящее время я пытаюсь получить тег img alt из каждого изображения в слайд-шоу и использовать его в качестве заголовка, который будет отображаться под слайдом.Как получить тег img alt и отображать под изображением как html?

Есть ли простой способ сделать это с помощью javascript и css?

Спасибо заранее!

Вот ссылка на сайт: http://www.alison-jackson.co.uk

Вот мой написанный 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>

Вот выводимый 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>

источник

2015-10-14 MalloryMan

+1

Для этого вам необходимо использовать javascript –

+0

Пожалуйста, разместите исходный код, который вы написали. –

ответ

2

Вы можете сделать это с помощью простой 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>

Чтобы сделать это с помощью JQuery, вы можете сделать:

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: Для того, чтобы ответить на запрос нескольких изображений, вы можете использовать jQuery сделать это:

$.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: Для ответа относительно вывода HTML Ваш предоставили:

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

Надеюсь, что это поможет !!!

источник

2015-10-14 21:39:23

+0

Извините, что ответил почти точно так же, не видел вас до тех пор, пока я не отправил сообщение. – Blake

+0

@Blake Вы показали другой способ сделать то же самое! Это всегда хорошо. +1 –

+0

@SatwikNadkarny это так близко, но моя большая проблема в том, что каждое изображение на слайде отличается. Можно ли использовать что-то другое, кроме img id, чтобы получить это? Или сделать его более широким как-то ... – MalloryMan

1

Вы можете сделать что-то вроде:

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

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

источник

2015-10-14 21:40:44 Blake

+0

Это был почти тот же ответ, что и ниже ... только с jquery вместо прямого Javascript. – Blake

0

Это трудно решить вашу проблему точно не видя некоторые из вашего кода, но я могу показать вам некоторые вещи ниже о принятии списка <img> элементов и сделать подписи основанный на атрибуте alt="" этих изображений.

TL; DR

Plain JavaScript

Я использовал JQuery для такого рода вещи в прошлом, но я хотел посмотреть, можно ли использовать простой JavaScript. Я не знаю точную установку, но я представлял себе галерею, где хранятся изображения, с каждым изображением обернет <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>

Затем с помощью простых немного JavaScript, мы можем смотреть на каждый из этих образов и положить содержание их alt атрибутов в <span> элементов:

Во-первых, найти нашу галерею контейнер, и список контейнеров изображений внутри него:

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

Loop через контейнеры изображения, findin г в alt атрибуты, создавая <span> элементы для них, чтобы жить, помещая alt содержимое в <span> вы создали, и, наконец, вставить что <span> в контейнеры изображения, наряду с каждым изображением:

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); 
}

Отъезд скрипка на https://jsfiddle.net/hcp77o1a/3/, чтобы увидеть это в действии.

JQuery

Используя тот же шаблон HTML, этот JQuery будет выполнять ту же работу:

// 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); 
});

В действии на следующую скрипке: https://jsfiddle.net/hcp77o1a/4/

Надежда, что помогает - пусть меня узнайте, если нет!

источник

2015-10-14 22:52:23

+0

@MalloryMan Я только что обновил свой ответ, поскольку перепутал некоторые мои ссылки jsfiddle.Извиняюсь, если вы уже посетили неправильные ссылки - правильные включены в мой ответ выше! –

+0

Благодарим вас за это - я обновлю свой вопрос с помощью моего кода. Он выглядит сумасшедшим, но его вывод из данных JSON и т. Д. – MalloryMan

 Смежные вопросы

  • Нет связанных вопросов^_^