Backstretch Gallery Jquery

Question

我正在使用此处找到的backstretch整页插件：http://srobbin.com/jquery-plugins/backstretch/

基本上，我的任务是制作一个包含5张图片的小图库 - 更改背景信息的代码是

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

我要做的是，当你点击图片时，获取该图片的title属性并使用它来定义backstretch正在寻找的文件名

这样：

 <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

将新图像文件名放在锚点的rel属性上可能在语义上更有意义，图像的标题应该与该图像相关。

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

如果您更愿意使用原始标记，JS将是：

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

使用jQuery's .attr()方法获取属性值。