사이트 우측에 스크롤되는 배너 넣기
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년 전
좋은정보 감사합니다^^
9년 전
죄송하지만 제가 초보라 그러는데 친절하게 알려주셔서 소스 만드는건 성공했는데요 추가로 몇개 더 아래다가 만들고 싶은데 그건 어떻게 해야 하는건가요?
YeChanDo
8년 전
감사합니다.
7년 전
좋은 정보 감사합니다!!
7년 전
감사합니다
6년 전
좋은 정보 감사합니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4404 | ||
| 804 |
 나연가온아빠 |
8년 전 | 5479 | |
| 803 | 8년 전 | 6196 | ||
| 802 |
 thisgun |
8년 전 | 7706 | |
| 801 | 8년 전 | 5605 | ||
| 800 | 8년 전 | 7408 | ||
| 799 | 8년 전 | 8319 | ||
| 798 | 8년 전 | 8100 | ||
| 797 | 8년 전 | 4303 | ||
| 796 | 8년 전 | 4314 | ||
| 795 | 8년 전 | 4230 | ||
| 794 | 8년 전 | 9167 | ||
| 793 | 8년 전 | 4611 | ||
| 792 | 8년 전 | 4267 | ||
| 791 | 8년 전 | 4833 | ||
| 790 | 8년 전 | 6907 | ||
| 789 | 8년 전 | 7196 | ||
| 788 |
나연가온아빠 |
8년 전 | 4632 | |
| 787 | 8년 전 | 5696 | ||
| 786 | 8년 전 | 5347 | ||
| 785 | 8년 전 | 4325 | ||
| 784 | 8년 전 | 5668 | ||
| 783 |
 sinbi |
8년 전 | 4990 | |
| 782 | 8년 전 | 7828 | ||
| 781 | 8년 전 | 4502 | ||
| 780 | 8년 전 | 8264 | ||
| 779 | 8년 전 | 7731 | ||
| 778 |
 ReRal |
8년 전 | 6159 | |
| 777 | 8년 전 | 4242 | ||
| 776 | 8년 전 | 4678 | ||
| 775 | 8년 전 | 3488 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기