사이트 우측에 스크롤되는 배너 넣기 정보
사이트 우측에 스크롤되는 배너 넣기본문
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>
익스, 크롬, 파폭에서 모두 정상적으로 잘 동작하네요..!!!
추천
5
5
댓글 19개
좋은정보 감사합니다^^
잘사용하겠습니다.^^
좋은 정보 감사합니다
사이트를 보다보면 왼쪽 오른족 모두 사이퀵메뉴를 넣어놨던데 좌측에 넣으려면 소스를 바꿔야 되겠지요?
너무너무 감사해요^^*
고맙습니다.!!!
고맙습니다. 찾던 팁이었습니다.
좋은 정보 감사합니다.
좋은 정보 감사합니다
좋은 정보입니다. 감사.
그런데 tail.php에 붙일 경우 메인에도 뜨는데..메인에 뜨지 못하게 할 수 없을까여ㅛ?
그런데 tail.php에 붙일 경우 메인에도 뜨는데..메인에 뜨지 못하게 할 수 없을까여ㅛ?
<?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
}
?>
이런식으로 넣으시면 인덱스 페이지에는 띄워지지 않을 겁니다.
port 님 친절한 답변 감사드립니다.
위와 같이 했는 인덱스에 여전히 노출되고..
한 가지 변화가 있다면 상하 스크롤 되던것이 인덱스 상단에
딱 고정되어 있는 것 입니다.
거듭 멍청한 질문 드려서 죄송합니다.ㅠㅠ
도와줍셔..
위와 같이 했는 인덱스에 여전히 노출되고..
한 가지 변화가 있다면 상하 스크롤 되던것이 인덱스 상단에
딱 고정되어 있는 것 입니다.
거듭 멍청한 질문 드려서 죄송합니다.ㅠㅠ
도와줍셔..
감사합니다.^^
좋은정보 감사합니다^^
죄송하지만 제가 초보라 그러는데 친절하게 알려주셔서 소스 만드는건 성공했는데요 추가로 몇개 더 아래다가 만들고 싶은데 그건 어떻게 해야 하는건가요?
감사합니다.
좋은 정보 감사합니다!!
감사합니다
좋은 정보 감사합니다.