 |
|
พี่คับช่วยดูนี้ให้หน่อยคับคือผมอยากจะย่อรูปภาพแต่ผมที่ใส่โค้ดย่อไม่ได้
ช่วยดูทีคับ
[img]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> อัลบั้มรูปสไตล์ Opacity By xbeginner01</title>
<style>
*{
padding:0;
margin:0;
}
#tbSlide{
border-collapse:collapse;
border:none;
}
#tbSlide td{
padding:0 3px;
}
#tbSlide #bb{
position:relative;
width:400px; /* ความกว้างของภาพที่จะแสดง +10px(border) */
height:400px; /*ความยาวของภาพที่จะแสดง +10px(border)*/
text-align:center;
border:solid 1px #D8D8D8;
overflow:hidden;
}
#tbSlide #bb #showPic img{
position:absolute;
left:0;
top:0;
right:0;
border:solid 4px #FFFFFF;
}
#tbSlide #Pic a img{
margin:1px 0;
border:none;
}
</style>
<script>
function slideStyleOpacity(){
var list =3; // แสดงจำนวนรายการรูปทางด้านซ้าย
var waitTime =1000 // หยุดแสดงภาพ 1 หน่วย us
var opaTime = 100 //ความเร็วต่อเฟรม ทำให้ภาพจาง หน่วย us
var opaMulti = 10 // ตัวคูณ เพิ่มค่า opacity (ภาพจาง) ขึ้นอีก ไม่ควรเกิน 100 และเท่ากับ 0 ประมาณ 5-20 กำลังดี
var imgArr = new Array();
var opa= 0;
var wait =false;
var im =0;
var startList=0;
this.addImage = function(imgs,thumnail){
imgArr[imgArr.length] ={imgs:imgs,thumnail:thumnail}
ss.showImage(imgArr[0].imgs);
ss.toList();
}
this.toList =function(){
var pic=document.getElementById('Pic');
pic.innerHTML="";
for(var i=0; i < list ; i++){
try{
var pic=document.getElementById('Pic');
var a =document.createElement('a');
a.setAttribute('href',"javascript:ss.showImage('"+imgArr[startList+i].imgs+"')");
var tagImg = document.createElement('img');
tagImg.setAttribute('src',imgArr[startList+i].thumnail);
tagImg.setAttribute('alt',imgArr[startList+i].thumnail);
a.appendChild(tagImg);
pic.appendChild(a);
var br= document.createElement('br');
pic.appendChild(br);
}catch(e){}
}
if(imgArr.length>list && imgArr.length>(startList+list) ) document.getElementById('downList').disabled=false;
else document.getElementById('downList').disabled=true;
if(startList>0)document.getElementById('upList').disabled=false;
else document.getElementById('upList').disabled=true;
}
this.upList =function(){
startList--;
ss.toList();
}
this.downList=function(){
startList++;
ss.toList();
}
this.showImage=function(img1){
var show=document.getElementById('showPic');
show.innerHTML="<img src="+img1+" id=img1>";
setOpacity(100,'img1');
var len =imgArr.length;
var j=0;
while(j <len){
if(imgArr[j].imgs ==img1){
show.innerHTML+="<img src="+imgArr[(j+1)%len].imgs+" id=img2 >";
break;
}
j++;
}
setOpacity(0,'img2');
opa=0;
wait=true;
im=j;
}
this.slideImage=function(){
if(wait){
setTimeout("ss.slideImage()" ,waitTime);
wait=false;
}else{
setTimeout("ss.slideImage()" ,opaTime);
opa++;
setOpacity(100-opa*opaMulti,'img1');
setOpacity(opa*opaMulti,'img2');
if(opa*opaMulti >99 ){
var next = imgArr[(im+1)%imgArr.length].imgs;
im++;
ss.showImage(next);
}
}
}
function setOpacity(setOpacity, objectId){
var object = document.getElementById(objectId).style;
object.opacity = (setOpacity / 100);
object.MozOpacity = (setOpacity / 100);
object.KhtmlOpacity = (setOpacity / 100);
object.filter = "alpha(opacity=" + setOpacity + ")";
}
}
var ss = new slideStyleOpacity;
window.onload =function(){
/*เพิ่มภาพลงในสไลด์ โดยใส่ชื่อภาพจริง (iimg1.jpg) และ ภาพย่อส่วน (thumnail_img.jpg) ด้วยฟังก์ขัน ss.addImage() ดูตย.ด้านล่าง*/
/*#################### เพิ่มรูปทีละชุด #################### */
/**/
ss.addImage('1.jpg','11.jpg');
ss.addImage('2.jpg','22.jpg');
//ss.addImage('img3.jpg','thumnail_img3.jpg');
//ss.addImage('img4.jpg','thumnail_img4.jpg');
ss.slideImage(0);
/**/
/*############################### #################### */
/*################# เพิ่มรูปด้วยวิธีวนรูป ################## */
/*
for(var i=4 ; i<9 ; i++){
ss.addImage('img'+i+'.jpg','thumnail_img'+i+'.jpg');
}
ss.slideImage(0);
/
/*############################### #################### */
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<center>
<b>สไลด์รูปสไตล์ opacity </b><br/><br/>
<table id="tbSlide" >
<tr >
<th rowspan="3" >
<div id="bb"><div id="showPic" ></div></div>
</th>
<td align="center"><input type="button" id="upList" value="UP" onclick="ss.upList()" disabled="disabled" style="width:50px"></td>
</tr>
<tr>
<td>
<div id="Pic"></div>
</td>
</tr>
<tr>
<td align="center"><input type="button" value="DOWN" id="downList" onclick="ss.downList()" disabled="disabled" style="width:50px"></td>
</tr>
</table><!--tbSlide-->
</center>
</body>
</html>
<?php
/*###### เพิ่มรูปจากฐานข้อมูล (ควรไว้หลัง </html> หรือ </table><!--tbSlide--> ) #### */
/*
echo "<script>\n";
&sql=mysql_connect("localhost","prcs_root","admin1q2w3e4r") or die("Error conncer database");
&sql=mysql_select_db("mydatabase");
//require ("config.inc");
$sql =mysql_query("select * from files ") or die(mysql_error());
while($rs =mysql_fetch_array($sql)){
echo "ss.addImage('".$rs[imgs]."','".$rs[thumnail]."');\n");
}
echo "ss.slideImage(0);\n";
echo "</script>\n";
/*############################################################### */
?>[/img]
นี้คับ
ขอบคุณเป็นอย่างสูงคับ
Tag : PHP
|
|
|
 |
 |
 |
 |
| Date :
2011-02-15 14:26:54 |
By :
YO |
View :
941 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
