동적 크기 조정 단순 모달 클릭 한 내용에 따라

jQuery/JavaScript가 새로 도입되어 몇 가지 문제가 발생했습니다. 올바른 길을 가르쳐 주시겠습니까?동적 크기 조정 단순 모달 클릭 한 내용에 따라

내 프로젝트에는 이미지 미리보기를 보여주는 일련의 이미지가 있습니다. 이미지 갤러리의 종류.

작은 이미지를 클릭 한 다음 간단한 크기 조정을 통해 전체 크기 이미지를 표시하고 동적으로 크기를 조정하고 애니메이션을 적용 할 수 있기를 원합니다.

간단한 모달을 새로 고치려면 Ajax로이 작업을 수행 할 수 있습니까? 나는 jQuery와 함께 Ajax를 사용하는 방법을 배우고 있으며이를 수행하는 방법은 많이있다.

jQuery를 : 여기에

내가 가진 무엇

$('.col1').find('img.overlay').click(function() { 

       $('#imgpreview').modal({overlayClose:true}); 

       var img = $(this).parent().find('img.shared').attr('src'); 
       var imgW = $(this).parent().find('img.shared').attr('width'); 
       var imgH = $(this).parent().find('img.shared').attr('height'); 

       $('#imgpreview').css('width', imgW); 
       $('#imgpreview').css('height', imgH);     
       $('#imgpreview').find('img').attr('src', img); 

      }); 

    });

HTML : 나는 간단한 모달 내에서 이미지를 표시 할 수 있지만 이미지가 크기 안에 앉아하지 않습니다

  <div id="imgpreview"><img src=""></div> 
         <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img1.jpg"></div> 
         <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img2.jpg"></div> 
         <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img3.jpg"></div> 
         <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img4.png"></div> 
         <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img5.jpg"></div> 
         <div class="col1 bg nmr"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" src="img/uploaded/img6.jpg"></div>

이미지의 테두리와 스타일을 지정할 수 있으므로 중간에 앉지 않아도됩니다.

또 다른 옵션은 각 이미지에 대한 간단한 모달 대화 상자를 만들고 이미지가 데이터베이스에 저장되므로 jQuery를 PHP와 함께 출력하는 것입니다. 그러나 더 좋은 방법이있을 것입니까?

출처

2012-08-04 Dan

html 제발, 모달 비트에 관한 nm. – Dale

질문에 HTML을 추가했습니다. – Dan

먼저, 원본 크기 요소를 "큰 그림"크기 크기로 사용하고 있습니다. 물론 이것이 올바른 치수를 갖지는 못합니다. 나는 "모달"에 대해 아무것도 모릅니다. 그러나 jQuery 플러그인은 대개 자신의 솔루션을 사용하는 데 문제가되지 않습니다. div 태그에 "큰 그림"을 던져서 원하는대로 이동하고 이동할 수 있습니다. 명확하지 않은 경우 해결책을 찾아 보겠습니다. – Dale

모달 플러그인에 대한 단서가 없습니다. 내 경험에 비추어 볼 때 jQuery 플러그인은 거의 가치가 없다. 즉 .... 당신이 시도 할 수 말했다되고

<head> 
    $(document).ready(function() { 
     $('.overlay).click(function() { 
      $('#bigPic).append('<img id="myPic" src="my dynamic source.gif"/>'); 
     });//end click 
    });//end ready 
</head> 

<body> 
    <div id="previews"> 

     //Your posted html here 
    </div> 
    <div id="bigPic"> 

    </div> 
</body>

그런 다음 CSS 같은 것을 할 것이다 : IMG #myPic { 높이 : 100 %; 너비 : 100 %; }

귀하의 질문에 약간 혼란스러워합니다. 귀하의 경우에는 $ ("img.overlay")입니다. 귀하의 필요에 맞게

<div id="bigPic">

을 조정하면 피할 수 있습니다.

출처

2012-08-04 09:53:53 Dale

나는 완전히 확신하지는 않지만 Douglas Crockford는 $ (document) .ready() 위치가 완전히 부적절하다고 말합니다. 나는 그 사람이 말하는 것에 대해 절반을 이해하지 못한다. 그러나 그는 듣기 좋은 사람이다. 건배, 행복 코딩! – Dale

동적 크기 조정 단순 모달 클릭 한 내용에 따라

답변

관련 문제