그누보드 - 글이나 이미지 오버시 그 옆에 이미지 띄우기

글이나 이미지 오버시 그 옆에 이미지 띄우기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

글이나 이미지 오버시 그 옆에 이미지 띄우기 정보

글이나 이미지 오버시 그 옆에 이미지 띄우기

본문

안녕하세요. Mentor(멘토) 입니다.

다름이 아니라 재가 필요 해서 찾아 보다가 좋은 정보를 나눠 보고 싶어서 팁으로 올립니다.

게시판에 응용 해보시면 좋을만한 팁 이네요.

많이 모자라지만 팁 써보겠습니다.

많은 태클 걸어 주시면 감사하겠습니다 --*

1. css

<style>

#screenshot{

position:absolute;

border:1px solid #ccc;

background:#333;

padding:5px;

display:none;

color:#fff;

}

</style>

border , backgornd , padding 등등 자신의 입맛에 맞게 적당히 설정해 줍니다.

2. js

this.screenshotPreview = function(){

/* CONFIG */

xOffset = 10;

yOffset = 30;

// these 2 variable determine popup's distance from the cursor

// you might want to adjust to get the right result

/* END CONFIG */

$("a.screenshot").hover(function(e){

this.t = this.title;

this.title = "";

var c = (this.t != "") ? "<br/>" + this.t : "";

$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");

$("#screenshot")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px")

.fadeIn("fast");

function(){

this.title = this.t;

$("#screenshot").remove();

});

$("a.screenshot").mousemove(function(e){

$("#screenshot")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px");

});

};

// starting the script on page load

$(document).ready(function(){

screenshotPreview();

});

</script>

위 2개의 css 와 js 는 파일로 만드시면 좋을듯 합니다

3. 구현 예제

이런식으로 만들어 주시면 됩니다.

게시판에 적용 하시려면

ㄱ. 텍스트 형태

<a href="<?=$list[$i][href]?>" class="screenshot" rel="오버할 이미지"><?=$list[$i][subject]?></a>

ㄴ. 갤러리 형태

<a href="<?=$list[$i][href]?>" class="screenshot" rel="오버할 이미지">불러올 thumb 주소</a>

오버할 이미지에 해당 게시판의 list안의 저장된 이미지 주소를 지정해주시면 될듯 합니다.

이런식으로 적용 해 보시면 좋을듯 싶습니다.

링크에 저희 사이트 실제 적용 예시 걸어 놓았습니다.

추석이 다가오네요

맛있는 것들 많이 먹으시고, 친척들 또는 가족과 좋은 시간 되셨으면 합니다.^^

소스 출저 - http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

댓글 11개

아길이 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

10.09.25 16:08:50

감사히 사용하겠습니다.

그런데,,, 이미지는 작동을 않네요? 왜그럴까요?
타이틀만 나오네요,,
글쓰기에서 이미지 첨부 하구요,,,

리스트 스킨에서 다음과 같이 했습니다.

echo "<a href='{$list[$i][href]}' class='screensho' rel='{$list[$i][file][0][path]}/{$list[$i][file][0][file]}' title='{$list[$i][file][0][file]}'>";
echo $list[$i][subject];
echo "</a>";