여러 이미지 클릭 할 수있는 자바 스크립트, jquery

Question

내 웹 사이트에 여러 이미지가있는 작은 갤러리가 있습니다. 각 이미지를 클릭 할 때 클릭 할 때 이미지의 크기가 커지고 다른 이미지는 사라집니다. 나는 그것을하는 방법에 대한 아이디어가 있지만, 그것이 의미가있는 경우 각 이미지에 대해 천 번의 클릭 기능을 갖고 싶지 않습니다.

여기 여기 div 요소에 싸여 이미지에 대한 마크 업 인 이미지

  $("#images").click(function (e) { 
      $("#images img").css({ width: "0px", height: "0px"}); 
      e.target.style.width = "400px"; 
      e.target.style.height = "400px"; 
      $("#images").stop(); 
     }); 

내 자바 스크립트 코드입니다. 더 많은 이미지 그냥 여기 여기

<div id="images"> 
      <asp:Image ID="Image1" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery1_Small.jpg" /> 
      <asp:Image ID="Image2" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery2_Small.jpg" /> 
      <asp:Image ID="Image3" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery3_Small.jpg" /> 
      <asp:Image ID="Image4" hspace="25" vspace ="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery4_Small.jpg" /> 
      <asp:Image ID="Image5" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery5_Small.jpg" /> 
      <asp:Image ID="Image6" hspace="25" vspace ="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery6_Small.jpg" /> 
      <asp:Image ID="Image7" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery7_Small.jpg" /> 
      <br /> 
      <br /> 
      <asp:Image ID="Image8" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery8_Small.jpg" /> 
      <asp:Image ID="Image9" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery9_Small.jpg" /> 
      <asp:Image ID="Image10" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery10_Small.jpg" /> 
      <asp:Image ID="Image11" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery11_Small.jpg" /> 
      <asp:Image ID="Image12" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery12_Small.jpg" /> 
      <asp:Image ID="Image13" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery13_Small.jpg" /> 
      <asp:Image ID="Image14" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery14_Small.jpg" /> 
      <asp:Image ID="Image15" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery15_Small.jpg" /> 
    </div> 

#images 
{ 
    position: absolute; 
    top: 165px; 
    margin-right: -50000px; 
} 

에 그들 모두를 데려 가고 싶다는 didnt가있다는 내가 일하고 곳으로 링크입니다 그래서 난 그냥 단지 이미지, 이미지를 클릭 할 수 있도록하려면 http://portfoliobrown.com/Gallery/GalleryHome.aspx 페이지의 중간에 크기가 커지고 다른 이미지가 사라집니다.

어떤 도움도 대단히 감사하겠습니다 감사 당신은 이벤트 위임을 사용할 수 있습니다

Answer 1

많은. 클릭 이벤트를 래퍼 div에 바인딩 한 다음 e.target을 사용하여 특정 이미지가 사용되고 있는지 확인합니다. 당신이 jQuery를 사용하고 있기 때문에

$("#images").click(function(e){ 
    // Reset the other image styles here. Doesn't really make sense to 
    // hide them completely though or you will have nothing to click! 
    $("#images img").css({width: "50px", height: "40px"}); 

    // Apply styles to the clicked image. 
    e.target.style.width = "500px"; 
    e.target.style.height = "400px"; 
}); 

Answer 2

, 당신은 (당신은 더 나은 뭔가를이 참조가 진짜 빨리 찾을 수) this를 사용한다.

나는 당신이 볼 수있는 fiddle도 만들었습니다. 매우 간단하지만 선택자를 사용하여 onclick 이벤트를 캡처 할 수 있도록 이미지 태그에 클래스를 추가하면됩니다.

$('.image').on('click', function(){ 
    $(this).height('100px'); 
    $(this).width('100px'); 
}); 

분명히 이미 처리 된 이미지는 처리되지 않지만 그 주위를 둘러 볼 것입니다. 고해상도 이미지를로드하는 경우 높이 및 너비 속성을 확장하는 것이 가장 좋은 옵션이 아닐 수 있습니다. 클릭 한 각 이미지를 더 높은 해상도의 이미지 (예 : data-id 또는 유사하게 사용자 정의 된 속성)에 연결하는 방법이 있어야합니다.

onclick 기능에 대한 다른 이미지에 display: none의 스타일로 add another class을 사용할 수 있습니다. 그것은 그들을 숨길 것입니다. 사용자가 더 큰 이미지를 떠날 때 암탉은 단지 remove the class입니다.

어쨌든 도움이 되길 바랍니다.