Backstretch Галерея Jquery - PullRequest
Новая
       5

Backstretch Галерея Jquery

0 голосов
/ 08 марта 2012

Я использую плагин backstretch full page, найденный здесь: http://srobbin.com/jquery-plugins/backstretch/

По сути, мне поручено сделать небольшую галерею из 5 изображений - код для изменения фона при нажатии - 

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

Что я пытаюсь сделать, так это когда вы щелкаете изображение, получаете атрибут заголовка этого изображения и используете его, чтобы определить, какую искомую обратную строку ищет файл

так: 

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

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

1 Ответ

1 голос
/ 08 марта 2012

Возможно, семантически целесообразнее поместить новое имя файла изображения в атрибут 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 .attr () .

...