작업 중인 사이트에서 컬러 이미지를 그레이스케일로 변환하고 마우스 오버시 테두리와 원래 이미지가 보여야 하는 기능이 필요해서 구글링을 해본 결과 쉽게 적용할 수 있는 자바스크립트 소스가 있어 급하게 테스트용으로 코드를 작성해 봤다. 아래 이미지와 같은 기능을 구현하는 것이다. cfile8.uf.194F183C4EB7942E255FBE.js 이미지를 그레이스케일로 변환하는 자바스크립트 소스는 위 grayscale.js 파일을 다운로드 하여 사용하면 된다. 테스트에 사용한 소스코드는 아래와 같다. …
사이트 작업 중에 즐겨찾기/북마크 추가 기능이 필요해서 jQuery 플러그인을 검색해보니 jFav라는 플러그인이 있었다. 간단하게 즐겨찾기/북마크 추가 기능을 구현할 수 있는 플러그인으로 잘 활용하면 유용할 것 같다. ㅎㅎ jFav 다운로드 : http://plugins.jquery.com/project/jFav 사용법은 아래와 같다. <script type=”text/javascript” src=”./js/jFav-1.0.js”></script> 즐겨찾기/북마크 링크는 아래와 같이 지정해준다. <a id=”AddBookmarkButton” href=”http://www.aaa.com/” title=”사이트AAA”><img src=”./bookmark_btn.png” alt=”즐겨찾기 추가” /></a> <script type=”text/javascript”> $(function() { …
다음에 보면 아래와 같은 컨텐츠가 있다. 이 부분은 마우스 스크롤링 때 마지막 데이터가 되면 다음 데이트를 자동으로 불러오는데.. 오늘은 이걸 한번 만들어 보기로 했다. 어디에 쓸지 아직 정하지는 않았지만 말이다. ㅋ 이것을 구현하기 위해 jQuery를 이용했고 데이터는 PHP를 이용해 DB에서 불러오도록 작성을 했다. scroll.php <?php include_once(“./_common.php”); include_once(“$g4[path]/head.sub.php”); ?> <link rel=”stylesheet” href=”<?=$g4[‘path’]?>/scroll_style.css” type=”text/css”> <div id=”wrap”> …
어제 jQuery Plugin Easy Widgets 포스트에서 구상했던 페이지를 간단하게 구현해봤다. 작업은 생각한 것보다 어렵지 않았고 jQuery를 이용했기 때문에 쉽게 구현이 될 수 있었던 것 같다. 이 기능은 쇼핑몰에서 상품 리스트 정렬 순서를 변경할 때 사용하려고 한다. 상품 리스트에서 상품 순서를 변경 후 완료 버튼을 누르면 모든 상품에 대해서 정렬 순서를 변경하는 것이 핵심이다. 단 상품이 …
오늘 만들고자 했던 것은 Select Box 스타일의 Family Site 링크 부분이다. 아래 이미지와 같다. 기존까지는 html select 태그와 자바스크립트를 이용해서 작업을 했는데.. 이 방식이 팝업이 차단되어 있는 브라우저에서는 새창이 뜨지 않는 문제가 있고 또 select 태그는 스타일 적용도 쉽지 않아 div를 이용해 새롭게 만들어 봤다. jQuery의 .animate() 를 이용해서 위로 천천히 올라오는 모습으로 구현을 했다. …