jquery CSS를 사용하여 클릭시 이미지 크기 변경

Question

목록에 비디오 및 이미지가 포함 된 html 표가 있습니다. 아무 행이나 클릭하면 비디오가 재생되거나 div에 이미지가 표시됩니다.

클릭하면 비디오 또는 이미지의 크기를 조정할 수있는 크기 변경 링크가 있습니다.

<div id="player" style="display:block;width:320px;height:240px;background-image:url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)"></div> 
<a id="toggleres" href="#">Change to 640x480</a> 
<table id="webcam-table" class="pretty"> 
       <thead> 
       <tr> 
        <th>Name</th> 
        <th>Date Created</th> 
        <th>Length</th> 
       </tr> 
       </thead> 
       <tbody> 
        <tr class="videorow" data-url=http://www.extremetech.com/wp-content/uploads/2012/12/Audi-A1.jpg> 
         <td> 
          testimages 
         </td> 
         <td> 
          13 Jun 2013 22:01:37 
         </td> 
         <td> 
          1sec  
         </td> 
        </tr> 
             <tr class="videorow" data-url=http://metalstate.files.wordpress.com/2013/03/10-mclaren-p1-cars-to-wait-for-jpg_235623.jpg> 
         <td> 
          testimages 
         </td> 
         <td> 
          13 Jun 2013 22:01:37 
         </td> 
         <td> 
          1sec  
         </td> 
        </tr> 
    </tbody> 
</table> 

테이블에서 행을 클릭하면 이미지가 보이거나 동영상이 재생됩니다. 언제든지 링크를 클릭하여 해상도 (크기)를 변경할 수 있습니다.

jQuery('#toggleres').click(function(event) { 
     if (jQuery('#toggleres').text() == "Change to 320x240"){ 
      jQuery(this).html("Change to 640x480"); 
      jQuery('#player').css({'width':'320px', 'height':'240px', 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'}); 
     } 
     else{ 
      jQuery(this).html("Change to 320x240"); 
      jQuery('#player').css({'width':'640px', 'height':'480px', 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'}); 

     } 
    }); 

jQuery("#webcam-table").on("click", "tr.videorow > td", function(e) { 
     var parser = document.createElement('a'); 
     parser.href = theUrl; 
      //the right host, therefore it is an image 
     if (parser.hostname == "myhost.com") 
     { 
      jQuery("#player").css("background", "url('" + theUrl + "')"); 
     } 
     else 
     { 
      flowplayer("player", "js/flowplayer/flowplayer-3.2.12.swf", { 
       clip: { 
        url: theUrl, 
        provider: 'rtmp' 
       }, 
       plugins: { 
        rtmp: { 
         url: "js/flowplayer/flowplayer.rtmp-3.2.10.swf", 
         netConnectionUrl: 'rtmp://'+window.location.host+'/recordings' 
        } 
       } 
      }); 
     } 
}); 

div 크기에 맞추어 재생을 계속할 수있는 플레이어에서 열리기 때문에 특별한 고려 사항이없는 동영상의 경우 효과적입니다. 이미지가 다릅니다. 이미지를 클릭하면 크기가 원래 배경으로 재설정됩니다. 그 코드가 정확히 무엇인지 알지만 동영상에 적합했습니다.

나는이 작품을 비디오와 이미지 모두에 대해 어떻게 만들 수 있는지 알아 내려고 애 쓰고 있습니다. 다음은 적어도 이미지에 대한 동작을 보여주는 fiddle입니다.

#toggleres 클릭 이벤트가 있어야합니다. 누군가는 테이블의 행을 클릭하지 않고 배경 이미지의 크기를 토글 할 수 있어야합니다. 즉 이미지 나 비디오를 클릭하지 않으면 주 배경 자리 표시 자 이미지가 있어야합니다. 배경 이미지 (320 × 240)을 나타낸다

1. :
   예상되는 동작을 요약한다. 누군가가 변경 사항 해결 링크를 클릭하면 (640x480)로 확장됩니다. 현재 아래 코드로 작업 중입니다.
2. 누군가가 테이블의 행 (동영상 또는 이미지 일 수 있음)을 클릭하면 배경 이미지 (320x240 또는 640x480) - 현재 아래 코드로 작업 중입니다.
3. 누군가 이미지를 변경하면 테이블의 다른 행을 클릭하면 배경 이미지가 변경됩니다. 그러나 대부분이 동영상을 재생하면 이미지가있는 다른 행을 클릭 할 수 없으면 플레이어를 재설정/제거하지 않습니다.
4. 화면에 이미지 또는 비디오가있는 경우 (테이블 행을 클릭 한 후) 언제든지 변경 해상도를 클릭하여 비디오를 만들 수 있습니다 또는 더 크거나 작은 이미지 - 항상 ba로 재설정되므로 작동하지 않습니다. ckground 이미지 (바이올렛이 이것을 보여줍니다)

Answer 1

, 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)' 부분을 자바 스크립트에서 제거해야하는 것처럼 보입니다 (나타나는 곳). 이것은 요약의 요점 4에 대한 속임수를 수행해야합니다. 하지만 포인트 3에 대해서는 잘 모르겠다 - 플레이어를 페이지에 추가하는 코드를보고 제거하는 방법을 결정해야한다.