CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Modelesq
Modelesq

Reputation: 5402

Prevent each img from being effected in jQuery

When a user slides the jQuery Slider over, it effects each image. How do I only get the images pertaining to that slider to change?

I've tried: $(this).closest('img.down') and $(this).siblings('img.down')

$("#slider").slider({
  value:50,
  min: 0,
  max: 100,
  step: 50,
  slide: function( event, ui ) {
    $('img.up, img.down').css('opacity','.4');
    if (ui.value >= 51) {
      $('img.up').css('opacity','.8');
    }
    if (ui.value <= 49) {
      $('img.down').css('opacity','.8');
    }
  }
});

Fiddle here

Thanks guys!

Upvotes: 0

Views: 79

Answers (3)

Jay Blanchard
Jay Blanchard

Reputation: 34416

You need to make a change to your markup, you cannot have three items in a page with the same id. You can make it

class="slider"

Move the initialization of the CSS outside of the function then traverse the markup to get the correct image:

$('img.up, img.down').css('opacity','.4');
$(".slider").slider({
  value:50,
  min: 0,
  max: 100,
  step: 50,
  slide: function( event, ui ) {
  if (ui.value == 50) {
      $(this).parent().find('img.up, img.down').css('opacity','.4');
  }
  if (ui.value >= 51) {
      $(this).parent().find('img.up').css('opacity','.8');
  }
  if (ui.value <= 49) {
      $(this).parent().find('img.down').css('opacity','.8');
  }
}
});

http://jsfiddle.net/psybJ/9/

Upvotes: 5

Bror
Bror

Reputation: 1435

You really should replace "id" with "class" for your sliders. if you do that then this code will work fine: 

$(".slider").slider({
  value:50,
  min: 0,
  max: 100,
  step: 50,
  slide: function( event, ui ) {
    var parent = $(this).parent();
    if (ui.value >= 51) {
      $('img.up',parent).css('opacity','.8');
      $('img.down',parent).css('opacity','.4');
    }
    else if (ui.value <= 49) {
      $('img.down',parent).css('opacity','.8');
      $('img.up',parent).css('opacity','.4');
    }
  }
});

Upvotes: 0

ThiefMaster
ThiefMaster

Reputation: 318518

siblings works fine for me: http://jsfiddle.net/psybJ/8/

$("#slider").slider({
    value: 50,
    min: 0,
    max: 100,
    step: 50,
    slide: function(event, ui) {
        $(this).siblings('img.up, img.down').css('opacity', '.4');
        if(ui.value >= 51) {
            $(this).siblings('img.up').css('opacity', '.8');
        }
        if(ui.value <= 49) {
            $(this).siblings('img.down').css('opacity', '.8');
        }
    }
});

Upvotes: 0

Related Questions