묻고답하기
위젯 페이지에 배경을 삽입해볼려고 합니다.
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번의 방법 말고도 위젯 페이지에 위 배경 소스를 접목시키고 여러 위젯을 접목시켜서 레이아웃 없는 위젯페이지를 운영해볼려고 합니다.
도움주시면 감사하겠습니다.