วิชาสืบค้นและนำข้อมูลไปใช้: jQuery sliders

ขั้นตอนติดตั้ง Beatiful jQuery Slider

ขั้นที่ 1 กำหนด CSS ของ Beatiful jQuery Slider
ค้นหาโค้ด ]]></b:skin> และวางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว

/*jQuery beatiful Slider EDIT by http://www.hackublog.com*/      
div.wrap1{       
width : 960px;       
margin : 0 auto;       
text-align : left;       
}       
div.wrap1 a{color:#ffffff;}       
div#top div#nav{       
float : left;       
clear : both;       
width : 960px;       
height : 52px;       
margin : 22px 0 0;       
background:url(http://upic.me/i/kg/navbg.png) 0 0 no-repeat;       
}       
div#top div#nav ul{       
float:left;       
width:700px;       
height:52px;       
list-style-type:none;       
}       
div#nav ul li{       
float:left;       
height:52px;       
}       
div#nav ul li a{       
border:0;       
height:52px;       
display:block;       
line-height:52px;       
text-indent:-9999px;       
}       
div#HackublogSlider{       
margin:-1px 0 0;       
}       
div#video-header1{       
height:683px;       
margin:-1px 0 0;       
}       
div#HackublogSlider div.wrap1{       
height:289px;       
background:url(http://upic.me/i/rr/headerbg960.png) 50% 0 no-repeat;       
}       
div#HackublogSlider div#slide-holder{       
z-index : 40;       
width : 960px;       
height : 289px;       
position : absolute;       
}       
div#HackublogSlider div#slide-holder div#slide-runner{       
top : 9px;       
left : 9px;       
width : 940px;       
height : 278px;       
overflow : hidden;       
position : absolute;       
}       
div#HackublogSlider div#slide-holder img{       
margin:0;       
display:none;       
position:absolute;       
}       
div#HackublogSlider div#slide-holder div#slide-controls{       
left : 0;       
bottom : 228px;       
width : 940px;       
height : 46px;       
display : none;       
position : absolute;       
background:url(http://upic.me/i/s3/slidebg.png) 0 0;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p.text{       
float:left;       
color:#fff;       
display:inline;       
font-size:10px;       
line-height:16px;       
margin:15px 0 0 20px;       
text-transform:uppercase;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav{       
float:right;       
height:24px;       
display:inline;       
margin:11px 15px 0 0;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav a{       
float:left;       
width:24px;       
height:24px;       
display:inline;       
font-size:11px;       
margin:0 5px 0 0;       
line-height:24px;       
font-weight:bold;       
text-align:center;       
text-decoration:none;       
background-position:0 0;       
background-repeat:no-repeat;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav a.on{       
background-position:0 -24px;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav a{background-image:url(http://upic.me/i/qa/sildenav.png);}       
div#nav ul li a{background:url(http://upic.me/i/kg/navbg.png) no-repeat;}

ขั้นที่ 2 ติดตั้ง jQuery และจาวาสคริปต์
ต่อเนื่องจากขั้นที่ 1 ค้นหาโค้ด </head> และวางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว

<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>      
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type="text/javascript"/>       
<script type='text/javascript'>
//<![CDATA[
window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}

$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')

ขั้นที่ 3 กำหนดตำแหน่งและเรียกใช้ Beatiful jQuery Slider

ต่อเนื่องจากขั้นที่ 2 การวาง HTML นั้นพิจารณาดังนี้
3.1 กรณีใช้แม่แบบจากการติดตั้งเอง

   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
 
  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  $.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',
 
 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};
//]]>
</script>

ให้ค้นหาโค้ด

<div id='content-wrapper'>

ซึ่งบางแม่แบบอาจพบโค้ดเป็น

<div id='content'>

เมื่อพบแล้วให้วาง HTML ก่อนหน้าหรือถัดจากโค้ดที่พบตามข้างต้น

3.2 กรณีใช้แม่แบบที่ออกแบบเองโดยใช้เครื่องมือของ Blogger in Draft
ให้ค้นหาโค้ด

<div class='fauxborder-left tabs-fauxborder-left'>

และวาง HTML ก่อนหน้าโค้ดที่พบตามข้างต้น

3.3 โค้ด HTML สำหรับติดตั้ง Beatiful jQuery Slider

<div id='HackublogSlider'>     
<div class='wrap1'> 
<div id='slide-holder'>     
<div id='slide-runner'>      
    <a href=''><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>       
    <a href=''><img alt='' class='slide' height='262' id='slide-img-2' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-3' src='http://upic.me/i/33/naturephoto2.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-4' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-5' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-6' src='http://upic.me/i/s9/naturephoto5.png' width='940'/></a>        
      <a href=''><img alt='' class='slide' height='262' id='slide-img-7' src='http://upic.me/i/yo/naturephoto6.png' width='940'/></a>       
    <div id='slide-controls'>      
     <p class='text' id='slide-client'><strong>post: </strong><span/></p>      
     <p class='text' id='slide-desc'/>      
     <p id='slide-nav'/>      
     </div>      
</div>      
</div> 
<script type='text/javascript'>     
if(!window.slider) var slider={};      
slider.data=[      
{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},       
{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}        
];      
</script>      
</div></div><!--/HackublogSlider-->

3.4 การเปลี่ยนรูป

การเปลี่ยนรูปให้เปลี่ยนได้ในชุดโค้ดสีเขียว โดยการสร้างภาพที่มีขนาด 940 x 262 px แล้วฝากรูปไว้ที่รับฝากฟรี เช่น picasa,photobucket หรือ upic.me เป็นต้น จากนั้นนำมาแทนที่ URL ของภาพเดิม

<a href=''><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-2' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-3' src='http://upic.me/i/33/naturephoto2.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-4' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-5' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-6' src='http://upic.me/i/s9/naturephoto5.png' width='940'/></a>         
      <a href=''><img alt='' class='slide' height='262' id='slide-img-7' src='http://upic.me/i/yo/naturephoto6.png' width='940'/></a>

3.5 การใส่ Link ให้กับรูปภาพใน Slide
การใส่ Link ให้กับรูปภาพสามารถทำได้โดยใส่ URL ที่ต้องการลงไปใน Tag <a> เช่น

<a 'ใส่ Link ตรงนี้'><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>

3.6 การใส่คำอธิบาย
การใส่คำอธิบายแต่ละภาพให้ใส่ในชุดโค้ด

{"id":"slide-img-1","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},          
{"id":"slide-img-2","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-3","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-4","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-5","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-6","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},
{"id":"slide-img-7","client":"ใส่ Title","desc":"ใส่คำอธิบาย"}

3.7 การเพิ่มหรือลบจำนวนภาพ

ค่าดั้งเดิมที่ใส่ไว้คือ 7 ภาพ คุณสามารถลบหรือเพิ่มจำนวนภาพโดยเพิ่มชุดโค้ดดังนี้

ตัวอย่างถ้าผมต้อการเพิ่มจากเดิม 7 ภาพให้เป็น 10 ภาพ ผมก็จะต้องเพิ่มโค้ดเข้าไปอีก 3 ชุดได้แก่

<a href=''><img alt='' class='slide' height='262' id='slide-img-8' src='ใส่ URL ภาพที่8' width='940'/></a>           
<a href=''><img alt='' class='slide' height='262' id='slide-img-9' src='ใส่ URL ภาพที่9' width='940'/></a>           
<a href=''><img alt='' class='slide' height='262' id='slide-img-10' src='ใส่ URL ภาพที่10' width='940'/></a>

และ

{"id":"slide-img-8","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},          
{"id":"slide-img-9","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},
{"id":"slide-img-10","client":"ใส่ Title","desc":"ใส่คำอธิบาย"}

โดยเพิ่มเข้าไปในโค้ดชุดเดิมในข้อ 3.3 ซึ่งจะได้โค้ดใหม่เป็น

<div id='HackublogSlider'>     
<div class='wrap1'> 
<div id='slide-holder'>     
<div id='slide-runner'>      
    <a href=''><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>       
    <a href=''><img alt='' class='slide' height='262' id='slide-img-2' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-3' src='http://upic.me/i/33/naturephoto2.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-4' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-5' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-6' src='http://upic.me/i/s9/naturephoto5.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-7' src='http://upic.me/i/yo/naturephoto6.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-8' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-9' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-10' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>        
    <div id='slide-controls'>      
     <p class='text' id='slide-client'><strong>post: </strong><span/></p>      
     <p class='text' id='slide-desc'/>      
     <p id='slide-nav'/>      
     </div>      
</div>      
</div>
  
    <div id='slide-controls'>       
     <p class='text' id='slide-client'><strong>post: </strong><span/></p>       
     <p class='text' id='slide-desc'/>       
     <p id='slide-nav'/>       
     </div>       
</div>       
</div> 
<script type='text/javascript'>     
if(!window.slider) var slider={};      
slider.data=[      
{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},       
{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-8","client":"nature beauty","desc":"nature beauty photography"},       
{"id":"slide-img-9","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-10","client":"nature beauty","desc":"add your description here"}
];     
</script>
</div></div><!--/HackublogSlider-->

วิชาสืบค้นและนำข้อมูลไปใช้

anime

วันพุธที่ 26 กุมภาพันธ์ พ.ศ. 2557

jQuery sliders

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

Bangkok

เพิ่มเติม

เพิ่มเติม