클릭하면 jquery를 사용하여 이미지의 CSS 속성이 변경됩니다.

Question

저는이 자바 스크립트 전체에서 초보자이며, 이는 아마도 초보자 용 질문 일 것입니다. 나는 그 해답을 찾다가 심지어는 기본적인 아코디언을위한 소스 코드를 수정하려고 시도했지만, 결코 작동하지 않는다.

기본적으로 미리보기 이미지를 클릭하면 이미지가 확장되는 기능을 작성하고 싶습니다. 그 부분을 가지고 있는데, 내가 알 수없는 것은 다른 이미지를 클릭 할 때 첫 번째 이미지가 새롭게 클릭 된 이미지가 확장되는 동안 미리보기 이미지로 돌아 간다는 것입니다. 거기에 애니메이션 품질이 좋겠지 만 기본 기능에 만족할 것입니다. 어쩌면 직접 애니메이션을 적용하는 방법을 알아낼 수 있습니다. 내 이미지 갤러리는 정렬되지 않은 목록에 있으며 각 이미지는 목록 항목으로 설정되어 있으며 jquery를 사용하여이 작업을 수행하려고합니다.

미리 감사드립니다. 여기

내가 당신을 클릭하면 더 큰 이미지를 만드는 한 내용은 다음과 같습니다

$('ul#live li img').click(function() { 
    $(this).animate({ 
     'width': '515px', 
     'height':'100%' 
    }); 
}); 

내 CSS :

UL # 라이브 리 IMG { 폭 : 120 픽셀; 신장 : 72px; }

그게 전부입니다. 지금 내가 원하는 것은 다른 이미지를 클릭하고 첫 번째 이미지를 클릭하여 원래의 120px 너비로 되돌릴 수있게하는 것입니다. 그게 전부 야. 나는 그것을 흐름이나 어떤 종류의 라이트 박스에서 제거하려고 시도하지 않습니다. 내가하는 방식은 아마도 최선의 방법이 아니며, 나는 단지 배우고 실험하고 있습니다. 희망이 물건을 지워.

Answer 1

상당히 직설적으로 수행 할 수 있습니다. 이전과 비슷한 방법으로 확장 된 요소에 새로운 클래스를 추가 할 수 있습니다. $(this).addClass('active_element');

다음 항목을 클릭하면 .active_element 인 애니메이션이 먼저 적용됩니다. 애니메이션을 실행하고 클래스를 선택하고 새로 선택한 요소에 대한 효과를 실행합니다.

$('ul#live li img').click(function() { 
    $('.active_element').animate({ 

    //close animation goes here 

    }); 
    $('.active_element').removeClass('active_element'); 

    $(this).animate({ 
     'width': '515px', 
     'height':'100%' 
    }); 

    $(this).addClass('active_element'); 

}); 

이것은 조금 깔끔하게 작성할 수 있지만 이는 단계적으로 철자를 기입하는 기본 원칙입니다.

아래로 더럽지 만 작업을 수행합니다.

Answer 2

매우 광범위한 질문입니다. 당신은 꽤 간단하다고 생각되는 것을하기 위해 모든 코드를 작성할 수 있습니다.

초보자는 jQuery 플러그인을 사용하는 것이 좋습니다. 그런 다음 몇 가지 최소 설치 및 구성 만 수행하면됩니다. 그 동안 작동 방식을 배우기 위해 따로 선택할 수 있습니다.

prettyPhoto 나는 당신이 더 많이 묘사 한 것과 비슷한 것을 좋아한다. 적합하지 않다면 엄지 손톱, 갤러리, 슬라이드 쇼, 라이트 박스 및 생각할 수있는 모든 조합을 처리하는 jQuery 플러그인이 많이 있습니다.