Rev. 2.73

사이트의 썸네일 이미지(미리보기 이미지)를 생성해주는 엔진을 이용한 링크의 썸네일 팝업 스크립트입니다. 외부로 링크되는 곳의 사이트 모양을 미리 볼 수 있어 여럼으로 편리합니다. 지정한 영역에 해당하는 A 노드의 배열을 만들고 URL을 분석하여 링크에 마우스를 오버하면 해당하는 사이트 썸네일을 팝업으로 표시합니다. 늘 그렇듯이 Prototype 프레임웍 기반으로 만들었습니다. IE와 파이어폭스에서 정상으로 작동하는 것을 확인했습니다.

테스트 : 야후닷컴, 구글닷컴, 네이뵤, 다음, 올블로그

// Sitelink thumbnail
// Developer: FireJune(http://firejune.com)

var Linkthumb = {
align:function(array) {
var thisUrl = document.domain;
if (thisUrl.split('.')[0] == 'www')
thisUrl = thisUrl.substring(4, thisUrl.length);
$$(array).each(function(element) {
var url = element.href;
if(url.indexOf(thisUrl) == -1) {
var img = Linkthumb.create(url);
element.appendChild(img);
Event.observe(element, 'mouseover', function(){img.style.display = 'block'});
Event.observe(element, 'mouseout', function(){img.style.display = 'none'});
}
});
},
create:function(url) {
var img = document.createElement('IMG');
var url = url.replace(/[^:]*:\/\/([^:\/]*)(:{0,1}\/{1}.*)/, '$1');
img.src = 'http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r='+ url;
img.className = 'linkthumb';
img.alt = url;
img.style.display = 'none';
return img;
}
}
// Style.css
.linkthumb{
z-index:9999; position:absolute; margin:18px 0 0 -160px;
border-right:2px solid #888; border-bottom:2px solid #888}
// 사용하기
Linkthumb.align('#content a');

- 지정한 영역의 배열을 만든다.
- 자신의 도메인을 분석한다.
- 배열에서 자신의 URL은 거부한다.
- 배열에 이미지 노드를 추가한다.
- 배열에 마우스 오버, 아웃 이벤트를 추가한다.

Comments

Got something to add? You can just leave a comment.

  • 이걸 사용해보고픈데,,,(괜찮으시다면;;)
    wp 에 어떻게 적용해야하나요?
    제가 초보인지라-_-
    index 에 넣나요?

    reply edit

  • minerva minerva

    안녕하세요. 실례를 무릅쓰고 가르침을 요청합니다.

    이 글을 참고로 해서 사이트 썸네일을 잘 사용해 왔는데요... 언젠가부터 썸네일이

    안뜨더라고요.. 이 부분 "'http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=" 에서

    이미지 주소는 변함이 없는거 같은데.. 실제로 소스가 같은데도 Firejune님의 블로그

    에서는 잘 되고, 제 블로그에서는 썸네일 이미지가 안뜹니다. 소스를 보면...

    http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=www.nickstakenburg.com

    이런식으로 같은데요.. 같은 소스인데도 불구하고 제 블로그에서는 안되더라고요..

    어딘가 girafa.com에서 제한을 건거 같은데.. 해결책이나 짚이는 부분이 있다면

    알려주신다면 큰 도움이 되겠습니다.

    건강하시고요.. 연말 잘 보내시기 바랍니다 ~

    reply edit

  • girafa.com에서 프리뷰 이미지를 인증을 통해 제공하는 것으로 정책을 변경했습니다. 그래서 회원가입을하고 인증키를 얻어 MD5에 대입하여 이미지 주소를 생성할 수 있습니다. 저는 이 부분을 Ajax로 구현하여 이미지를 호출 할 때 마다 서버와 통신을 하는 구조로 설계하였습니다. 보다 자세한 방법은 아래의 링크를 참조하세요.

    http://www.web-development-blog.com/archives/dynamic-thumbnails-from-websites/

    reply edit

Your Reaction Time!

captcha

avatar