我正在使用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});
这很好用。除了我想将图像变成链接这一事实。我希望背景图像可点击,并将它们链接到数据库中的网址。我不是 javascript 英雄,所以我无法让它工作:(
提前感谢您的帮助!
最佳答案
试试这个! :)
假设您的标记中有 <a>
标签紧邻您的 <img/>
然后在您的 View 中标记...
- 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};
});
关于jquery - 从 Backstretch 图像建立链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13310785/