Create JavaScript fill href based upon var

Question

I'm using a lovely Lightbox plugin that requires the following piece of code per image

<a href="images/portfolio/full/1.jpg"
   data-target="flare"      
   data-flare-plugin="shutter"
   data-flare-scale="fit"   
   data-flare-gallery="portfolio"
   data-flare-thumb="images/portfolio/thumbs/1.jpg"
   data-flare-bw="images/portfolio/bw/1.jpg"
   class="kleur multiple">    
       <img src="images/portfolio/thumbs/1.jpg" width="375px" height="250px"   />    
</a>            

And I would like to write, together with some of you, a piece of Javascript/jQuery script that elminates writing some of the lines of the above piece of code.

Let me explain: The

- full image (href),
- blackwhite version (data-flare-bw=""),
- lightbox thumb (data-flare-thumb="")
- and the page thumb (<img src=""/>) 

all have one thing in common: The filename is identical, only the path differs from eachother. So I would like to write/have a script that, based upon a var it automatically writes those lines of code. Not only the SRC, but also the attribute itself, so the href="" , data-flare-bw="" , data-flare-thumb="" and the <image src=""/>

As I'm not a Jquery master, i'll try to write down the code that, I'd think somewhat give you guys an idea of what should come:

$function(InsertAttributesAutomaticcly() {
    var filenames = $('#container a').attr('data-flare-title', this')

    $('#container a').each(function() {
        $(this).append('href', 'images/portfolio/full/' + 'filenames' + '.jpg');
        $(this).append('data-flare-bw', 'images/portfolio/blackwhite/' + 'filenames' + '.jpg');
        $(this).append('data-flare-thumb', 'images/portfolio/thumb/' + 'filenames' + '.jpg');
        $(this).html('<img src=" 'images/portfolio/thumb/' + 'filenames' + '.jpg'">');
    });
});

Let me explain the code: It searches within #container for a and then appends the href , data-flare-thumb , data-flare-bw tag to it, with the src/url/href image location, which would be + var (identical to data-flare-title="" ) + .jpg. After inserting those three attributes, it inserts a <img> within the a tag, with an src of <path> + var (as before) + '.jpg'

I'm pretty sure this isn't that hard to write, but I'm not that skilled to create a working piece of script, sadly.

Thanks guys!

Bonus task: Those who succesfully write a piece of code above, including a script that tracks the size of the thumb (width + height) and writes that, next to the , will get a beer from me!

Answer 1

Granted that you have such links for example:

<div id="container">
  <a href="#" data-flare-title="1.jpg"></a>
  <a href="#" data-flare-title="2.jpg"></a>
  <a href="#" data-flare-title="3.jpg"></a>
</div>

This would be a viable approach:

$(function(){

  $('#container a').each(function(){

    var $link = $(this),
        title = $link.data('flare-title');

    $link.attr('href', 'images/portfolio/full/' + title);
    $link.attr('data-flare-bw', 'images/portfolio/blackwhite/' + title);
    $link.attr('data-flare-thumb', 'images/portfolio/thumbs/' + title);

    $link.append($('<img>', {
      src     : 'images/portfolio/thumbs/' + title,
      width   : '375px',
      height  : '250px'
    }));

  });

});

Edit: see fiddle .