유저가 글을 작성하거나 예를 들어

블러그에 포스팅을 했으면 이미지 같은 경우 아래와 같이 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>