트리거 할 jQuery 자바 스크립트 수정 : 호버 - 이미지 스왑

Question

사용자가 이미지를 가리키면 이미지를 바꿀 수있는 훌륭한 jQuery가 있습니다. 그것을 보시려면 아래 코드를 확인하십시오.

mouseenter 및 mouseleave을 사용합니다.

특정 입력/레이블이 :checked 일 때 이미지 스왑이 실행되도록 수정하고 싶습니다.

당신은 여기 내 데모 페이지를 볼 수 있습니다

http://test.davewhitley.com/not-wp/static_folder/index.php

당신에게 몇 가지 배경을 제공하기 위해, 나는 4 입력/레이블이 있습니다. 하나를 선택하면 이미지 그룹이 흑백에서 컬러 버전으로 스왑됩니다. 모든 이미지 (image_s.jpg 및 image_o.jpg)에 대해 두 개의 파일이 있습니다.

나는 약간의 필터링을 위해 :checked 가상 클래스를 사용하고 있습니다. 입력을 확인하면 일부 이미지는 항상 채워집니다. 및 기타는 opacity:0.1으로 줄어 듭니다.

색상이 입력 된 것을 확인한 후 전체 불투명도로 남아있는 이미지 만 원합니다.

그래서 기본적으로 내가 자바 스크립트에하고 싶은 말 : 입력이 :checked와 _s.jpg 스왑 #container 내 _o.jpg 때마다.

도움이 될 것입니다.

UPDATE 1 : 명확히하려면 : 데모에서 일어나는 어떤 이미지 스왑이 없습니다. 입력이 확인되면 opacity이 변경됩니다. 불투명도 변경 외에도 이미지 스왑을 원합니다. 모든 이미지는 기본적으로 흑백으로 표시되며, 입력을 선택하면 선택한 이미지가 흑백에서 컬러로 바뀝니다 (이미지 스왑 사용).

업데이트 2 : 사용자가 필터 레이블 중 하나 (등 인쇄, 웹, 서체)에 딸깍 소리가 날 때까지, 나는 흑백으로 모든 이미지를 원하는 간단히 말해 때 라벨 을 클릭하면 필터링되지 않은 이미지는 불투명도가 낮아지고 전체 불투명도로 남아있는 필터링 된 이미지는 컬러 이미지로 바뀝니다.

업데이트 3 : 나는 아래 답변을 얻지 못하는 것 같습니다. 나는 입력을 포기할 용의가있다/: pseudo-class 필터링 기법은 일을 끝내면. 또한, 나는 일하는 테스트가 많이 도움이 될 것입니다 (JSfiddle). 여기

는 자바 스크립트 이미지 스왑 : 현재 당신이 이미지에 imgover 클래스를 놓치고과 src이 잘못 ( _e 대신 _s을의), 그래서 호버/스왑은 '아무튼 보인다

$('.imgover').each(function() { 

    var std = $(this).attr("src"); 
    var hover = std.replace("_s", "_o"); 
    $(this).clone().insertAfter(this).attr('src', hover).removeClass('imgover').siblings().css({ 
     position:'absolute' 
    }); 
    $(this).mouseenter(function() { 
     $(this).stop().fadeTo(200, 0); 
    }).mouseleave(function() { 
     $(this).stop().fadeTo(200, 1); 
    }); 
}); 

Answer 1

가상 클래스없이 원하는 효과를 얻는 간단한 방법이 있다고 생각합니다.

이미지를 래핑하는 각 링크에 클래스와 ID를 부여하고 CSS를 사용하여 각 링크의 bg 이미지를 선언 할 수 있습니다. 그런 다음 각 입력을 링크에 연결하고 .hover() 및/또는 .click()을 사용하여 CSS와 따라서 bg 이미지를 변경하십시오.

뭔가 같은 :

이

1) 모든 이미지에 일관된 UX를 제공하는 동시에로드 확인하기 위해 이미지 스프라이트를 사용하여 그것으로 효율적인/공상 얻을

<!-- HTML --> 
<div id="inputsContainer"> 
    <input id="trigger1 /> 
</div> 
<div id="linkElementsContainer"> 
    <a id="triggered1" class="state1"></a> 
</div> 
<!-- End HTML --> 

/* CSS */ 
#triggered1.state1 { 
    background: url('yoursite/images/triggered1_s.jpg') 50% 50% transparent no-repeat; 
} 

#triggered1.state2 { 
    background: url('yoursite/images/triggered1_o.jpg') 50% 50% transparent no-repeat; 
} 

// jQuery 
// shorten the names of all of these, please, they're long for 
// purposes of illustrating concept 

function changeClassOfAssociatedLink(inputElement) { 
    // get id of input element 
    var inputIdString = inputElement.attr("id"); 
    // regex to get numbers in id attr of input element 
    var inputIdStringWithNoLetters = inputIdString.replace(/\D/g,''); 

    // define id string of triggered link element you're looking for 
    var linkIdString = '#triggered' + inputIdStringWithNoLetters; 
    // find the link element with the id string you defined above 
    var linkElement = jQuery(linkIdString); 

    if(linkElement.hasClass('state1')) { 
     linkElement.attr('class', 'state2'); 
    } 

} 

jQuery('#inputsContainer input').hover(changeClassOfAssociatedLink($(this))); 

jQuery('#inputsContainer input').click(changeClassOfAssociatedLink($(this))); 

몇 가지 방법 다양한 연결 속도를 가진 사용자. 예 :

/* CSS */ 

#triggered1.state1 { 
    background: url('yoursite/images/sprites.jpg') 0 0 transparent no-repeat; 
} 

#triggered1.state1 { 
    background: url('yoursite/images/sprites.jpg') 0 -250px transparent no-repeat; 
} 

/* Moves the background image "down" 250px */ 

2)의 입력/이미지 쌍들 또는 동일 크기의 이미지 한정된 양 스프라이트를 사용하여 해당 스프라이트 내의 흑백 및 컬러 이미지의 위치를 ​​정의하여 천이 일부 완화 애니메이션을 추가하면 영상. 참고 : 이것은 상대적으로 배치 된 요소와 절대적으로 위치하는 링크를 감싸는 기본적인 CSS 배치를 요구합니다. 예 :

function changeImages(linkElement, topP) { 
      var linkElementClass = linkElement.attr("class"); 
    linkElement.animate({ 
     top: topP 
    }, { 
     duration: 500, 
     easing: 'easeInOutExpo', 
     complete: linkClassController(linkElement) 
    }); 
} 

function linkClassController(l) { 
    var linkClass = l.attr("class"); 

    if(linkClass == 'state1') { 
     l.attr('class', 'state2'); 
    } else { 
     l.attr('class', 'state1'); 
    } 
} 

jQuery('#inputsContainer input').hover(function() { 
    // get id of input element 
    var inputIdString = inputElement.attr("id"); 
    // regex to get numbers in id attr of input element 
    var inputIdStringWithNoLetters = idString.replace(/\D/g,''); 

    // define id string of triggered link element you're looking for 
    var linkIdString = '#triggered' + idString1WithNoLetters; 
    // find the link element with the id string you defined above 
    var l = jQuery(linkIdString); 

    var top = // define the top position 

    changeImages(l, top); 
}); 

// note, .toggleClass() could make provided code more efficient 
// this was a quick example 

3) 제공된 코드는 입력을 사용하지 못하게 할 수있는 기회를 제공합니다. 입력을 사용하여 데이터를 수집하지 않는 한 자바 스크립트 다기능 및 SEO에서 <ul>을 사용하거나 HTML5를 사용하는 경우 <nav>을 사용하면 도움이 될 수 있습니다.

Answer 2

을 전혀 일하지 않는다.

그냥 가야, 나는 고정 된 첫 번째 콘솔에서

$('#photos img').attr('src','images/iso_s.jpg').addClass('imgover'); 

을 실행하여. 여기에 수정 된

그런 다음, 이미지 스와핑 코드를 다시 적용

$(function(){ 

    $('.imgover').each(function() { 

     var std = $(this).attr("src"); 
     var hover = std.replace("_s", "_o"); 
     $(this).clone().insertAfter(this).attr('src', hover).removeClass('imgover').siblings().css({ 
      position:'absolute' 
     }); 

     var $img = $(this); 
     function isActive(){ 
      // Regex for extracting the ID number for the image group type 
      var reg = /^(.*\s)?ff-item-type-(\d+)[^\d]*.*/; 
      var classes = $img.closest('li').attr('class'); 
      var id = reg.exec(classes)[2]; 
      console.log('Checking image with group id',id); 

      var found = $('#select-type-all, #select-type-'+id).filter(':checked').length; 
      console.log('Matching and checked input count:', found); 

      return found>0; 
     } 

     $(this).mouseenter(function() { 
      if (isActive()){ 
       $(this).stop().fadeTo(200, 0); 
      } 
     }).mouseleave(function() {   
      $(this).stop().fadeTo(200, 1); 
     }); 
    }); 
}); 

이 일 것으로 보인다. 어떤 이유로 B/W 픽처의 크기가 너무 커서 CSS에 문제가있을 수 있습니다. 충분히이 스와핑이 의도 한대로 작동 볼 수있는 다음과 같은 수정 적용 : 나는 스와핑 코드에 만든

$('#photos img').css('width','auto !important') 

유일한 변화는 isActive 기능 검사를 추가 추가되었다 그 스왑을 수행하기 전에. 해당 입력 #select-type-[id] (또는 #select-type-all - 입력)이 선택된 경우

isActive 다음 수표 <li> 상위의 클래스에서 I 화상 그룹 ID를 추출하고.

---

Ooops, 이제 스패핑이 필터링에 의해 직접 트리거되기를 원합니다. 그렇게하려면, 대신에 이것을 시도 :

$(function(){ 

    $('#photos img').attr('src','images/iso_s.jpg').addClass('imgover'); 
    $('#photos img').css('width','auto !important') 

    $('.imgover').each(function() { 

     var std = $(this).attr("src"); 
     var hover = std.replace("_s", "_o"); 
     $(this).clone().insertAfter(this).attr('src', hover).removeClass('imgover').siblings().css({ 
      position:'absolute' 
     }); 

     var $img = $(this); 
     function isActive(){ 
      // Regex for extracting the ID number for the image group type 
      var reg = /^(.*\s)?ff-item-type-(\d+)[^\d]*.*/; 
      var classes = $img.closest('li').attr('class'); 
      var id = reg.exec(classes)[2]; 
      console.log('Checking image with group id',id); 

      var found = $('#select-type-'+id).filter(':checked').length; 
      console.log('Matching and checked input count:', found); 

      return found>0; 
     } 

     $('#container input').change(function(){ 
      if (isActive()){ 
       $img.stop().fadeTo(200, 0); 
      } else {   
       $img.stop().fadeTo(200, 1); 
      } 
     }); 
    }); 

}); 

없음 가장 효과적인 또는 우아한 해결책 (각 이미지에 대한 onchange 이벤트를 바인딩)하지만 일을 가져옵니다.