反向拉伸画廊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()方法来获取属性值。