사이트 우측에 스크롤되는 배너 넣기
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년 전 | 4429 | ||
| 534 | 9년 전 | 5704 | ||
| 533 | 9년 전 | 5178 | ||
| 532 | 9년 전 | 5478 | ||
| 531 | 9년 전 | 8523 | ||
| 530 | 9년 전 | 7120 | ||
| 529 | 9년 전 | 16108 | ||
| 528 | 9년 전 | 6114 | ||
| 527 | 9년 전 | 6963 | ||
| 526 | 9년 전 | 5537 | ||
| 525 | 9년 전 | 6794 | ||
| 524 | 9년 전 | 12047 | ||
| 523 |
 ignaz |
9년 전 | 25707 | |
| 522 |
 톡톡아이패드 |
9년 전 | 12677 | |
| 521 | 9년 전 | 9946 | ||
| 520 | 9년 전 | 9427 | ||
| 519 | 9년 전 | 10387 | ||
| 518 | 9년 전 | 6674 | ||
| 517 |
 만두야닷컴 |
9년 전 | 8391 | |
| 516 | 9년 전 | 9304 | ||
| 515 | 9년 전 | 10226 | ||
| 514 | 9년 전 | 12090 | ||
| 513 | 9년 전 | 8769 | ||
| 512 | 9년 전 | 8575 | ||
| 511 | 9년 전 | 5964 | ||
| 510 | 9년 전 | 7990 | ||
| 509 | 9년 전 | 7656 | ||
| 508 |
wosuch
|
9년 전 | 9417 | |
| 507 | 10년 전 | 6673 | ||
| 506 |
starfield
|
10년 전 | 14078 | |
| 505 | 10년 전 | 6704 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기