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 > PHP > PHP Forum > ปัญหาใส่สไลท์ jQuery 2ตัว แต่รันแค่ตัวเดียวอะคับ รบกวนพี่ๆชี้ทางสว่างหน่อยคับ



 

ปัญหาใส่สไลท์ jQuery 2ตัว แต่รันแค่ตัวเดียวอะคับ รบกวนพี่ๆชี้ทางสว่างหน่อยคับ

 



Topic : 065969

Guest




Code (PHP)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Demo</title>
    <!-- เริ่ม script  สไลท์ภาพใหญ่-->
    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
    <!-- <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />  -->
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <!-- จบ script  สไลท์ภาพใหญ่-->
    
    
    <!-- เริ่ม script  สไลท์ภาพเล็ก-->
    <script type="text/javascript" language="javascript" src="jquery.js"></script>
		<script type="text/javascript" language="javascript" src="jquery.carouFredSel-4.4.3-packed.js"></script>
		<script type="text/javascript" language="javascript">
			jQuery.noConflict();
			jQuery(function() {

				//	Basic carousel
				jQuery('#foo0').carouFredSel();

				//	Basic carousel + timer
				jQuery('#foo1').carouFredSel({
					auto: {
						pauseOnHover: 'resume',
						onPauseStart: function( percentage, duration ) {
							jQuery(this).trigger( 'configuration', ['width', function( value ) { 
								jQuery('#timer1').stop().animate({
									width: value
								}, {
									duration: duration,
									easing: 'linear'
								});
							}]);
						},
						onPauseEnd: function( percentage, duration ) {
							jQuery('#timer1').stop().width( 0 );
						},
						onPausePause: function( percentage, duration ) {
							jQuery('#timer1').stop();
						}
					}
				});

				//	Fluid layout example
				jQuery(window).resize(function() {
					jQuery('#fooF').carouFredSel({
						width: jQuery(window).width(),
						scroll: 2
					});					
				}).resize();
			});
		</script>
    
    
    <!-- จบ script  สไลท์ภาพเล็ก-->
    
    
</head>

<style type="text/css" media="all">

/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:8;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:9;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	/*background-color: #d58306;*/
}
.menu {
	color: #FFF;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	
}
a:link {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: none;
	color: #F60;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
.footer {
	font-size: 9px;
	color: #FC0;
}
.wrapper {
				background-color: white;
				width: 480px;
				margin: 40px auto;
				padding: 50px;
				box-shadow: 0 0 20px #999;
			}
.image_carousel {
	padding: 15px 0 15px 40px;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 1px;
	margin: 7px;
	display: block;
	float: left;
}
.clearfix {
	float: none;
	clear: both;
}

</style>
<body>
<!-- เริ่ม ภาพใหญ่ -->
    <div id="wrapper">
      <div class="slider-wrapper theme-orman">
        <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" alt="" />
            <img src="images/up.jpg" alt=""/>
            <img src="images/walle.jpg" alt="" />
            <img src="images/nemo.jpg" alt=""/>
        </div>
      </div>
    </div>
	<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<!-- จบ ภาพใหญ่ -->
    
    <br>
<!-- เริ่ม ภาพเล็ก -->
   				<div class="image_carousel" style="position: relative; overflow: hidden; margin: 0px; width: 840px; height: 70px;">
					<div id="foo1">
						<img src="../pictest1.png" width="150" height="70" /></a>
						<img src="../pictest2.png" width="150" height="70" /></a>
						<img src="../pictest3.png" width="150" height="70" /></a>
						<img src="../pictest4.png" width="150" height="70" /></a>
						<img src="../pictest5.png" width="150" height="70" /></a>
						<img src="../pictest6.png" width="150" height="70" /></a>
                        <img src="../pictest7.png" width="150" height="70" /></a>
        			</div>
					<div class="clearfix"></div>
				</div>
<!-- จบ ภาพเล็ก -->
</body>
</html>




Tag : PHP, HTML/CSS, jQuery






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2011-09-05 12:03:50 By : peebowl View : 4135 Reply : 8
 

 

No. 1



โพสกระทู้ ( 11,835 )
บทความ ( 10 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ใส่ jquery core สองตัวมันตีกันครับ


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-09-05 12:24:01 By : ikikkok
 


 

No. 2

Guest


ตอบความคิดเห็นที่ : 1 เขียนโดย : ikikkok เมื่อวันที่ 2011-09-05 12:24:01
รายละเอียดของการตอบ ::
+-+อาพี่คับ รบกวนหน่อยคับ ต้องดึงเอาบรรทัดไหนออกบ้างอะคับ...
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-09-05 12:36:49 By : peebowl
 

 

No. 3



โพสกระทู้ ( 110 )
บทความ ( 0 )



สถานะออฟไลน์


<script type="text/javascript" language="javascript" src="jquery.js"></script>
ผมสงสัยตัวนี้ครับ ว่า jquery.js มันไม่มีเวอร์ชั่นเลยหรอครับ บ้างที่ jquery ที่รันได้มันอาจจะใช้เวอร์ชั่นนี้ได้
แต่ตัวที่ไม่รันอาจจะต้องใช้เวอร์ชั่นที่สูงกว่า (หรือเปล่า)


ประวัติการแก้ไข
2011-09-05 13:29:09
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-09-05 13:26:24 By : vissarud
 


 

No. 4



โพสกระทู้ ( 11,835 )
บทความ ( 10 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ตัวที่หนึ่ง
<script type="text/javascript" language="javascript" src="jquery.js"></script>
ตัวที่สอง
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>

เลือกเอาครับ แล้วเอาไว้บนๆ ใน tag head จะดีเอง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-09-05 13:56:41 By : ikikkok
 


 

No. 5

Guest


ไม่สำเร็จอะคับ เลือกมาตัวหนึ่งและ ย้ายมาข้างบนแล้วก็ยังทำงานแค่ตัวเดียวอะคับ

Code (PHP)
<head>
    <title>Demo</title>
    
    <!--<script type="text/javascript" language="javascript" src="jquery.js"></script>-->
    <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>

    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
     <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />  
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    
    
    
    <script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
    
    
    
    <!-- เริ่ม script  สไลท์ภาพเล็ก-->
    
		<script type="text/javascript" language="javascript" src="jquery.carouFredSel-4.4.3-packed.js"></script>
		<script type="text/javascript" language="javascript">
			jQuery.noConflict();
			jQuery(function() {

				//	Basic carousel
				jQuery('#foo0').carouFredSel();

				//	Basic carousel + timer
				jQuery('#foo1').carouFredSel({
					auto: {
						pauseOnHover: 'resume',
						onPauseStart: function( percentage, duration ) {
							jQuery(this).trigger( 'configuration', ['width', function( value ) { 
								jQuery('#timer1').stop().animate({
									width: value
								}, {
									duration: duration,
									easing: 'linear'
								});
							}]);
						},
						onPauseEnd: function( percentage, duration ) {
							jQuery('#timer1').stop().width( 0 );
						},
						onPausePause: function( percentage, duration ) {
							jQuery('#timer1').stop();
						}
					}
				});

				//	Fluid layout example
				jQuery(window).resize(function() {
					jQuery('#fooF').carouFredSel({
						width: jQuery(window).width(),
						scroll: 2
					});					
				}).resize();
			});
		</script>
    
    
    <!-- จบ script  สไลท์ภาพเล็ก-->
    
    
</head>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-09-05 15:12:01 By : peebowl
 


 

No. 6



โพสกระทู้ ( 11,835 )
บทความ ( 10 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ไม่รู้นะเดาว่า path ผิด

<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-4.4.3-packed.js"></script>

แล้วจะ noConflict ไปทำไมครับเนี้ย
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-09-05 15:21:27 By : ikikkok
 


 

No. 7

Guest


อ่ะ...ได้แล้วคับ ขอบคุนมากๆเลยคับ
ขอบคุนจิงๆคับ... เหมือนยกภูเขาออกจากอก ... .ดีใจสุดๆไม่รุจะบอกยังไง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-09-05 15:33:33 By : peebowl
 


 

No. 8



โพสกระทู้ ( 51 )
บทความ ( 0 )



สถานะออฟไลน์


พี่ๆครับแล้ว Code (JavaScript)
jquery-1.6.1.min.js

และ
Code (JavaScript)
jquery.tools.min.js

ละครับมันจำเป็นต้องใช้ทั้ง 2 ตัวเลยอะครับ ใช้ตัวได้ตัวนึงอีกตัวนึงก็ไม่ทำงานอะครับ ใช้พร้อมกันมันก็ทำงานตัวที่อยู่ล่าง ตัวที่เอาไว้ข้างบนก็ไม่ทำงานครับมีวิธีแก้ไขมั้ยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-01-09 09:49:20 By : ping8252
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ปัญหาใส่สไลท์ jQuery 2ตัว แต่รันแค่ตัวเดียวอะคับ รบกวนพี่ๆชี้ทางสว่างหน่อยคับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
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 อัตราราคา คลิกที่นี่