Adding a coffeescript iteration function to a multi-function script

[jtrinker]

I have the following iteration function:

$.each $(“.main-image”), (index, elem) ->
console.log $(elem).data(“productid”)

which pulls out all the `

#128399

TheDoc

Member

> But right now if you hover a thumbnail it switches out all the main images on the entire page.

I just sounds like you need to start using a form of `$(this)` instead of selecting *all* `.main-image` divs. So you have this in your mouseenter:

($ ‘.main-image img’)

But you should just be doing something like this:

$(this).find(‘img’)

Or something similar.

#128401

jtrinker

Participant

Wow. I have been stuck on this for two days. And you’ve gotten me to the point where every image on the page isn’t changing! Thank you. However, when you hover a thumbnail it changes the thumbnail out with a big image, not switch the big image out with the thumbnail. Here’s my updated coffeescript function:

add_image_handlers = ->

thumbnails = ($ ‘.product-images ul.thumbnails’)
($ ‘.main-image’).data ‘selectedThumb’, ‘productid’, $(this).find(‘img’)
thumbnails.find(‘li’).eq(0).addClass ‘selected’
thumbnails.find(‘a’).on ‘click’, (event) ->
($ ‘.main-image’).data ‘selectedThumb’, ‘productid’, ($ event.currentTarget).attr(‘href’)
($ ‘.main-image’).data ‘selectedThumbId’, ‘productid’, ($ event.currentTarget).parent().attr(‘id’)
($ this).mouseout ->
thumbnails.find(‘li’).removeClass ‘selected’
($ event.currentTarget).parent(‘li’).addClass ‘selected’
false
thumbnails.find(‘li’).on ‘mouseenter’, (event) ->
$(this).find(‘img’).attr ‘src’, ($ event.currentTarget).find(‘a’).attr(‘href’)

thumbnails.find(‘li’).on ‘mouseleave’, (event) ->
$(this).find(‘img’).attr ‘src’, ($ ‘.main-image’).data(‘selectedThumb’)

And here’s a url to the page: http://pants.telegraphbranding.com/t/women/long-sleeve

Thanks so much for your help. I very much appreciate it.

#128403

TheDoc

Member

1) I would add a class of ‘product’ to each of the products li.

Then you can do something like this:

$(this).parents(‘.product’).find(‘.main-image img’)…..

#128407

jtrinker

Participant

I’m sorry, I’m not following. Where would you put

$(this).parents(‘.product’).find(‘.main-image img’) ?

I appreciate your help.

#128418

TheDoc

Member

Here:

thumbnails.find(‘li’).on ‘mouseenter’, (event) ->
$(this).parents(‘.product’).find(‘.main-image img’).attr ‘src’, ($ event.currentTarget).find(‘a’).attr(‘href’)

#128422

jtrinker

Participant

Thank you so much. I’ve been scratching my head for two days over this one. Your solution works perfectly. I very much appreciate your time.

#128434

TheDoc

Member

Awesome!

You can really bash your head against the wall with this stuff and lose site of the small details. A second pair of eyes usually catches the problem right away.

[TheDoc]

> But right now if you hover a thumbnail it switches out all the main images on the entire page.

I just sounds like you need to start using a form of `$(this)` instead of selecting *all* `.main-image` divs. So you have this in your mouseenter:

($ ‘.main-image img’)

But you should just be doing something like this:

$(this).find(‘img’)

Or something similar.

[jtrinker]

Wow. I have been stuck on this for two days. And you’ve gotten me to the point where every image on the page isn’t changing! Thank you. However, when you hover a thumbnail it changes the thumbnail out with a big image, not switch the big image out with the thumbnail. Here’s my updated coffeescript function:

add_image_handlers = ->

thumbnails = ($ ‘.product-images ul.thumbnails’)
($ ‘.main-image’).data ‘selectedThumb’, ‘productid’, $(this).find(‘img’)
thumbnails.find(‘li’).eq(0).addClass ‘selected’
thumbnails.find(‘a’).on ‘click’, (event) ->
($ ‘.main-image’).data ‘selectedThumb’, ‘productid’, ($ event.currentTarget).attr(‘href’)
($ ‘.main-image’).data ‘selectedThumbId’, ‘productid’, ($ event.currentTarget).parent().attr(‘id’)
($ this).mouseout ->
thumbnails.find(‘li’).removeClass ‘selected’
($ event.currentTarget).parent(‘li’).addClass ‘selected’
false
thumbnails.find(‘li’).on ‘mouseenter’, (event) ->
$(this).find(‘img’).attr ‘src’, ($ event.currentTarget).find(‘a’).attr(‘href’)

thumbnails.find(‘li’).on ‘mouseleave’, (event) ->
$(this).find(‘img’).attr ‘src’, ($ ‘.main-image’).data(‘selectedThumb’)

And here’s a url to the page: http://pants.telegraphbranding.com/t/women/long-sleeve

Thanks so much for your help. I very much appreciate it.

[TheDoc]

1) I would add a class of ‘product’ to each of the products li.

Then you can do something like this:

$(this).parents(‘.product’).find(‘.main-image img’)…..

[jtrinker]

I’m sorry, I’m not following. Where would you put

$(this).parents(‘.product’).find(‘.main-image img’) ?

I appreciate your help.

[TheDoc]

Here:

thumbnails.find(‘li’).on ‘mouseenter’, (event) ->
$(this).parents(‘.product’).find(‘.main-image img’).attr ‘src’, ($ event.currentTarget).find(‘a’).attr(‘href’)

[jtrinker]

Thank you so much. I’ve been scratching my head for two days over this one. Your solution works perfectly. I very much appreciate your time.

[TheDoc]

Awesome!

You can really bash your head against the wall with this stuff and lose site of the small details. A second pair of eyes usually catches the problem right away.

[Author]

Posts