슬라이드 쇼 애니메이션 가장 쉽게 구현 가능한 플러그인 


안녕하세요.
고코더 입니다. 


슬라드 쇼를 하는 기능에 플러그인은 참 많습니다.
많은 개발자들이 저마다에 방식으로
만들어 놓았습니다.


 1. 그런데 이번에 소개할 슬라이드 쇼 HTML은
가장 간단하게 구현 가능한 플러그인을 소개해드립니다. 
바로 COIN SLIDER 입니다.


 2. 얼마나 간단한지
제가 예제를 한번 만들어 보았습니다.

아래 코드를 참조해주세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coin-slider/1.0.0/coin-slider.js"></script>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/coin-slider/1.0.0/coin-slider-styles.css" type="text/css" />
 
<script type="text/javascript">
    $(document).ready(function() {
        coinslider({width:260,height:146,navigation:true,hoverPause:true,delay:1500,effect:'rain',sDelay:30});
    });
 
</script>
 
<Body>
 
<div id='coin-slider' >
    <a href="이미지 링크" target="_blank">
        <img src='이미지 주소' >
        <span>
        
        </span>
    </a>
    <a href="이미지링크" target="_blank">
        <img src='이미지 주소' >
        <span>
        
        </span>
    </a>
</div>
</body>
cs

 3. 이렇게만 하면 퀄리티 높은 슬라이드 애니메이션 
HTML이 완성 됩니다.
결과물은 제 블로그 오른쪽 아래에
파워블로거 활동이 슬라이드가 자동으로 되는데요
이 플러그인을 활용여 개발하였습니다.



 4. 그리고 해당 플러그인 안에 넣을수 있는
옵션 사항으로는 
아래를 참조해주세요.
$.fn.coinslider.defaults = {
    width: 565, // width of slider panel
    height: 290, // height of slider panel
    spw: 7, // squares per width
    sph: 5, // squares per height
    delay: 3000, // delay between images in ms
    sDelay: 30, // delay beetwen squares in ms
    opacity: 0.7, // opacity of title and navigation
    titleSpeed: 500, // speed of title appereance in ms
    effect: '', // random, swirl, rain, straight
    links : true, // show images as links
    hoverPause: true, // pause on hover
    prevText: 'prev',
    nextText: 'next',
    navigation: true, // show/hide prev, next and buttons
    showNavigationPrevNext: true,
    showNavigationButtons: true,
    navigationPrevNextAlwaysShown: false
};


마무리


블로그에 쓰기 딱 좋은 슬라이드 html 플러그인 


댓글을 달아 주세요


제이쿼리 이미지 드래그 드랍, 사이즈 조절


안녕하세요.
고코더 입니다.


jQuery UI를 쓸때 가장 많이 활용하게 되는
기능이 두가지가 있습니다.
바로 이미지 드래그와 리사이징 입니다. 

레이어 팝업을 만들거나
사용자에게 크기를 조절하게 
편의를 제공 하는 기능은 많이 씁니다.

그래서 이번 시간에
제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다.

1. 아래 소스를 웹사이트에서 실행해보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('#GoCoderImg1').resizable();        
            $('#GoCoderImg2').draggable();        
        });
    </script>
</head>
<body>
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg1">
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg2">
</body>
</html>
cs

gocoder_resizable_draggable.html


 2. 하나는 사이즈 조절이 가능하고
다른 하나는 드래그 드랍으로 이동이 가능 합니다. 



마무리


jQuery 덕분에 많은게 가능해졌네요


댓글을 달아 주세요


단독 .js 사용시 제이쿼리 사용법 


안녕하세요.
고코더 입니다.

.js는 자바스크립트 파일 확장자 입니다.
우리는 흔히
<script>를 열어서 안에 자바스크립트를 작성합니다. 

하지만 .JS 파일에서는 <script>를 열지 않고
각종 자바스크립트를 코딩 할 수 있습니다.

그런데 js안에서 jquery를 쓰고 싶다면 어떻게 할까요?

첫 번째는
해당 JS파일이 꼭 jquery를 참조해야 한다고 명시하면 됩니다. 하지만 이 블로그를 찾아오신 분들에게 원하는 대답은 아닙니다. 

두 번째로는 
제이쿼리를 head에 로드 하는 방식인데
이 방식도 시도 해보신거 같네요

세 번째로는
만약 .js 로 단독으로 사용한다면 
꼭 jquery를 사용해야 한다면 저 같은 경우는
.js 파일 안에 jquery 소스를 복사해서 통채로 복사해 넣습니다.

방대한 jquery min 소스를 복사해서 



원하는 js안에 붙혀넣고 jquery를 사용하세요.


이런식으로 하시면
jquery 코드를 사용하여
js 코딩을 하실 수 있습니다.


마무리


js 개발이라면
표준 자바스크립트로 만드시는게 더 좋아 보입니다.



댓글을 달아 주세요



제이쿼리 $ 대신 다른걸로 선언하기 


오늘은 jQuery의 예약어를 바꾸는 방법을 알아보겠습니다.


예약어 - 시스템에서 미리 준비해놓은 명명규칙



jQuery의 선언은 아시다 시피
$ , jQuery 두가지가 예약어로 되어 있습니다.
▼아래 예제를 실행하면 
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
 
    jQuery( document ).ready(function() {
        alert('jQuery');
    });
 
    $(document).ready(function() {
        alert('$');
    });
 
</script>
cs


▼화면과 같은 결과가 보입니다.



그런데 지금은 아무도 안쓰는 프로토타입도 예약어로 $가 되어 있습니다. 
함께 쓰면 상당히 혼란스럽겠죠


그래서 jQuery에는 선언 에약어를 바꿀 수 있는 방법을 마련해났습니다.

▼ 아래 소스를 보니 goCoder 라고 선언 예약어를 변경하였습니다.
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
 
    var goCoder = $.noConflict();    //예약어를 원하는 명명으로 변경할 수 있다.
 
    goCoder( document ).ready(function() {
        alert(goCoder);
    });
 
</script>
cs

▼ 웹에서 실행해보니 $->goCoder로 변경되어 적용 되어 있습니다.






마무리


$ 라는 예약어가 존재하면 jQuery로 선언해서 쓰는게 좋은거 같습니다.


댓글을 달아 주세요



jquery QRcode


오늘은 QR코드를 만들어 볼려고 합니다. 바코드 자체도 훌륭하지만 보통 숫자만 쓸 수 있고
영어까지 포함한 바코드 체계를 쓰면 양 옆으로 너무 길어지는 형상이 있습니다.
그래서 나온게 3차원 바코드 QR코드죠 7089글자가 인식 가능하니 사실상
현재로는 가능한 충분한 데이터를 그 작은 네모안에 표현할 수 있습니다. 



그래서 오늘은 QR코드를 jquery로 만드는 방법을 알아보려고 합니다.

▼개발자 사이트는 아래와 같습니다.

우리 익스프레스 강의를 들어온 개발자 분들에게
간단한 예제릴 만들어 봤습니다.

▼ 아래 파일을 모두 다운로드 해서 gocoder_qrcode.html를 실행시켜보면 됩니다.

▼ 소스는 아래와 같습니다. qrcode()라는 놈을 잘 활용하면 될거 같습니다. 

<html>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.js"></script>
<script type="text/javascript" src="qrcode.js"></script>

<div id="gcDiv"></div>

<script>
    jQuery("#gcDiv").qrcode({   //qrcode 시작
        render "table",      //table, canvas 형식 두 종류가 있다. 
        width 100,            //넓이 조절
        height 100,           //높이 조절
        text   "http://gocoder.tistory.com/"     //QR코드에 실릴 문자열
    });
</script>

</body>
</html>

▼ 결과물은 아래와 같습니다.






마무리


QR코드는 정말 혁명이 아닌가 싶습니다.


댓글을 달아 주세요