Top

[jquery] 이미지 , 동영상 자동 리사이징! | Web-Programing
김경훈 (admin) | Editor | 2013/04/17 16:08:33 | 조회:7056

이미지 자동 리사이징

  

  1.   function imgProportion($targetWidth, $targetHeight) 
  2. { 
  3. var DeviceWidth = parseInt($(window).width()-15); //화면의 가로 사이즈
  4. var a1 = DeviceWidth * $targetHeight; //이미지 세로사이즈 계산식  
  5. var newHeight = (a1 / $targetWidth); //이미지 세로사이즈 계산식  
  6. var rtnSize = new Array((DeviceWidth), newHeight);   //리사이징 된 이미지 사이즈 리턴
  7.  
  8. return rtnSize; 
  9. }

  11. $("img", main).each(function() //이미지를 FIND.
  12. {
  13. var $this = $(this); //선택자를 지정.  
  14. var $thisWidth = parseInt($this.css("width")); //선택된 이미지의 가로사이즈.
  15. var $thisHeight = parseInt($this.css("height")); //선택된 이미지의 세로사이즈.  
  16. var clientWidth = parseInt($(window).width()); //화면의 가로사이즈.
  18. if($thisWidth > clientWidth) //이미지 가로가 화면의 가로보다 길다면..
  19. {
  20. var rtn = imgProportion($thisWidth, $thisHeight);
  21. var newWidth = rtn[0]; //Return 된 배열의 0번째 값.  
  22. var newHeight = rtn[1];   //Return 된 배열의 1번째 값.
  23.  
  24. $this.css({  //선택된 이미지에 CSS를 변경.
  25.  
  26. "width"  : newWidth,  
  27. "height" : newHeight
  28. })
  29. } 
  30. });
 

동영상 자동 리사이징

 

  1. // 동영상을 공유한 사이트의 이름을 배열로 저장한다.
  2. // 새로운 사이트나 없어진 사이트가 있으면 그때 그때 업데이트 해주세요~

  4. var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], iframe[src^='http://www.youtube-nocookie.com'], iframe[src^='http://serviceapi.nmv.naver.com'],  iframe[src^='http://serviceapi.rmcnmv.naver.com'], embed[src^='http://www.youtube.com'], embed[src^='http://serviceapi.nmv.naver.com'], iframe[src^='https://www.youtube.com'], iframe[src^='https://www.youtube-nocookie.com'], iframe[src^='http://flvs.daum.net'], iframe[src^='http://play.pullbbang.com'], iframe[src^='http://www.gamespot.com'], iframe[src^='http://sbsplayer.sbs.co.kr/'], iframe[src^='http://www.microsoft.com'], iframe[src^='http://dotsub.com'], iframe[src^='http://www.travelro.co.kr'], embed[src^='http://v.egloos.com/v.sk/'],  embed[src^='http://videofarm.daum.net/']  ,embed[src^='http://api.v.daum.net/'], embed[src^='http://dory.mncast.com/'], embed[src^='http://play.mgoon.com/Video/'], embed[src^='http://doc.mgoon.com/'], embed[src^='http://flvr.pandora.tv/flv2pan/'], embed[src^='http://imgcdn.pandora.tv/'], embed[src^='http://live.afreeca.com'], embed[src^='http://afbbs.afreeca.com'], embed[src^='http://w.blogdoc.nate.com'], embed[src^='http://blogdoc.nate.com'], embed[src^='http://www.musicshake.com/'], embed[src^='http://static.plaync.co.kr'], iframe[src^='http://www.travelro.co.kr'], iframe[src^='http://dotsub.com']"),
  6.  $fluidEl = $("body"); // 자동리사이징을 적용할 영역의 ID값
  8. $allVideos.each(function() 
  9. {
  10.  $(this)
  11.    .data('aspectRatio', this.height / this.width)
  12.    // 기존 높,넓 삭제
  13.    .removeAttr('height')
  14.    .removeAttr('width');
  16. });
  18. $(window).resize(function() 
  19. {
  20.  var newWidth = $fluidEl.width();
  22.  $allVideos.each(function() 
  23.  {
  24.    var $el = $(this);
  25.    $el
  26.      .width('100%') // 원하는데로~~
  27.      .height('260'); // 원하는데로~~
  28.  });
  29. }).resize();
 


이상! 입니다. 

모바일은 물론 PC버전에서도 적용 가능 합니다.


- PC버전!

- 모바일버전!
공유하기
공유하기
0
0
0


댓글을 불러오는 중입니다.
▲ 이전글 [javascript] IE에서 쿠키 생성이 안되는 현상 ( iframe ) 신장미 (shinjm) 2013-04-30 17:46:37
▼ 다음글 [HTML] .slideDown() 김경훈 (admin) 2013-04-04 10:57:58
페이지 로딩이 끝나면 해당 댓글로 이동 합니다.