JS: Setting background-image with .click event is lagging 1 click behind the carousel image.

Question

Hi, I have got the following code which reads the

div.photo.active

element's image src attribute, writes it to a variable which then should set it as the (tiling) background image of another div container.

All of this works well however when clicking on the a.next and a.prev button to trigger the display:block & display:none states of the carousel the carousel image is always one too fast.

It ll be easiest to understand when going to this dev page and seeing it:

Example Page

Here is the code (jQuery)

// setting the images only to tile dynamically
// execute only if on a photo page
 jQuery('a.next, a.prev').click(tileImage);
 jQuery('a.next, a.prev').css({'zIndex':'500'});
 jQuery(document).ready(tileImage);

function tileImage () {

 //get current image source
 var currentImage = jQuery('div.photo.active').find('img').attr('src');

 //set image source as background of tiling div
 if (
  jQuery('div.photo').length
 ){
 jQuery('div.tileable').css({
   'background-image': 'url(' + currentImage + ')',
   'background-position': 'center 123px',
   'background-repeat': 'repeat'
  });
  jQuery('div.photo.active').find('img').hide();
 }
};

Thanks for reading, I look forward to your advice.

Regards, Jannis

Answer 1

Your sample redirects to an unrelated page. Did you get this working?