 |
|
ขออธิบายก่อนนะครับ คือว่าผมมี javascript อยู่ 2 ชุด แล้วจะนำมา รวม กัน พอผมได้ลองเอามารวมกันแล้ว มันรันได้อันด้วย ก็เลยมาถามครับผมใครช่วยได้ กรุณาหน่อยครับ เริ่มเลยนะครับ
ชุดที่ 1 จากรูปโค๊ดจะเป็นตามข้างล่างนี้นะครับ
Code (JavaScript)
<script type="text/javascript" src="jquery.js">//slide Show</script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function(){
$('#slide').cycle({
fx: 'zoom,fadeZoom',
pagerEvent: 'mouseover',
pager: '#nav',
speed: 1000,
pause: 1
});
});
</script>
<style>
#nav { margin: 4px; }
#nav a { margin: 4px; padding: 2px 4px; border: 1px solid #ccc; background: #CCCCCC; text-decoration: none }
#nav a.activeSlide { background: #999999 }
#nav a:focus { outline: none; }
.pics {
height: 370px;
width: 380px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 380px;
height: 370px;
top: 0;
left: 0
}
</style>
<body>
<div id="slide">
<img width="379" height="311" src="1.jpg" />
<img width="379" height="311" src="2.jpg" />
<img width="379" height="311" src="3.jpg" />
</div>
<div id="nav"></div>
ชุดที่2
โค๊ด
Code (JavaScript)
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="jquery.min.js">// Full Screen</script>
<script src="jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example4']").colorbox({slideshow:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
<body>
<a href="1.jpg" rel="example4">1</a>
<a href="2.jpg" rel="example4">2</a>
<a href="3.jpg" rel="example4">3</a>
</body>
--------------------------------------------------------
ด้านล่างนี้ผมเอามารวมกัน ไม่รู้ว่าผิดตรงไหนทำไมถึง รันได้แค่อันเดียว ผู้รู้ช่วยหน่อยครับ
Code (JavaScript)
<script type="text/javascript" src="jquery.js">//slide Show</script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="jquery.min.js">// Full Screen</script>
<script src="jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example4']").colorbox({slideshow:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
$(function(){
$('#slide').cycle({
fx: 'zoom,fadeZoom',
pagerEvent: 'mouseover',
pager: '#nav',
speed: 1000,
pause: 1
});
});
</script>
<style>
#nav { margin: 4px; }
#nav a { margin: 4px; padding: 2px 4px; border: 1px solid #ccc; background: #CCCCCC; text-decoration: none }
#nav a.activeSlide { background: #999999 }
#nav a:focus { outline: none; }
.pics {
height: 370px;
width: 380px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 380px;
height: 370px;
top: 0;
left: 0
}
</style>
<body>
<div id="slide1">
<a href="1.jpg" rel="example4"><img width="379" height="311" src="1.jpg" /> </a>
<a href="2.jpg" rel="example4"><img width="379" height="311" src="2.jpg" /> </a>
<a href="3.jpg" rel="example4"><img width="379" height="311" src="3.jpg" /> </a>
</div>
<div id="nav"></div>
Tag : PHP, MySQL, JavaScript, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2011-06-27 18:05:23 |
By :
okboou |
View :
1250 |
Reply :
7 |
|
 |
 |
 |
 |
|
|
|
|
 |
