유저가 글을 작성하거나 예를 들어
블러그에 포스팅을 했으면 이미지 같은 경우 아래와 같이 pc 와 모바일에 맞게 미디어 쿼리로 조정을 할 수 있다.
@media all and (max-width: 768px) { body { background-color: red; } h1 { color: green; } } @media all and (min-width: 768px) and (max-width: 1024px) { body { background-color: black; } h1 { color: yellow; } } @media all and (min-width: 1025px) { body { background-color: blue; } h1 { color: white; } }
그러나 다음과 같은 이미지 슬라이드 처리는 jquery 를 사용해야 모바일 감지 및 화면 사이즈를 감지해서 처리를 해야 한다.
보통 이미지에 링크를 걸면 링크된 원본 이미지로 보여주거나 연결된 사이트로 가는데 이것을 슬라이드 처리를 한다.
jquery 로 윈도창 크기 변화 감지 및 모바일 환경 감지 후 이미지 사이즈를 조정해서 슬라드 쇼로 만들어야 한다.
창크기 변화 감지하는 코드 이다.
$(window).resize(function() { });
모바일 환경이지 확인하는 코드이다.
function isMobile(){ var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) { return true; }else{ return false; } }
전체 코드이다. 창크기를 실시간으로 감지를 한다. 반응형에 맞게 조절 할 수 있다.
여기서는 창크기 변화 감지 후 모바일 환경 까지 확인한다.
모바일 환경이면 300 이하로 사이즈를 축소 시켜준다. 높이는 넒이에 맞게 조절한다.
<script type="text/javascript"> $(document).ready(function() { cssImg();//이미지 슬라이더를 위한 내용값 변경 $(window).resize(function() { //창크기 변화 감지 imageSizeChange(); //창 크기가 변할 때만다 imageSizeChnage 수를 호출합니다. }); }); function cssImg(){ var selfImg=$("#post-data img"); $(selfImg).parents("a").closest("p").attr("class","preview"); $(selfImg).parents("a").attr("data-gallery", ""); } function isMobile(){ var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) { return true; }else{ return false; } } function imageSizeChange(){ if(isMobile()){ // 모 //여기에서 사이즈를 다시 계산합니다. var windowWidth=$(window).width(); if(windowWidth < 400){ //창 가로 크기가 500 미만일 경우 $("#post-data").css("max-width", "320"); //컨테츠 여기서는 글 내용 영력입니다. var selfImg=$("#post-data img"); //현재 이미지가 가지고 있는 넓이값을 가져옵니다. var width=$(selfImg).css("width"); var height=$(selfImg).css("height"); var ratio=1; var maxWidth = 300; // 넓이를 300으로 합니다. var maxHeight =200; var ratio = 0; // Used for aspect ratio if(height > maxHeight){ ratio = maxWidth/width; $(selfImg).css("width", maxWidth); // 넓이 설정 $(selfImg).css("height", height * ratio); //높이값 설정 height = height * ratio; }else{ ratio = maxWidth/width; $(selfImg).css("width", maxWidth); // 넓이 설정 $(selfImg).css("height", height * ratio); //높이값 설정 } }else{ //창 가로 크기가 500 보다 클 경우 } }else{ } //PC용 페이지 } </script>
현재 여기서는 css 를 다음과 같이 맞춰주었다.
<span class="preview"><a href="/include/images/beautiful/57.jpg" data-gallery=""><img src="/include/images/beautiful/57.jpg"></a></span>
img 부모창 data-gallery 란는 속성을 넣야 하고 a 태그 부모의 class 는 preveiw 로 맞춰줘야 한다.
왜냐하면 이미지 슬라이드 쇼 소스에 http://macaronics.net/include/js/jquery.blueimp-gallery.min.js 소스를 사용 해야 하기때문이다.
또한, 이소스에는 반드시 페이지에 다음과 같은 코드가 작성되어 있어야 한다.
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=""> <!-- 중요 짝수 또는 홀수 로 보여 주기<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">--> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div>
댓글 ( 5)
댓글 남기기