在自己的图像后显示alt attr

Question

having a list of images with alt, i need to grab the content of the alt and display in a clikkable link just after its own image tag.

I already have done this and I did again in a simple code which works properly, but when it comes to make it work in the website i'm working on, i got some problem in the loop, and it show always the first alt.

Maybe someone of you can see what i'm missing here.. Note: I'm working in Drupal 7 with a Colorbox plugin. Maybe it matter

Here the code:

jQuery(document).ready(function($) {

  //GALLERY COLORBOX CAPTION

  var galleryContainer = jQuery('.field-items');
  jQuery('.field-item').find('img').addClass( "thumbs" );

  var imgGallery = jQuery(".thumbs");

  for(var i = 0; i < imgGallery.length; i++){
    var thisImg = jQuery(imgGallery[i]);
    var thisImgIndex = thisImg.index();
    console.log(thisImgIndex)
    var thisImgAlt = jQuery(imgGallery).attr('alt');
    var thisImgTitle = jQuery(imgGallery).attr('title');

    thisImg.parent().parent().find("a")
      .eq(thisImgIndex).after('<div class="alt-link"> <a href="' + thisImgTitle + ' " target="_blank" >' + thisImgAlt + ' </a></div>');

  }

});

The html is bit messy but the most important part are:

<div class="field-items">

<div class="field-item even">
  <a   href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/MemoryLoss_eFlyer.jpg?itok=Md01BlUj" title=" Memory Loss 2014 Berlin (de)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44">

<img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/MemoryLoss_eFlyer.jpg?itok=fqMdCKg7" width="200" height="200" alt="http://www.dw.de/memory-loss-sarkozys-berlin-wall-blunder/a-4878717" title=" Memory Loss 2014 Berlin (de)" class="thumbs"></a>
  <div class="alt-link"> 
    <a href=" Memory Loss 2014 Berlin (de) " target="_blank">http://www.dw.de/memory-loss-sarkozys-berlin-wall-blunder/a-4878717 </a>
  </div>
</div>

<div class="field-item even"> ... </div>

<div class="field-item odd">... </div>

<div class="field-item even">...</div>

</div> 

For better understanding you can inspect the site: http://loungesquatt.com/drupal734/content/graphics

Answer 1

You are only selecting the first element in this code jQuery(".thumbs");

Use something like

var thisImgAlt = imgGallery.eq(i).attr('alt');

inside the loop

Answer 2

Looks like a typo on the code, you referenced the wrong object, it should be thisImg inside the loop:

var thisImgAlt = jQuery(thisImg).attr('alt');
var thisImgTitle = jQuery(thisImg).attr('title');

Answer 3

Aside from the selected answer, I'd like to point out, you could make this a lot easier, both to write and read by making better use of jQuery. I'll show you what I mean then break it down:

 $(function() { $('.field-item').each(function(i) { if ($(this).find('.alt-link').length === 0) { var img = $(this).find('.thumbs'), altTitle = img.attr('title'), altTxt = img.attr('alt'), altWrap = $('<div />', { class: 'alt-link' }).appendTo($(this)), altAnch = $('<a />', { href: altTitle, target: '_blank', text: altTxt }).appendTo(altWrap); } }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="field-items"> <div class="field-item even"> <a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/MemoryLoss_eFlyer.jpg?itok=Md01BlUj" title=" Memory Loss 2014 Berlin (de)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/MemoryLoss_eFlyer.jpg?itok=fqMdCKg7" width="200" height="200" alt="http://www.dw.de/memory-loss-sarkozys-berlin-wall-blunder/a-4878717" title=" Memory Loss 2014 Berlin (de)" class="thumbs"></a> <div class="alt-link"><a href=" Memory Loss 2014 Berlin (de) " target="_blank">http://www.dw.de/memory-loss-sarkozys-berlin-wall-blunder/a-4878717 </a></div> </div> <div class="field-item odd"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/1185289_610156385697046_973181272_n.jpg?itok=Dp5hstD8" title="LoungeSquatt meets Jamed 2013 London (uk)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/1185289_610156385697046_973181272_n.jpg?itok=3t7j537n" width="200" height="200" alt="http://www.residentadvisor.net/event.aspx?286997" title="LoungeSquatt meets Jamed 2013 London (uk)" class="thumbs"></a></div> <div class="field-item even"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/10384207_823498361029513_2958212523424984087_n.jpg?itok=2TCttv28" title="Be Minimal at Caffe' teatro 2014 Pavia (it)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/10384207_823498361029513_2958212523424984087_n.jpg?itok=x-x6MMOO" width="200" height="200" alt="http://trova-eventi.it/pavia-be-preserata-special-umberto-baccolo-amp-francesco" title="Be Minimal at Caffe' teatro 2014 Pavia (it)" class="thumbs"></a></div> <div class="field-item odd"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/10676175_823027561076593_9021032205766694706_n.jpg?itok=rEeTjYRy" title="Be Minimal at Deep club 2014 Pavia (it)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/10676175_823027561076593_9021032205766694706_n.jpg?itok=_fqBuULz" width="200" height="200" alt="http://www.ottawalife.com/2014" title="Be Minimal at Deep club 2014 Pavia (it)" class="thumbs"></a></div> <div class="field-item even"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/1264907_607630932616258_1776086675_o.jpg?itok=3nAzU2P2" title="with Okupe 20 years B.day 2013 Bunker Torino (it)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/1264907_607630932616258_1776086675_o.jpg?itok=Ze_FIxtq" width="200" height="200" alt="http://www.chaishop.com/event/1811740" title="with Okupe 20 years B.day 2013 Bunker Torino (it)" class="thumbs"></a></div> <div class="field-item odd"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/971280_716718458374171_1036081942720490513_n.png?itok=mBLxPBJa" title="Streaming from Where is Jesus 2013 Berlin (de)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/971280_716718458374171_1036081942720490513_n.png?itok=J0YbKp-L" width="200" height="200" alt="http://play.moviestreaming.website/watch-online/jesus-people-260861.html" title="Streaming from Where is Jesus 2013 Berlin (de)" class="thumbs"></a></div> <div class="field-item even"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/1509813_839502112762471_5772807370612527942_n.jpg?itok=2UFZDcy9" title="Phat Milano xmas ed." class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/1509813_839502112762471_5772807370612527942_n.jpg?itok=s2BcM7b3" width="200" height="200" alt="This image didn't have an alt" title="Phat Milano xmas ed." class="thumbs"></a></div> </div> 

The Rundown!

//  This is just jQuery shorthand for `jQuery(document).ready(function`
$(function() {
    //  Simple selector of all elements having class name `field-item`
    //      It made since to start at this level of selection since everything you want
    //      manipulated is within this wrapper element
    //  Also, `.each` removes all the complications of your standard for loop.
    //  If preformance is an issue, then the vanilla for loop may be for you,
    //      but it will only make a few microseconds of difference ... if that
    $('.field-item').each(function(i) { //  paramter `i` is the same here as the i in your vanilla for loop
        //  this simple if check is because my version of your html starts with one image already having an alt link
        //  this ensures we don't duplicate the process on that image
        if ($(this).find('.alt-link').length === 0) {
            //  simply grab the image in our wrapper element,
            //      if all that is going to be is the one image,
            //      then you could change the selector to just `'img'`
            //      instead of a class name
            //          NOTE: you could add `[0]` to the end and get just the element (not a jquery object)
            //              this would allow for the latter two variables to be selected as;
            //              altTitle = img.title, altTxt = img.alt
            var img = $(this).find('.thumbs'),
                //  simply making use of jQuery's attr method to get what's needed from the <image>
                altTitle = img.attr('title'),
                altTxt = img.attr('alt'),
                //  finally, create a jquery element object for our new content's wrapper
                //  and append (add it) to our parent `$(this)` which will be the current element in the loop having class `field-item`
                altWrap = $('<div />', { class: 'alt-link' }).appendTo($(this)),
                //  create anchor element and append it to its parent and you're done!
                altAnch = $('<a />', { href: altTitle, target: '_blank', text: altTxt }).appendTo(altWrap);
            // now everything is a variable, so if you needed to do anymore work to these items, go for it!
        }
    })
})