일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 30 | 31 |
- #해피CGI
- 홈페이지
- CGIMALL
- happycgi
- #홈페이지제작
- 웹솔루션
- 솔루션
- #happycgi
- #image
- #cgimall
- #웹솔루션
- php
- #업종별
- #홈페이지
- 홈페이지제작
- #솔루션
- #쇼핑몰
- 해피CGI
- #이미지
- #뉴스
- #jQuery
- javascript
- jquery
- #CSS
- 게시판
- CSS
- 쇼핑몰
- 해피씨지아이
- 사이트제작
- #동영상
- Today
- Total
목록웹프로그램밍 자료실/JAVA 자료 (765)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
인스타그램에 등록해둔 사진을 웹사이트에 출력하기 위한 예제코드 입니다. 우선 인스타그램API를 이용하기 위한 인증키가 필요합니다. 1. https://www.instagram.com 인스타그램에 접속해서 로그인을 합니다. 2. 로그인한후에 http://instagram.pixelunion.net/ 이동해서 인증키를 발급 받습니다. 3. 인증키를 복사해서 instagram.php 의 소스코드내의 자바스크립트 코드의 token 변수에 값을 넣어줍니다. 간단하게 API를 통해서 인스타그램에 등록한 사진을 웹페이지에 출력하는 용도로 작성된 코드라서 더 많은 사진을 가져와서 검색, 페이징 기능들을 달거나 하는 것은 인스타그램에서 제공해주는 API를 활용해서 기능을 구현하는 개발자의 몫이 되겠네요. 인스타그램 AP..
* video.js 소개 - Video.js 는 HTML5 에서 이용이 가능한 웹비디오 플레이어 입니다 HTML5와 플래시 비이오뿐만 아니라 youbube 와 vimeo 를 지원합니다 * 라이센스 - Apache License, Version2.0 * 사용방법 - 플레이어 추출방법은 크게 css, script, 영상추출태그(source) 태그가 주가 되며 샘플코드는 아래와 같습니다 css, js 부분 영상추출부분(HTML5 cdn 서버 이용시) 영상추출부분(swf local 서버 이용시) 주의할점은 동적으로 video.js 를 이용할 경우 인데 동적으로 ajax 나 appendChild 를 사용하여 비디오 태그를 이용할 경우 설정에 문제가 생기지 않도록 데이터 설정 속성을 제거해야합니다 페이지 로드 및 ..
마우스를 이용하여 객체 우측하단을 클릭 및 드래그하여 사이즈를 늘릴 수 있는 resizable jQuery 소스입니다. 하단의 API자료를 클릭하시면 관련 이벤트를 더 많이 보실 수 있습니다. 기본 값, 리사이징 후 효과등을 제어 할 수 있는 methods 도 활용하여 다양한 효과로 이용이 가능합니다. 윈도우의 스티커 메모같은 효과를 이용할 수 있을듯하니 좋네요. 다양한 곳에 활용가능할것같네요
이미지 썸네일을 클릭하면 전체보기 화면으로 이미지가 확대되어 보여지며, 이미지의 원본 크기에 따라 브라우저가 자동인식하여 확대보기 썸네일에 따른 화면이동이 진행됩니다. 가로로 긴 이미지일 경우 원본이미지는 브라우저에 딱 맞게 출력되고, 이동범위는 좌/우 형태로 이동됩니다. 세로로 긴 원본이미지일 경우 확대보기시 아래/위 로 이미지가 이동되어 원본이미지의 형태를 빠짐없이 볼 수 있습니다. 핵심이 되는 소스인 css 와 js 소스를 적용한 상태에서 위와같은 형태의 class 만 선언해주면 작동되며, 페이지 제일 하단에 작동시켜주는 스크립트를 추가해주시면 사용이 가능합니다.
이미지 위에 마우스를 오버하면 이미지를 마치 썸네일 이미지를 생성해서 보여주는 듯한 효과를 jquery 를 통해서 구현한 스크립트입니다. 다운로드 받은 압축파일을 해제해서 index.html 을 웹브라우져로 열어보시면 확인이 가능합니다. 이미지들 위에 마우스를 오버하면 이미지 하단에 캡션이 위로 올라오면서 표시되게 됩니다. 그 과정에서 원본 이미지가 마치 확대되는 효과가 생기는데, 위와 같은 이미지가 슬쩍 확대되어서 보여지면서, 하단에 이미지의 설명 부분이 나타납니다. 비교적 단순한 구조여서 웹사이트의 메뉴나 배너등을 위해서 사용하기는 괜찮을듯 하네요. 출처는 http://www.htmldrive.net/items/show/479/Thumbnail-Effect-With-Zoom-And-Sliding-Ca..
jQuery 플러그인을 이용하여 Blind, Bounce, Clip, Drop, Explode, Fade등 다양한 UI효과를 이용할 수 있습니다. show와 hide 외에도 다양한 포퍼먼스 효과룰 웹에서 이용할 수 있습니다. 관련 소스도 손쉽게 이용할 수 있어서 좋네요. 단조로운 사이트에 다양한 효과를 줄 수 있어서 좋은네요.
위와 같이 예쁜 버튼을 만들수 있는 플러그인 입니다. 질 높은 문서 작성을 위해선 해당 버튼의 플러그인이 필수 같습니다. config.js 에 config.extraPlugins = 'simplebutton'; 를 추가하시고 config.allowedContent = true; 옵션과 config.toolbar = [ ... { name: 'other', items: ['SimpleButton'] } ] 툴바에 활성화 시켜주시면 됩니다.
위와 같이 차트 타입, 높이, 그리고 데이터를 넣으면 위와 같이 차트가 나오는 요긴한 플러그인 입니다. 설치 방법은 파일내에 README.md. 를 읽어보시면 상세히 나와 있습니다.
기본형태에서 시계의 위치 시계침의 모양을 변경할 수 있습니다. 버튼을 눌러서 설정하는 방식과 분을 선택하면 바로 설정되는 방식 두가지가 있습니다. 주요 브라우저에서 정상적으로 작동하며 IE의 경우 9 이상부터 작동합니다.
* icheck Ver1.0.2 - 체크박스와 라디오박스를 손쉽게 다룰수 있는 플러그인입니다 * License - The MIT License (MIT) * 기능 - 터치지원(아이폰, 안드로이드, 블랙베리, 윈도우폰, 아마존 킨들) - 키보드 접근입력(Tab,Spacebar,down 등) - 체크박스 라디오버튼 사용자정의 * 사용법 - 첨부된 zip 파일을 다운로드 받아 웹루트에 압축을 해제합니다 압축을 해제하면 demo폴더에 index.html 파일을 실행하여 결과물 확인 후 코드를 분석합니다 아래와 같이 기본제공되는 css 와 js 를 상단에 선언후 체크박스와 라디오박스를 체크할때의 변화를 살펴볼 수 있게 아래와 같이 코드를 추가합니다 체크박스 체크와 라디오 박스체크의 컬러를 변경도 가능합니다 사용자..