묻고답하기
위젯 페이지에 배경을 삽입해볼려고 합니다.
2015.01.19 17:44
안녕하세요.
월요일 노곤하시죠?
사이트 메뉴로 _ 레이아웃이 적용 되지 않은 위젯 페이지를 하나 만들려고 합니다.
근데 배경이 문젠데요.
http://vanitynightclubtacoma.com/
위 사이트에서 사용하는 배경을 위젯 페이지의 배경으로 넣을려고 하는데요.
위 사이트 소스로 배경 페이지를 만들어놓긴 했는데 위젯을 적용하는 방법을 모르겠네요.
1. 배경 페이지에 <div>위젯 코드</div> 하여 붙여넣기를 해보았는데도 위젯이 보이지 않고요. ㅋ
2. 배경 페이지를 레이아웃으로 생성해서 하는 방법도 될까 싶어 배경 페이지를 layout.html 로 바꾸고 layout 폴더에 새폴더를
만든후 관리자 설정에서 위젯 페이지 생성 - 레이아웃 디자인 적용하니깐 안되네요. ㅋ
어떤식으로 응용을 해야 할지 통 감이 오질 않습니다.
도움주시면 큰도움 되겠습니다.
1번의 방법에서 뭔가 추가를 하면 위젯이 보이지 않을까 싶은데요.
기초지식 없이 할려고 하니 도움없인 힘드네요.
아래는 배경 페이지의 소스에 <div>위젯 코드</div> 를 넣어본 소스인데요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />
<title>Vanity Nightclub Tacoma</title>
</head>
<body>
<div id="bg">
<img src="../images/back1.jpg" style="z-index: 0; opacity: -0.001;">
<img src="../images/back2.jpg" style="z-index: 0; opacity: -0.001;">
<img src="../images/back3.jpg" style="z-index: 1; opacity: 0.999;"></div>
<script type="text/javascript">
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//
// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)
// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//
// **** Functional Code(1.58K) - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}
zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}
zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
<script type="text/javascript">
<!--
function BGFade(o){
var p=document.getElementById(o.ID)
if (p){
var bgs=p.getElementsByTagName('IMG');
this.bgs=[];
for (var z0=0;z0<bgs.length;z0++){
this.bgs[z0]=new zxcAnimate('opacity',bgs[z0]);
}
this.nu=z0-1;
this.ms=o.Duration||4000;
this.hold=o.Hold||this.ms*2;
if(this.nu>0){
this.Rotate();
}
}
}
BGFade.prototype.Rotate=function(){
this.bgs[this.nu].obj.style.zIndex='0';
this.bgs[this.nu].animate(100,0,this.ms);
this.nu=++this.nu%this.bgs.length;
this.bgs[this.nu].obj.style.zIndex='1';
this.bgs[this.nu].animate(0,100,this.ms);
var oop=this;
this.to=setTimeout(function(){ oop.Rotate(); },this.hold);
}
function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}
new BGFade({
ID:'bg',
Duration:4000,
Hold:5000
});
//-->
</script>
<div id="widget" z-index="3"><img class="zbxe_widget_output" widget="content" skin="default" colorset="white" content_type="document" module_srls="194" list_type="normal" tab_type="none" markup_type="table" page_count="1" option_view="title,regdate,nickname" show_browser_title="Y" show_comment_count="Y" show_trackback_count="Y" show_category="Y" show_icon="Y" order_target="regdate" order_type="desc" thumbnail_type="crop" /></div>
</body>
</html>
1번의 방법 말고도 위젯 페이지에 위 배경 소스를 접목시키고 여러 위젯을 접목시켜서 레이아웃 없는 위젯페이지를 운영해볼려고 합니다.
도움주시면 감사하겠습니다.
댓글 0
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
jeni660 | 스크립트오류질문..& 메뉴링크 질문이요~~ | |
하프하프 | 네이버 웹마스터도구 질문드립니다. | |
Sydneylove | 개인홈페이지 xe 연동 관련 내용입니다.ㅠㅠ | |
달빛한묶음 | 실수로 전체 권한을 766으로 변경 후 빈 페이지가 뜹니다. [2] | 2015.01.31 by 달빛한묶음 |
세상의모든계산기 | function_exists 에서 sha256, sha512 등 hash 함수 확인이 안되네요. [3] | 2015.01.31 by 세상의모든계산기 |
자대련 | 누리고 쇼핑몰 배송비 에러입니다. | |
Kxo | 이 문법이 잘못된 건가요??? [2] | 2015.01.27 by Kxo |
추억팔이 | 닷X 웹호스팅 부하 차단 대응법 [11] | 2015.01.27 by 퍼니엑스이 |
XE모듈 | 서버가 다운되네요 도움 부탁드립니다 [2] | 2015.01.24 by JerryGoldman |
아잉콘 | 아이디/이메일 로그인 선택이 변경이 안되는 문제 [3] | 2015.01.23 by 아잉콘 |
파워뭉치 | 확장변수중 전화번호 형식관련 궁금한점 질문드려요.. [2] | 2015.01.23 by 파워뭉치 |
중년- | 간단한 html이 안먹히네요. [4] | 2015.01.22 by 중년- |
GREATGUY | 검색어 통계모듈 질문드립니다. | |
빅스타 | 사이트에 뭐이상한게 이렇게 많을까요? | |
뿌꾸빵 | 관리자페이지에서 installed 에 들어가려고 하면 오류메세지가뜹니다 | |
자대련 | 누리고 쇼핑몰 주소검색 에러. krzip 한국 우편번호 검색 오류 [3] | 2015.01.20 by 자대련 |
SUHONE | 위젯 페이지에 배경을 삽입해볼려고 합니다. | |
추억팔이 | 새로고침 없는 추천/비추천 버튼 노출 애드온 비회원 권한 [3] | 2015.01.16 by sejin7940 |
banaba | 위젯부분... [7] | 2015.01.16 by banaba |
곰돌_이 | 타이틀 변경하는 방법 [1] | 2015.01.13 by imagineshop |