Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > Graphic for Web > Image Slide Show by ajax & CSS



Image Slide Show by ajax & CSS

 
 

 
Bookmark.
index.html
<?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

<title>AJAX Slideshow</title>

<link href="ajax-slideshow.css" rel="stylesheet" type="text/css" />
<script src="ajax-slideshow.js" type="text/JavaScript" charset="utf-8"></script>

<script type="text/JavaScript" charset="utf-8">


var photoDir = "images/"; // Location of photos for gallery
var borderSize = 6; // = 2x CSS border size

// get current photo id from URL
var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;

// if no id in query string then set to 0
photoId = (!photoId)? 0:photoId;

// Define each photo's name, height, width, and caption
var photoArray = new Array(
// Source, Width, Height, Caption

/* เปลี่ยนรูปที่นี่ครับ */
new Array("3.jpg", "500", "280", "Door 3 - Click on the image to view previous or next image"),
new Array("2.jpg", "425", "319", "Door 2 - Click on the image to view previous or next image"),
new Array("1.jpg", "700", "260", "Door 1 - Click on the image to view previous or next image")
);

// Number of photos in this gallery
var photoNum = photoArray.length;

// Create access to 'Detect' object and a place to put instances of 'HTMLobj'
API = new Detect();

// CREATE INSTANCES & LOAD
loadAPI = function(){
// Instantiate HTMLobj
API.Container = new HTMLobj('Container');
API.Photo = new HTMLobj('Photo');
API.PhotoContainer = new HTMLobj('PhotoContainer');
API.LinkContainer = new HTMLobj('LinkContainer');
API.PrevLink = new HTMLobj('PrevLink');
API.NextLink = new HTMLobj('NextLink');
API.CaptionBlock = new HTMLobj('CaptionBlock');
API.Counter = new HTMLobj('Counter');
API.Caption = new HTMLobj('Caption');
API.LoadImg = new HTMLobj('LoadImg');

// Show initial photo
cyclePhoto(photoId);
}
onload = loadAPI;

// Fade in photo when it is loaded from the server
initFade = function(){
// Show PhotoContainer again
API.PhotoContainer.show();

// Be certain the tween is complete before fading, too
var fade_timer = setInterval('startFade()', 1000);

// Fade photo in when ready and clear listener
startFade = function(){
if(API.Container._tweenRunning == false){
clearInterval(fade_timer);

// Be certain fade is done running before allowing next/previous links to work
// This avoids rapid fade-in when users click next/previous links in quick succession
var adv_timer = setInterval('permitNextPrev()', 500);

// Permit next/previous links to function normally when fade is completed
permitNextPrev = function(){
if(API.Photo._fadeRunning == false){
clearInterval(adv_timer);

// Only show links if there is more than one photo in array
if(photoNum > 1){
API.LinkContainer.displayShow();
document.getElementById('NextLink').onclick = nextPhoto;
document.getElementById('PrevLink').onclick = prevPhoto;
}
} else {
return;
}
}
// Swap out loading animation to spare CPU cycles when hidden anyway
API.LoadImg.setSrc("images/slideshow/start.gif");

// Show caption again
API.CaptionBlock.show();

// Fade photo in
API.Photo.fadeIn(0,15,33);
} else {
return;
}
}
}

// Prevent next/previous
falsify = function(){
return false;
}

// Go to next photo
nextPhoto = function(){
// Go to next photo
if(photoId == (photoArray.length - 1)){
photoId = 0;
} else {
photoId++;
}
cyclePhoto(photoId);
}

// Go to previous photo
prevPhoto = function(){
// If at start, go back to end
if(photoId == 0){
photoId = photoArray.length - 1;
} else {
photoId--;
}
cyclePhoto(photoId);
}

// Alter class of elements
changeElementClass = function(objId,setClass) {
document.getElementById(objId).className = setClass;
}

// Function to load subsequent photos in gallery
cyclePhoto = function(photoId){

// Swap in loading animation
API.LoadImg.setSrc("images/slideshow/loading_ani2.gif");

// Hide link container if it is not already hidden
API.LinkContainer.displayHide();

// Hide photo container and caption temporarily
API.Photo.hide();
API.Photo.setOpacity(0);
API.CaptionBlock.hide();

// Get dimensions of photo
var wNew = photoArray[photoId][1];
var hNew = photoArray[photoId][2];

// Start tween on a delay
var wCur = API.Container.getWidth() - borderSize;
var hCur = API.Container.getHeight() - borderSize;

// Begin tweening on a short timer
setTimeout('API.Container.tweenTo(easeInQuad, ['+wCur+', '+hCur+'], ['+wNew+','+hNew+'], 7)',500);
setTimeout('API.LinkContainer.sizeTo('+wNew+','+hNew+')',500);
setTimeout('API.PrevLink.sizeTo('+wNew/2+','+hNew+')',500);
setTimeout('API.NextLink.sizeTo('+wNew/2+','+hNew+')',500);
setTimeout('API.CaptionBlock.sizeTo('+wNew+',18)',500);

// Get new photo source
var newPhoto = photoDir + photoArray[photoId][0];

// Set source, width, and height of new photo
API.Photo.setSrc(newPhoto);
API.Photo.sizeTo(wNew,hNew);

// Set links to new targets based on photoId
API.NextLink.setHref("#" + (photoId+1));
API.PrevLink.setHref("#" + (photoId+1));
API.Counter.setInnerHtml((photoId+1)+" of "+photoNum+" |");
API.Caption.setInnerHtml(photoArray[photoId][3]);

// Event listeners for onload and onclick events
document.getElementById('Photo').onload = initFade;

// Block next/previous links until permitNextPrev() has fired
document.getElementById('NextLink').onclick = falsify;
document.getElementById('PrevLink').onclick = falsify;
}
// ]]>
</script>

</head>

<body>

<!-- resizable container -->
<div id="Container">
<div id="LinkContainer">
<a href="#" id="PrevLink" onfocus="this.blur();" accesskey="[" title="&laquo; Previous Photo" class="plainlink"><span>Previous</span></a><a href="#" id="NextLink" onfocus="this.blur();" accesskey="]" title="Next Photo &raquo;" class="plainlink"><span>Next</span></a>
</div>
<div id="PhotoContainer"><img id="Photo" src="images/1.gif" alt="" width="300" height="150" /></div>
<div id="LoadContainer"><img id="LoadImg" src="images/loading_ani2.gif" alt="Loading..." width="48" height="54" /></div>
</div>

<!-- counter and caption -->
<p id="CaptionBlock"><span id="Counter"></span> <span id="Caption"></span></p>
</div>

</body>
</html>

?>

ajax-slideshow.js
// |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
//
// Coded by Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
// If want to use this code, feel free to do so, but please leave this message intact.
// If you do remove this, I will hunt you down :)
//
// |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// --- myapi version date: 03/29/02 ------------------------------------------------------
//
// ---------------------------------------------------------------------------------------
// Several functions added or modified by Scott Upton, Uptonic.com
// January 2005
// ---------------------------------------------------------------------------------------

Detect = function(){
var agent = navigator.userAgent.toLowerCase();
this._mac = agent.indexOf('mac') != -1;
this._win = !this._mac;
this._w3c = document.getElementById;
this._iex = document.all;
this._ns4 = document.layers;
}
Detect.prototype.getObj = function(name){
if(this._w3c){
return document.getElementById(name);
}else if(this._iex){
return document.all[name];
}else if(this._ns4){
return this.getObjNS4(document,name);
}
}
Detect.prototype.getObjNS4 = function(obj, name){
var d = obj.layers;
var result,temp;
for(var i=0; i<d.length; i++){
if(d[i].id == name){
result = d[i];
}else if(d[i].layers.length){
var temp = this.getObjNS4(d[i],name);
}
if(temp){
result = temp;
}
}
return result;
}
Detect.prototype.getStyle = function(obj){
return (this._ns4) ? obj : obj.style;
}
Detect.prototype.getWindowWidth = function(){ // width of the window
return this._iex ? document.body.clientWidth : window.innerWidth;
}
Detect.prototype.getWindowHeight = function(){ // height of the window
return this._iex ? document.body.clientHeight : window.innerHeight;
}
Detect.prototype.getScrollTop = function(){ // top scroll position of the window
return this._iex ? document.body.scrollTop : window.pageYOffset;
}
Detect.prototype.getScrollLeft = function(){ // left scroll position of the window
return this._iex ? document.body.scrollLeft : window.pageXOffset;
}
Detect.prototype.setScrollTop = function(n){ // set the vertical scroll position of the window
window.scrollTo(this.getScrollLeft(),n);
}
Detect.prototype.setScrollLeft = function(n){ // set the horizontal scroll position of the window
window.scrollTo(n,this.getScrollTop());
}
Detect.prototype.setScroll = function(x,y){ // set the x,y scroll position of the window
window.scrollTo(x,y);
}

// :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

// HTMLobj Constructor

HTMLobj = function(name){
if(name){
this._inherit = Detect; this._inherit(name);
this._id = name;
this._el = this.getObj(this._id);
this._css = this.getStyle(this._el);
this._obj = name+'Object'; eval(this._obj+'=this');
this._timer = null;
this._glideRunning = false;
this._tweenRunning = false;
this._fadeRunning = false; // Added by SU, Couloir
this._randNum = null; // Added by SU, Couloir
this._startFade = false; // Added by SU, Couloir
return this;
}
}
HTMLobj.prototype = new Detect();

HTMLobj.prototype.getLeft = function(){ // left position of the element
return parseInt(this._css.left || 0);
}
HTMLobj.prototype.getTop = function(){ // top position of the element
return parseInt(this._css.top || 0);
}
HTMLobj.prototype.getWidth = function(){ // width of the element
if(this._ns4){
return this._el.document.width;
}else{
return this._el.offsetWidth;
}
}
HTMLobj.prototype.getHeight = function(){ // height of the element
if(this._ns4){
return this._el.document.height;
}else{
return this._el.offsetHeight;
}
}
HTMLobj.prototype.getClipWidth = function(){ // clip width of the element
if(this._ns4){
return this._el.clip.width;
}else{
return this._el.offsetWidth;
}
}
HTMLobj.prototype.getClipHeight = function(){ // clip height of the element
if(this._ns4){
return this._el.clip.height;
}else{
return this._el.offsetHeight;
}
}
HTMLobj.prototype.setStyle = function(prop, val){ // change the value of any css property
if(!this._ns4){
this._el.style[prop] = val;
if(this._iex && this._mac){
this._el.innerHTML = this._el.innerHTML;
}
}
}
HTMLobj.prototype.show = function(){ // show the visibility of the element
this._css.visibility = 'visible';
}
HTMLobj.prototype.hide = function(){ // hide the visibility of the element
this._css.visibility = 'hidden';
}
HTMLobj.prototype.showhide = function(){ // toggle the visibility of the element
if(this._css.visibility == 'hidden' || this._css.visibility == 'hide'){
this._css.visibility = 'visible';
}else{
this._css.visibility = 'hidden';
}
}
HTMLobj.prototype.setInner = function(html){ // change the contents of the element
if(this._ns4){
this._el.document.open();
this._el.document.write(html);
this._el.document.close();
}else{
this._el.innerHTML = html;
}
}
HTMLobj.prototype.moveTo = function(x,y){ // move the element to a new position
if(this._ns4){
this._el.moveTo(x,y);
}else{
this._css.left = x;
this._css.top = y;
}
}
HTMLobj.prototype.moveBy = function(x,y){ // move the element to a new position relative to it's current position
if(this._ns4) {
this._el.moveBy(x,y);
}else{
this._css.left = this.getLeft()+x;
this._css.top = this.getTop()+y;
}
}
HTMLobj.prototype.sizeTo = function(w,h){ // set the size of the element
if(!this._ns4){
this._css.width = w+'px';
this._css.height = h+'px';
}
}
HTMLobj.prototype.sizeBy = function(w,h){ // set the size of the element relative to it's current size
if(!this._ns4){
this._css.width = this.getWidth()+w+'px';
this._css.height = this.getHeight()+h+'px';
}
}
HTMLobj.prototype.glideTo = function(x,y,callback){ // ease-out animation, callback function optional
if(this._glideRunning){
var left = this.getLeft();
var top = this.getTop();
if(Math.abs(left-x)<=1 && Math.abs(top-y)<=1){
this.moveTo(x,y);
this.cancelGlide();
if(callback){
eval(this._obj+'.'+callback+'()');
}
}else{
this.moveTo(left+(x-left)/2, top+(y-top)/2);
}
}else{
var c = (callback) ? ',\"'+callback+'\"' : '' ;
this._timer = setInterval(this._obj+'.glideTo('+x+','+y+c+')',100);
this._glideRunning = true;
}
}
HTMLobj.prototype.cancelGlide = function(){ // cancel the glideTo method
clearInterval(this._timer);
this._timer = null;
this._glideRunning = false;
}
HTMLobj.prototype.swapDepth = function(obj){ // swap the z-index of 2 elements
var temp = this._css.zIndex;
this._css.zIndex = obj._css.zIndex;
obj._css.zIndex = temp;
}
// -------------------------------------------
// Modified by SU, Uptonic.com
// -------------------------------------------
HTMLobj.prototype.tweenTo = function(method, start, end, time){ // time-based animation, with multiple easing methods
// method: a function that takes 4 arguments: time, start, change, and duration
// start: array of starting width, height dimensions [w, h]
// end: array of ending width, height dimensions [w, h]
// time: number of 'frames' it takes to get to the end position
if(!this._tweenRunning){
this._tweenTime = 0;
var s = '['+start.toString()+']';
var e = '['+end.toString()+']';
this._timer = setInterval(this._obj+'.tweenTo('+method+','+s+','+e+','+time+')', 33);
this._tweenRunning = true;
}
if(++this._tweenTime > time){
this.cancelTween();
}else{
var w = method(this._tweenTime, start[0], end[0]-start[0], time);
var h = method(this._tweenTime, start[1], end[1]-start[1], time);
this.sizeTo(w,h);
}
}
HTMLobj.prototype.cancelTween = function(){ // cancel the tweenTo method
clearInterval(this._timer);
this._timer = null;
this._tweenRunning = false;
this._startFade = true;
}

// -> Easing Equations by Robert Penner - robertpenner.com -
linearTween = function(t, b, c, d){
return c*t/d + b;
}
easeInQuad = function(t, b, c, d){
t /= d;
return c*t*t + b;
}
easeOutQuad = function(t, b, c, d){
t /= d;
return -c * t*(t-2) + b;
}
easeInOutQuad = function(t, b, c, d){
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
}
easeInExpo = function(t, b, c, d){
return c * Math.pow( 2, 10 * (t/d - 1) ) + b;
}
easeOutExpo = function(t, b, c, d){
return c * ( -Math.pow( 2, -10 * t/d ) + 1 ) + b;
}
// -------------------------------------------
// Added by SU, Uptonic.com
// December 2004 - January 2005
// -------------------------------------------
HTMLobj.prototype.getRandom = function(start,end){ // generate new random number
this._randNum= Math.round(start + ((end-start) * Math.random()));
return this._randNum;
}
HTMLobj.prototype.setOpacity = function(opacity){ // set opacity of the element
// Fix for math error in some browsers
opacity = (opacity == 100)?99.999:opacity;
// IE/Windows
this._css.filter = "alpha(opacity:"+opacity+")";
// Safari < 1.2, Konqueror
this._css.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
this._css.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
this._css.opacity = opacity/100;
}
HTMLobj.prototype.fadeOut = function(opacity, change, speed){ // gradually decrease the opacity of the element
// opacity: starting opacity of element
// change: the size of the increments between steps
// speed: the rate of the animation
if (opacity >= 0){
this._fadeRunning = true;
this.setOpacity(opacity);
opacity -= change;
setTimeout(this._obj+'.fadeOut('+opacity+','+change+','+speed+')', speed);
} else {
this._fadeRunning = false;
this.hide();
}
}
HTMLobj.prototype.fadeIn = function(opacity, change, speed){ // gradually increase the opacity of the element
// opacity: starting opacity of element
// change: the size of the increments between steps
// speed: the rate of the animation
if (opacity <= 100){
this.show();
this._fadeRunning = true;
this.setOpacity(opacity);
opacity += change;
setTimeout(this._obj+'.fadeIn('+opacity+','+change+','+speed+')', speed);
} else {
this._fadeRunning = false;
this.setOpacity(100);
}
}
HTMLobj.prototype.displayShow = function(){ // display the element as 'block'
this._css.display = 'block';
}
HTMLobj.prototype.displayHide = function(){ // do not display the element
this._css.display = 'none';
}
HTMLobj.prototype.setSrc = function(target){ // set the element's source to target
this._el.src = target;
}
HTMLobj.prototype.setHref = function(target){ // set the element's link to target
this._el.href = target;
}
HTMLobj.prototype.setInnerHtml = function(content){ // set the element's inner HTML to content
this._el.innerHTML = content;
}



ajax-slideshow.css
*{
margin:0;
padding:0}

a:link,a:visited{
color:#333;
text-decoration:none
}

a:hover,a:visited:hover{
color:#000;
text-decoration:underline
}

a.inactive:link,a.inactive:visited{
color:#CECEB5
}

#Container{
margin:0 auto;
padding: 0;
position:relative;
width:100%;
height:310px;
background-color:#fff;
border:3px solid #CECEB5;
overflow:hidden
}

#LoadContainer{
height:25%;
width:50%;
position:absolute;
top:40%;
left:25%;
text-align:center;
z-index:1
}

#PhotoContainer{
visibility:hidden
}

#CaptionBlock{
height:18px;
width:582px;
text-align:left;
margin:0 auto
}
#Caption{
color:#333
}

#License{
margin:0 auto;
padding-top:10px;
font-size:10px;
color:#666;
border-top:1px solid #CECEB5;
width:740px;
text-align:left;
line-height:1.4em;
}

#LinkContainer{
display:none;
position:absolute;
top:0;left:0;
height:200px;
width:200px;
z-index:100;
background:url(images/slideshow/start.gif) 50% 50% no-repeat
}

#PrevLink{
z-index:100;
position:absolute;
top:0%;
left:0%;
height:200px;
width:50%;
display:block
}

#NextLink{
z-index:100;
position:absolute;
top:0%;
left:50%;
height:200px;
width:50%;
display:block
}

#PrevLink:hover,#NextLink:hover{
text-decoration:none
}

#PrevLink:hover{
background:transparent url(images/slideshow/prev_rounded_sidebar2.gif) left 50% no-repeat
}

#NextLink:hover{
background:transparent url(images/slideshow/next_rounded_sidebar2.gif) right 50% no-repeat
}

#PrevLink span,#NextLink span{
display:none
}

img{
border:none
}

p{
font-size:11px;
padding:1em 0
}

#Wrapper{
margin:0 auto;
height:500px;
width:100%;
overflow:hidden;
position:relative
}

#Wrapper[id]{
display:table;
position:static
}

#InnerWrapper{
position:absolute;
top:50%;
left:0;
}

#InnerWrapper[id]{
display:table-cell;
vertical-align:middle;
position:static
}

#OuterContainer{
position:relative;
top:-50%
}


ปล.ผมพยายามอับโหลดไฟล์ zip แล้วนะครับแต่ยังไม่ได้ เดี๋ยวยังไงจะเอาลิงค์มาให้โหลดนะครับ





  By : ZepheruS
  Score Rating :
  Create Date : 2009-09-23 22:26:25
  View : 11,432
  Download : No files
     

Sponsored Links
  Clound SSD Virtual Server

Sponsored Links


เชิญชวนกันเขียนบทความเกี่ยวกับ การออกแบบกราฟฟิค (Graphic) บนเว็บไซต์
เชิญชวนกันเขียนบทความเกี่ยวกับ การออกแบบกราฟฟิค (Graphic) บนเว็บไซต์
ThaiCreate.Com เปิดช่องทางให้สมาชิกสามารถเขียนบทความเกี่ยวกับการออกแบบกราฟฟิค เช่น Flash,Photoshop หรือโปรแกรมอื่น ๆ
Rating :
Update :
2008-12-28 16:38:19 View : 6,668
เทคนิค   PHOTOSHOP
เทคนิค PHOTOSHOP
เทคนิค PHOTOSHOP กรอบภาพด้วย Filter
Rating :
Update :
2009-05-14 10:57:14 View : 8,923
โปรแกรมอ่านไฟล์ pdf แบบไวสุดๆๆ
โปรแกรมอ่านไฟล์ pdf แบบไวสุดๆๆ
Foxitreader โปรแกรมตัวนี้ใช้อ่านไฟล์เอกสาร PDF แบบไวสุด ๆ ใช้งานง่ายและสะดวกมาก ๆ ครับ
Rating :
Update :
2009-01-11 08:18:31 View : 142,856
Flash Menu ง่ายนิดเดียว
Flash Menu ง่ายนิดเดียว
แนะนำโปรแกรมทำ flash menu ครับ ไม่ต้องเก่ง Flash ก็ทำได้ครับ
Rating :
Update :
2009-03-12 14:55:29 View : 37,314
โปรแกรมอัถประโยชน์-แต่งภาพแบบชิวๆ
โปรแกรมอัถประโยชน์-แต่งภาพแบบชิวๆ
สุดยอดโปรแกรมอัถประโยชน์-แต่งภาพแบบชิวๆ กับเมืออาชีพในการตกแต่งภาพด้วยเครื่องมือ PicPick
Rating :
Update :
2009-01-11 08:19:19 View : 11,184
ปริ้นสกรีนหน้าจอทั้งสกรีนแบบง่าย ๆ ด้วย HyperSnap
ปริ้นสกรีนหน้าจอทั้งสกรีนแบบง่าย ๆ ด้วย HyperSnap
โปรแกรมตัวนี้ผมยอมรับว่าใช้งานได้ดีมาก ๆ ครับ สะดวกและใช้งานง่ายทุกตัวที่ผมเคยใช้มาจริง ๆ ครับ
Rating :
Update :
2009-01-11 07:32:17 View : 18,446
ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่