jquery - 从 Backstretch 图像创建链接？

Question

我正在使用Backstretch作为在 Ruby on Rails 项目中获得一致的用户体验跨浏览器的一种方式。这些图像实际上是SalesPage模型的实例，并且在图像 url 旁边有一个标题和一个附加到它们的 url。

我加载图像如下：

- images = []
- sales_pages_images = []
- @sales_pages.each do |page|
- images << "'#{page.images.first.image.url}'"

#backgroundImageSlider
  :javascript
  var images = [#{images.join(",")}];
  $(images).each(function(){ $("<img/>")[0].src = this; });
  var index = 0;
  setInterval(function() { index = (index >= images.length - 1) ? 0 : index + 1;       $.backstretch(images[index]);}, 5000);
$.backstretch(images[index], {speed: 500});

这工作正常。除了我想将图像制作成链接的事实。我希望背景图像可点击，并将它们链接到数据库中的 url。我不是javascript英雄，所以我无法让它工作:(

提前感谢您的帮助！

Answer 1

尝试这个！:)

假设在您的标记中，您的<a>标签周围有一个标签，<img/>然后在您的视图中...

- images = @sales_pages.inject([]) do |images, sales_page|
    - images << "sales_page.images.first.image.url"

  :javascript
    $imageTag = $("img");
    $imageLink = $imageTag.parent()
    $imageTag.backstretch(#{images}, { duration: 5000, fade: 500, });
    $(window).on("backstretch.after", function (e, instance, index) {
      $imageLink.attr('href') = #{@sales_pages[index].link};
    });