사이트 우측에 스크롤되는 배너 넣기
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=33605&page=2 님이 올려주신 그누보드4의 소스를 그누보드5로 수정해서 적용했는데 잘 작동이 되네요.
중앙정렬인지 좌측정렬인지 확인하셔서
좌측정렬일 경우는 left 값을 left:1000px; --> 좌측으로부터 떨어진 원하는 거리만큼 수정
중앙정렬일 경우는 left 값을 left:50%; margin-left:490px; --> 중앙에서 떨어진 거리만큼 수정(그누보드5의 기본 레이아웃인 경우 490px로 설정하니 적절하네요.)
위에서 부터의 거리는 top:200px; --> 위에서 부터 원하는 거리만큼 수정
이렇게 원하는 위치에 놓으시면 됩니다.
스크롤을 느리게 할 경우는 스크립트 소스에서 300이라는 숫자를 1000 정도로 올리시면 되고, 빠르게 할 경우는 100으로 줄이면 됩니다.
head.sub.php 소스에서
</head>태그 끝나기 전에
<script type="text/javascript">
$(function () {
var cssTop = parseInt($("#sky").css("top"));
$(window).scroll(function () {
var position = $(window).scrollTop();
$("#sky").stop().animate({ "top": (position + cssTop) + "px" }, 300);
});
});
</script>
코드를 붙여주시고요.
배너가 들어가기 원하는 곳에 아래와 같은 코드를 넣어주시면 됩니다.
저의 경우는 배너 이미지의 가로200px, 세로 200px 이미지를 사용했습니다.
이미지나 다른 컨텐츠를 삽입해주시고, 그 컨텐츠 크기에 맞게 div#sky의 가로(width), 세로(height) 크기를 변경해 주시면 됩니다.
사이트 전체에 스크롤 배너가 나타나게 할려면 head.sub.php 소스 마지막에 아래의 코드를 넣으면 되고,
상단(head)에 나타나기를 원하시면 head.php에서
<!-- 상단 시작 { -->
<div id="hd">
부부 바로 위에 넣으시면 되고요.
메인 페이지에 나나나기를 원하면 index.php 파일에 아래의 코드를 넣으시면 됩니다.
<div id="sky" style="position:absolute;z-index:100;top:200px;left:50%;margin-left:490px;width:200px; height:200px;border:1px solid gray;">
<a href="#"><img src="<?=G5_URL;?>/img/banner.gif"></a>
</div>
익스, 크롬, 파폭에서 모두 정상적으로 잘 동작하네요..!!!
중앙정렬인지 좌측정렬인지 확인하셔서
좌측정렬일 경우는 left 값을 left:1000px; --> 좌측으로부터 떨어진 원하는 거리만큼 수정
중앙정렬일 경우는 left 값을 left:50%; margin-left:490px; --> 중앙에서 떨어진 거리만큼 수정(그누보드5의 기본 레이아웃인 경우 490px로 설정하니 적절하네요.)
위에서 부터의 거리는 top:200px; --> 위에서 부터 원하는 거리만큼 수정
이렇게 원하는 위치에 놓으시면 됩니다.
스크롤을 느리게 할 경우는 스크립트 소스에서 300이라는 숫자를 1000 정도로 올리시면 되고, 빠르게 할 경우는 100으로 줄이면 됩니다.
head.sub.php 소스에서
</head>태그 끝나기 전에
<script type="text/javascript">
$(function () {
var cssTop = parseInt($("#sky").css("top"));
$(window).scroll(function () {
var position = $(window).scrollTop();
$("#sky").stop().animate({ "top": (position + cssTop) + "px" }, 300);
});
});
</script>
코드를 붙여주시고요.
배너가 들어가기 원하는 곳에 아래와 같은 코드를 넣어주시면 됩니다.
저의 경우는 배너 이미지의 가로200px, 세로 200px 이미지를 사용했습니다.
이미지나 다른 컨텐츠를 삽입해주시고, 그 컨텐츠 크기에 맞게 div#sky의 가로(width), 세로(height) 크기를 변경해 주시면 됩니다.
사이트 전체에 스크롤 배너가 나타나게 할려면 head.sub.php 소스 마지막에 아래의 코드를 넣으면 되고,
상단(head)에 나타나기를 원하시면 head.php에서
<!-- 상단 시작 { -->
<div id="hd">
부부 바로 위에 넣으시면 되고요.
메인 페이지에 나나나기를 원하면 index.php 파일에 아래의 코드를 넣으시면 됩니다.
<div id="sky" style="position:absolute;z-index:100;top:200px;left:50%;margin-left:490px;width:200px; height:200px;border:1px solid gray;">
<a href="#"><img src="<?=G5_URL;?>/img/banner.gif"></a>
</div>
익스, 크롬, 파폭에서 모두 정상적으로 잘 동작하네요..!!!
댓글 19개
10년 전
좋은정보 감사합니다^^
미디어블루
10년 전
잘사용하겠습니다.^^
10년 전
좋은 정보 감사합니다
10년 전
사이트를 보다보면 왼쪽 오른족 모두 사이퀵메뉴를 넣어놨던데 좌측에 넣으려면 소스를 바꿔야 되겠지요?
10년 전
너무너무 감사해요^^*
ZqkWcr39s1
10년 전
고맙습니다.!!!
10년 전
고맙습니다. 찾던 팁이었습니다.
10년 전
좋은 정보 감사합니다.
10년 전
좋은 정보 감사합니다
9년 전
좋은 정보입니다. 감사.
그런데 tail.php에 붙일 경우 메인에도 뜨는데..메인에 뜨지 못하게 할 수 없을까여ㅛ?
그런데 tail.php에 붙일 경우 메인에도 뜨는데..메인에 뜨지 못하게 할 수 없을까여ㅛ?
9년 전
[code]
<?php
if(!defined('_INDEX_')) { // index에서만 실행
?>
<script type="text/javascript">
$(function () {
var cssTop = parseInt($("#sky").css("top"));
$(window).scroll(function () {
var position = $(window).scrollTop();
$("#sky").stop().animate({ "top": (position + cssTop) + "px" }, 300);
});
});
</script>
<?php
}
?>
[/code]
이런식으로 넣으시면 인덱스 페이지에는 띄워지지 않을 겁니다.
<?php
if(!defined('_INDEX_')) { // index에서만 실행
?>
<script type="text/javascript">
$(function () {
var cssTop = parseInt($("#sky").css("top"));
$(window).scroll(function () {
var position = $(window).scrollTop();
$("#sky").stop().animate({ "top": (position + cssTop) + "px" }, 300);
});
});
</script>
<?php
}
?>
[/code]
이런식으로 넣으시면 인덱스 페이지에는 띄워지지 않을 겁니다.
9년 전
port 님 친절한 답변 감사드립니다.
위와 같이 했는 인덱스에 여전히 노출되고..
한 가지 변화가 있다면 상하 스크롤 되던것이 인덱스 상단에
딱 고정되어 있는 것 입니다.
거듭 멍청한 질문 드려서 죄송합니다.ㅠㅠ
도와줍셔..
위와 같이 했는 인덱스에 여전히 노출되고..
한 가지 변화가 있다면 상하 스크롤 되던것이 인덱스 상단에
딱 고정되어 있는 것 입니다.
거듭 멍청한 질문 드려서 죄송합니다.ㅠㅠ
도와줍셔..
9년 전
감사합니다.^^
우리풀사랑
9년 전
좋은정보 감사합니다^^
8년 전
죄송하지만 제가 초보라 그러는데 친절하게 알려주셔서 소스 만드는건 성공했는데요 추가로 몇개 더 아래다가 만들고 싶은데 그건 어떻게 해야 하는건가요?
YeChanDo
8년 전
감사합니다.
7년 전
좋은 정보 감사합니다!!
7년 전
감사합니다
6년 전
좋은 정보 감사합니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 414 | 10년 전 | 5621 | ||
| 413 | 10년 전 | 11519 | ||
| 412 | 10년 전 | 6211 | ||
| 411 | 10년 전 | 8927 | ||
| 410 | 10년 전 | 13170 | ||
| 409 |
 익명닉네임 |
10년 전 | 7117 | |
| 408 | 10년 전 | 6542 | ||
| 407 | 10년 전 | 5760 | ||
| 406 | 10년 전 | 12415 | ||
| 405 | 10년 전 | 14227 | ||
| 404 | 10년 전 | 9643 | ||
| 403 | 10년 전 | 6561 | ||
| 402 | 10년 전 | 8331 | ||
| 401 |
 JAVA대세 |
10년 전 | 6501 | |
| 400 | 10년 전 | 11229 | ||
| 399 | 10년 전 | 11246 | ||
| 398 | 10년 전 | 8005 | ||
| 397 | 10년 전 | 9414 | ||
| 396 | 10년 전 | 8639 | ||
| 395 | 10년 전 | 10896 | ||
| 394 | 10년 전 | 8923 | ||
| 393 | 10년 전 | 7024 | ||
| 392 |
untitled
|
10년 전 | 6924 | |
| 391 | 10년 전 | 14545 | ||
| 390 | 10년 전 | 8088 | ||
| 389 | 10년 전 | 13296 | ||
| 388 | 10년 전 | 6814 | ||
| 387 |
JAVA대세 |
10년 전 | 6722 | |
| 386 | 10년 전 | 12456 | ||
| 385 |
untitled
|
10년 전 | 18046 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기