글이나 이미지 오버시 그 옆에 이미지 띄우기
안녕하세요. 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
<script>
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="이동 주소" class="screenshot" rel="오버 이미지">오버할 텍스트</a>
<a href="이동 주소" class="screenshot" rel="오버 이미지"><img src="오버할 이미지"></a>
<a href="이동 주소" class="screenshot" rel="오버 이미지" title="오버시 하단 타이틀">
이런식으로 만들어 주시면 됩니다.
게시판에 적용 하시려면
ㄱ. 텍스트 형태
<a href="<?=$list[$i][href]?>" class="screenshot" rel="오버할 이미지"><?=$list[$i][subject]?></a>
ㄴ. 갤러리 형태
<a href="<?=$list[$i][href]?>" class="screenshot" rel="오버할 이미지">불러올 thumb 주소</a>
오버할 이미지에 해당 게시판의 list안의 저장된 이미지 주소를 지정해주시면 될듯 합니다.
이런식으로 적용 해 보시면 좋을듯 싶습니다.
링크에 저희 사이트 실제 적용 예시 걸어 놓았습니다.
추석이 다가오네요
맛있는 것들 많이 먹으시고, 친척들 또는 가족과 좋은 시간 되셨으면 합니다.^^
댓글 11개
15년 전
감사히 사용하겠습니다.
그런데,,, 이미지는 작동을 않네요? 왜그럴까요?
타이틀만 나오네요,,
글쓰기에서 이미지 첨부 하구요,,,
리스트 스킨에서 다음과 같이 했습니다.
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>";
그런데,,, 이미지는 작동을 않네요? 왜그럴까요?
타이틀만 나오네요,,
글쓰기에서 이미지 첨부 하구요,,,
리스트 스킨에서 다음과 같이 했습니다.
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>";
Mentor
15년 전
class='screensho' 이거 혹시 오타 이신가요 아니면 ?! 여기서만 잘못 치신것이신가요?
class='screenshot'
이게 오타이길 바라면서 ^^;;;
class='screenshot'
이게 오타이길 바라면서 ^^;;;
해피투게더
15년 전
글이나 이미지 오버시 그 옆에 이미지 띄우기
15년 전
iuiu
14년 전
유용하네요!
14년 전
글이나 이미지 오버시 그 옆에 이미지 띄우기^^
14년 전
이미지 오버시 그옆 툴팁띄우기
우리우리는
13년 전
ㅋㅅ합니ㅏ.
13년 전
좋은 팁 고맙습니다. ^^
13년 전
글이나 이미지 오버시 그 옆에 이미지 띄우기
Soullez
13년 전
이미지를 띄울때 한장말고 view에 있는 사진 여러장을 불러와서 1줄로 나열되게 하는방법은 없나요?
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3149 | 12년 전 | 11352 | ||
| 3148 | 12년 전 | 12514 | ||
| 3147 | 12년 전 | 4348 | ||
| 3146 | 12년 전 | 11159 | ||
| 3145 |
takumi22
|
12년 전 | 11254 | |
| 3144 | 12년 전 | 5483 | ||
| 3143 | 12년 전 | 10371 | ||
| 3142 | 12년 전 | 9630 | ||
| 3141 | 12년 전 | 4369 | ||
| 3140 | 12년 전 | 3471 | ||
| 3139 |
adm1n
|
12년 전 | 5266 | |
| 3138 | 12년 전 | 6397 | ||
| 3137 | 12년 전 | 5645 | ||
| 3136 |
izabella
|
12년 전 | 6442 | |
| 3135 |
 cshop2 |
12년 전 | 5889 | |
| 3134 |
 미운오리스키 |
12년 전 | 5070 | |
| 3133 | 12년 전 | 6602 | ||
| 3132 | 12년 전 | 14647 | ||
| 3131 | 12년 전 | 7375 | ||
| 3130 | 12년 전 | 5399 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기