CODEWITHSUNDEEP
jqueryruby-on-rails
Stefan Hagen
Stefan Hagen

Reputation: 658

Make link from Backstretch image?

I'm using Backstretch as a way to get a nice consistent user-experience cross-browser, inside a Ruby on Rails project. The images are actually instances of the SalesPage model, and have, next to the image url, a title and an url attached to them.

I load the images as follows:

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

This works fine. except for the fact that I want to make the images into a link. I want the background images clickable, and link them to an url from the database. I'm no javascript hero, so I can't get it to work :(

Thanks for your help in advance!

Upvotes: 3

Views: 998

Answers (1)

MilesStanfield
MilesStanfield

Reputation: 4639

Try this! :)

assuming in your markup you have a <a> tag immediately surrounding your <img/> tag then in your 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};
    });

Upvotes: 2

Related Questions