세이박스

JQueryMobile 에서 backround image 적용하기

웹프로그램

<style type="text/css">
.ui-content { position: fixed; width: 100% !important; height: 100% !important; background: url('test.jpg') } //data-role content 영역의 class에
.ui-btn-inner { background: none; } //버튼 테두리 투명하게 처리
</style>


기본 JQueryMobile을 변경하고 싶을땐


크롬에서 F12 눌러서 Element 메뉴에서 적용하고자 하는 영역의 class 이름을 알아 내어서 CSS로 컨트롤 해야함.


javascript에서 미리 이미지 로드하기

웹프로그램
롤오브 메뉴 이미지 또는 이미지 슬라이드의 경우 이미지가 자주 바뀌어야 하는데 이때 매번 서버에서 이미지를 가져오게 하면 트래픽이 많이 발생한다. 또한 모바일의 경우 이동중 인터넷 상태가 않좋으면 이미지 액박이 생기기도 하는데 이때 이미지를 미리 사용자PC에 로드한 다음 불러오는 방법을 이용시 인터넷이 끊어 져도 이미지는 계속 보이게 된다.
 

<script language="javascript">
function init()
{
 img1 = new Image;
 img1.src = "images/img1.jpg";
 img2 = new Image;
 img2.src = "images/img2.jpg";

 document.getElementById("num1").src = img1.src;
 document.getElementById("num2").src = img2.src;
}
</script>

<body onload="javascript:init();">
<img id="num1"><br>
<img id="num2"><br>
<body>
 

 

자바스크립트를 이용해서 여러장의 이미지 롤링하기

웹프로그램
쇼핑몰 사이트 메인 페이지에 여러 이미지들을 롤링해서 지정된 시간(초) 간격으로 바뀌도록 하는 기능을 만들어 보고자 합니다.

먼저 예제 이미지는 총 4장 입니다.
현재 운영중인 달인쿠폰(http://dalincoupon.com)을 예를 들어 보겠습니다.

1. 이미지 넘버
이미지 넘버는 이미지 상단에 현재 몇번째 이미지 인지 표시해주는 버튼 이미지로써 클릭시 바로 원하는 이미지로 이동할수 있습니다.

<!-- 이미지 넘버링 -->
<div style="Z-INDEX: 1; LEFT: 0px; WIDTH: 0px; POSITION: relative; TOP: 0px; HEIGHT: 0px; display:block;">
 <div style="Z-INDEX: 1; LEFT: 800px; WIDTH: 135px; POSITION: absolute; TOP: 15px; HEIGHT: 0px">
  <table border=0 cellpadding=0 cellspacing=0 align=right>
   <tr>
    <!-- 이미지 넘버 1 -->
    <td width=20><a href="#none"><img id='num_1' src="http://dalincoupon.com/images/group/ico1_on_.gif" border=0 onclick="clickImg(1,'/mall/updir/products/99fed6c0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 2 -->
    <td width=20><a href="#none"><img id='num_2' src="http://dalincoupon.com/images/group/ico2_off_.gif" border=0 onclick="clickImg(2,'http://dalincoupon.com/mall/updir/products/1239dae0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 3 -->
    <td width=20><a href="#none"><img id='num_3' src="http://dalincoupon.com/images/group/ico3_off_.gif" border=0 onclick="clickImg(3,'http://dalincoupon.com/mall/updir/products/76acc690.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 4 -->
    <td width=20><a href="#none"><img id='num_4' src="http://dalincoupon.com/images/group/ico4_off_.gif" border=0 onclick="clickImg(4,'http://dalincoupon.com/mall/updir/products/94a63cd0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이후 이미지를 추가 하셔도 됩니다 -->
   </tr>
  </table>
 </div>
</div>
<!-- //이미지 넘버링 -->

이미지를 추가 할때 이미지 넘버도 같이 추가 하셔야 합니다.
"num_4" , clickImg(4,'이미지경로') 부분을 변경하시면 됩니다.


2. 대표 이미지 출력
기본적으로 출력된 첫번째 이미지를 적용 합니다.
img 태그에 id값을 "mainImage"로 적용합니다.

<!--상품 메인이미지-->
<img id="mainImage" src="http://dalincoupon.com/mall/updir/products/99fed6c0.jpg" width="950">




3. 자바스크립트 소스

<script type="text/javascript">
<!--
var numIdx = 1; //첫 이미지 배열 번호
var nextimg = 2; //다음 바뀔 이미지 배열 번호
var timerchecker = null; //롤링 시간을 초기화 하기 위한 선언

var imgs = new Array(); //이미지 URL을 배열로 담아두기
imgs[1] = "http://dalincoupon.com/mall/updir/products/99fed6c0.jpg";
imgs[2] = "http://dalincoupon.com/mall/updir/products/1239dae0.jpg";
imgs[3] = "http://dalincoupon.com/mall/updir/products/76acc690.jpg";
imgs[4] = "http://dalincoupon.com/mall/updir/products/94a63cd0.jpg";

/* 이미지 넘버를 클릭시 호출하는 함수 */
function clickImg(idx,img) {
 clearTimeout(timerchecker); //시간 초기화
 btnNew = document.getElementById("num_"+idx);
 btnOld = document.getElementById("num_"+this.numIdx);
 btnOld.src = btnOld.src.replace("_on_","_off_");
 btnNew.src = btnNew.src.replace("_off_","_on_");
 document.getElementById("mainImage").src = img;
 this.numIdx = idx;
 if(nextimg < 4) {
  nextimg += 1; //마지막 이미지가 아니면 다음 +1 이미지로 이동
 } else {
  nextimg = 1; //이미지가 마지막 장이면 다음 이미지는 첫장으로 이동
 }
 /* 이미지 롤링 호출, 이용자가 클릭해서 보는 이미지 이므로 20초 지연 */
 timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",20000);
}

/* 이미지 롤링 함수 */
function changeImg(idx,img) {
 clearTimeout(timerchecker);
 btnNew = document.getElementById("num_"+idx);
 btnOld = document.getElementById("num_"+this.numIdx);
 btnOld.src = btnOld.src.replace("_on_","_off_");
 btnNew.src = btnNew.src.replace("_off_","_on_");
 document.getElementById("mainImage").src = img;
 this.numIdx = idx;
 if(nextimg < 4) {
  nextimg += 1;
 } else {
  nextimg = 1;
 }
 timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",5000);
}
timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",5000);
//-->
</script>

자바스크립트 내부에 주석을 달아 놨지만 다시 설명을 덧붙이겠습니다.
먼저 페이지 로딩시 지정한 이미지를 배열로 담습니다.
var imgs = new Array();

그리고, timerchecker 라는 변수에 window.setTimeout(); 함수를 담습니다.
이때 적용되는 함수로는 5000 -> 5초 지연후 changeImg() 함수를 호출 됩니다.
이때 nextimg값을 전달 하므로 처음엔 changeImg(2,http://dalincoupon.com/mall/updir/products/1239dae0.jpg);
두번째 이미지 정보를 changeImg() 함수에 전달합니다.

이미지 롤링 함수에서는 전달 받은 idx와 img 값을 이용해서 다음 이미지로 변경 그리고 이미지 넘버역시 함께 변경 합니다.

만약 사용자가 이미지 넘버를 클릭시엔 이용자가 원하는 이미지를 바로 볼수 있도록 clickImg() 함수를 호출합니다.
해당 함수 역시 changeImg() 함수와 동일하지만 단, 지연시간을 20000 -> 20초로 지정하여 사진을 볼수 있는 시간을 지연해 줍니다.
20초가 지나면 다시 원래되로 changeImg() 함수가 5초 간격으로 반복 처리 됩니다.


여기서 한가지 더 응용한다면 이미지 전환할때 슬라이드 효과를 적용할수도 있지만 그럴경우 소스가 매우 복잡해져서 이정도록 적용해 봤습니다.
위 소스를 그대로 적용시 달인쿠폰 상품 이미지가 롤링 되는것을 보실 수 있을겁니다.
달인쿠폰 반값 할인 사이트 참조하세요!
김병만의 달인쿠폰 : http://dalincoupon.com


 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

[JSP] how to upload image using JSP

웹프로그램
This is the form html
<form name="uploadForm" action="upload.jsp" enctype="multipart/form-data" method="post">
  <input type="file" name="file"/>
  <input TYPE=Button name='Upload' Value='Upload' onClick="uploadForm.Upload.value='Uploading...';document.uploadForm.action='upload.jsp';document.uploadForm.submit()">
</form>


Here is upload.jsp
<%
 
    response.setContentType("text/html");
    response.setHeader("Cache-control","no-cache");
 
    String err = "";
 
    String lastFileName = "";
 
    String contentType = request.getContentType();
    String boundary = "";
    final int BOUNDARY_WORD_SIZE = "boundary=".length();
    if(contentType == null || !contentType.startsWith("multipart/form-data")) {
      err = "Ilegal ENCTYPE : must be multipart/form-data\n";
      err += "ENCTYPE set = " + contentType;
    }else{
      boundary = contentType.substring(contentType.indexOf("boundary=") + BOUNDARY_WORD_SIZE);
      boundary = "--" + boundary;
      try {
        javax.servlet.ServletInputStream sis = request.getInputStream();
        byte[] b = new byte[1024];
        int x=0;
        int state=0;
        String name=null,fileName=null,contentType2=null;
        java.io.FileOutputStream buffer = null;
        while((x=sis.readLine(b,0,1024))>-1) {
          String s = new String(b,0,x);
          if(s.startsWith(boundary)) {
            state = 0;
            //out.println("name="+name+"<br>");
            //out.println(fileName+"<br>");
 
            name = null;
            contentType2 = null;
            fileName = null;
 
 
          }else if(s.startsWith("Content-Disposition") && state==0) {
            state = 1;
            if(s.indexOf("filename=") == -1)
              name = s.substring(s.indexOf("name=") + "name=".length(),s.length()-2);
            else {
              name = s.substring(s.indexOf("name=") + "name=".length(),s.lastIndexOf(";"));
              fileName = s.substring(s.indexOf("filename=") + "filename=".length(),s.length()-2);
              if(fileName.equals("\"\"")) {
                fileName = null;
              }else {
                String userAgent = request.getHeader("User-Agent");
                String userSeparator="/";  // default
                if (userAgent.indexOf("Windows")!=-1)
                  userSeparator="\\";
                if (userAgent.indexOf("Linux")!=-1)
                  userSeparator="/";
                fileName = fileName.substring(fileName.lastIndexOf(userSeparator)+1,fileName.length()-1);
                if(fileName.startsWith( "\""))
                  fileName = fileName.substring( 1);
              }
            }
            name = name.substring(1,name.length()-1);
            if (name.equals("file")) {
              if (buffer!=null)
                buffer.close();
              lastFileName = fileName;
              buffer = new java.io.FileOutputStream("/Program Files/Apache Group/Tomcat 4.1/webapps/jspcart/images/"+fileName);
            }
          }else if(s.startsWith("Content-Type") && state==1) {
            state = 2;
            contentType2 = s.substring(s.indexOf(":")+2,s.length()-2);
          }else if(s.equals("\r\n") && state != 3) {
            state = 3;
          }else {
            if (name.equals("file"))
              buffer.write(b,0,x);
          }
        }
        sis.close();
        buffer.close();
      }catch(java.io.IOException e) {
        err = e.toString();
      }
    }
    boolean ok = err.equals("");
    if(!ok) {
      out.println(err);
    }else{
    %>
<SCRIPT language="javascript">
  history.back(1)
  alert('Uploaded <%=lastFileName%>');
  window.location.reload(false)
</SCRIPT>
    <%
    }
    out.println("done");
%>