그냥 개발자 블로그

많은 양의 이미지를 스클로의 위치에 따라 차례로 로딩 시키는 플러그인 - 트래픽 및 사용자 홈페이지 속도 개선 가능 1. 제이쿼리가 필요합니다. 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 동작 시키고자 하는 img 태그에 loadsrc 요소를 추가하여 불러올 이미지 경로를 입력해 줍니다. 4. html 페이지 로딩이 완료되는 시점에 highImageLoader 가 동작할 수 있도록 해줍니다. 5. 한번에 로딩할 이미지 개수를 설정할 수 있습니다. 6. 다음 이미지를 로딩시킬 스크롤 위치를 디테일하게 조절할 수 있습니다. [문의하기] copyright ⓒ 2018. 워크식스

모바일웹에서 가로사이즈를 초과하는 메뉴가 있을 경우 메뉴에 슬라이드 기능을 추가하면 유용 합니다. touchMoveMenu.js 플러그인은 워크식스에서 다운로드 받을수 있으며, 기본 설치 방법은 아래와 같습니다. 다이얼미싱 전자미싱 이노비스 퀼트미싱 자수미싱 오버록미싱 컴퓨터자수기 스캔앤컷 기타 1. 제이쿼리 설치가 필요 합니다. 다이얼미싱 전자미싱 이노비스 퀼트미싱 자수미싱 오버록미싱 컴퓨터자수기 스캔앤컷 기타 2. 다운로드 받은 플러그인을 연결합니다.( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 다이얼미싱 전자미싱 이노비스 퀼트미싱 자수미싱 오버록미싱 컴퓨터자수기 스캔앤컷 기타 3. 기본적인 스타일을 작성 합니다. 다이얼미싱 전자미싱 이노비스 퀼트미싱 자수미싱 오버록미싱 컴퓨터..

페이드인-아웃 되는 배너를 넣고 싶을때 jquery 소스를 일일이 짜지 말고 플레이그라운드에서 만든 플러그인을 이용하시면 편리해요. 위 영상과 같은 효과를 낼수 있어요. 반응형으로 만들어진 사이트에서도 이용이 가능해하고요. 이미지경로를 설정만으로 자동으로 동작하고, 이미지가 바뀌는 시점도 시간으로 컨트롤 할 수 있어요. 여기에서 플러그인을 다운로드 할 수 있으니 다운로드 하셔서 따라 해보세요.플러그인 이름은 bgSlideBanner.js 에요.아! css 스타일은 작성 원하시는대로 해도 상관 없어서 따로 작성 안해 놨으니 참고하세요. [버전] 1.0 버전최초 작성 [사용법] The Association of American State Offices In Korea 1. 다운로드 받은 플러그인을 연결하세요..

제 홈페이지 워크식스에서는 제가 만든 jquery(제이쿼리) 플러그인들을 공유하고 있는데요. jquery의 사용법을 몰라 어찌할바를 모르는분들이 있어서 이와 같은 글을 작성하게 되었어요. 간단하게 jquery 플러그인을 사용할수 있는 방법만 안내할게요. 일반적으로 웹 페이지는 다음과 같은 문서 구조를 가지고 있으며 jquery(제이쿼리)를 사용하기 위한 최소한의 조건을 작성해놓은 상태에요. 자세히 하나씩 살펴볼까요? jquery를 사용하기위해서는 jquery.js 또는 jquery.min.js 라는 문서가 필요해요. http://jquery.com에서 다운로드 받아 자신의 서버에 업로드 할수 있는데요. 신규버전이 나올때마다 문서를 교체해서 업그레이드해줘야 하는 불편하기 때문에 CDN 이라는걸 이용해요. ..

워크식스 홈페이지에서 free라고 이미지를 무료로 제공하는 사이트를 운영중인데요. 이미지 무료 제공 페이지를 만들면서 이미지를 벽돌과 같이 쌓으면서도 창사이즈를 줄이면 형태는 그대로 유지되는걸 원해서 해외 사이트를 돌아다니면서 제이쿼리(jquery) 플러그인을 찾아봤지만 제가 생각하는 그런 형태의 제이쿼리(jquery) 플러그인은 없더라고요. 비슷한것도 플러그인의 동작속도도 느렸고요. 그래서 불필요한 기능은 죄다 빼고 속도를 높이면서 창사이즈를 줄여도 형태가 그대로 유지되는 제이쿼리(jquery) 플러그인을 직접 만들었죠. 그리하여 탄생한것이 brick.js 플러그인이에요 물론 워크식스 이미지 무료 공유사이트에 brick.js 플러그인이 쓰였고요. 편이를 생각해서 스타일도 알아서 척척 만들어주도록 만들었..

2016/08/02 - [Jquery] - pgpopup.js - 잠깐 나타났다 사라지는 팝업 플러그인 [소개] 토스트팝업은 주로 알림이나 경고를 나타낼때 모바일에서 많이 사용됩니다. [플러그인명] pgpopup.js [버전] 2.0최초작성 [사용법] 1. 여기 홈페이지에서 복사된 내용을 붙여넣기 합니다. 2. body에 위와 같이 pgpopup을 실행해 줍니다. [예제] 일반적인 형태의 layer와 아래위 또는 위아래로 나타났다 사라지는 slide 형태의 팝업 예제입니다. 소스를 보시면 슬라이드의 경우 direction 이라는 항목이 하나더 있는데 up과 down 두가지 속성이 있으며 up은 화면에 위에서 나타나고 down은 화면에 아래에서 나타납니다. [옵션설명]

오늘은 일단 동영상부터 보실까요? ㅎㅎ 아! 위 영상은 네이버가 아니에요. 네이버와 같이 비슷한 환경을 만든거에요 ㅋㅋ 동영상에서와 같이 각종 포털 사이트에서 작은배너를 큰배너로 확장시켜주는 영역들이 존재하는데요. 수요가 늘고 있어서 간단하게 제이쿼리(jquery) 플러그인으로 만들어봤어요. 플러그인은 홈페이지에서 다운받아 이용해보실수 있게 해놨어요. 이름은 bigbanner.js 라고 찾으시면 나올거에요 ㅎㅎ 그렇다면 이제 사용법에 대해서 한번 볼게요. 먼저 위과 같이 html을 작성해주셔야 하는데요. id는 어떤것이든 원하는것로 해주시고요. 첫번째 a태그 안에는 작은배너 이미지를 넣어주시고요. areabig 클래스 안에는 큰 배너이미지 또는 별도로 html 내용을 넣어주세요. CSS는 작은배너 사이즈..

2016/08/02 - [Jquery] - dropdownbanner.js - 쇼핑몰 상단배너 플러그인 [소개] 쇼핑몰 최상단에 위치하는 드롭다운배너를 만들어 줍니다. [플러그인명] dropdownbanner.js [버전] 1.0최초작성 [사용법] 오늘은 더이상 보지 않기닫기 1. 예제 html을 작성 합니다. 오늘은 더이상 보지 않기닫기 2. 예제 스타일을 작성해 줍니다. 이때 높이는 전체배너의 높이를 지정해 줍니다. 오늘은 더이상 보지 않기닫기 3. 여기 홈페이지에서 제공하는 cdn을 복사하여 붙여 넣습니다. 오늘은 더이상 보지 않기닫기 4. document가 로딩이 완료되면 원하는 배너의 아이디를 선택자로 dropdwonbanner를 실행해 줍니다. [옵션설명]