Question

I’m using the backstretch full page plugin found here: http://srobbin.com/jquery-plugins/backstretch/

Basically, I’m tasked with making a small gallery of 5 images – the code to change the background on click is

  $("#outside").click(function(e) {
  e.preventDefault();
  $.backstretch('img/picture.jpg');
  });

What I’m trying to do though is when you click an image, get the title attribute of that image and use it to define the filename backstretch is looking for

so:

 <a class="clicker"><img src="/assets/img/image1.jpg" alt="image1" title="image1" /></a>

  $(".clicker").click(function(e) {
  e.preventDefault();
  $.backstretch('img/pulledfromtitleattrib.jpg');
  });

Answer 1

It might make more sense semantically to put new image filename on the rel attribute of the anchor, the title of the image should be related to that image.

<a class="clicker" rel="new-image"><img src="/assets/img/image1.jpg" alt="image1" title="image1" /></a>

$(".clicker").click(function(e) {
  e.preventDefault();
  var new_img = $(this).attr('rel');
  $.backstretch('img/' + new_img + '.jpg');
});

If you would rather use your original markup the JS would be:

$(".clicker").click(function(e) {
  e.preventDefault();
  var new_img = $(this).children('img').attr('title');
  $.backstretch('img/' + new_img + '.jpg');
});

Either way uses jQuery’s .attr() method to grab attribute values.