Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > สคิป Lightbox กับ สไลด์โชว์รูปชนกันไม่รู้ว่าจะแก้ไงดี หัวจะระเบิดแล้ว

สคิป Lightbox กับ สไลด์โชว์รูปชนกันไม่รู้ว่าจะแก้ไงดี หัวจะระเบิดแล้ว

เริ่มหัวข้อใหม่

babyprogrammer

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

คือว่าผมทำภาพเลือนเป็นแบนเนออ่ะครับก็ใช้ js ตามที่โหลดมา ก็ไม่เป็นไรใช้ได้แต่พอมาเจอหน้าที่มี Lightbox รูปก็เลื่อนไม่ได้กลายเป็นแสดงรูปทั้งหมดที่มี ใครเคยเจอแบบนี้บ้าง ช่วยหน่อยนะ
(ผมก็ไม่รู้จะเอาโค๊ตมาให้ดูไงเพราะก็ไม่ค่อยเข้าใจพวก js เท่าไร)

Tag : PHP

Date : 2010-11-12 15:50:34

By : babyprogrammer

View : 5074

Reply : 26

No. 1

Manussawin

โพสกระทู้ ( 2,258 )
บทความ ( 5 )

น่าจะติดตรงแท็ก <div> นะครับ ลองไล่ๆดู เพราะถ้าไม่ครอบ <div> หรืออยู่ในแท็ก <div> อันเดียวกัน มันก็จะชนแน่นอน

Date : 2010-11-12 16:14:22

By : Manussawin

No. 2

กะล่อน

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

อย่า include ไฟล์
jquery/1.3.2/jquery.min.js
หรือ
jqueryui/1.5.3/jquery-ui.min.js

มาซ้อนกันครับ

lightbox + slide ใช้

jquery/1.3.2/jquery.min.js
กับ
jqueryui/1.5.3/jquery-ui.min.js

ร่วมกันได้
ลองดูถ้าไม่หายค่อยว่ากันอีกที

ประวัติการแก้ไข
2010-11-12 16:24:57

Date : 2010-11-12 16:17:26

By : adaaugusta

No. 3

babyprogrammer

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

Code (PHP)

<link href="slideimg/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="slideimg/js/jquery.js"></script>
<script type="text/javascript" src="slideimg/js/easySlider1.7.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider({
			auto: true, 
			continuous: true,
			<!--numeric: true-->
		});
});//สไลด์รูป	


<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
//Lightbox
</script>

ไม่รู้จะเอาตรงไหนออก อ่ะครับ

ประวัติการแก้ไข
2010-11-12 16:31:31

Date : 2010-11-12 16:30:43

By : babyprogrammer

No. 4

PlaKriM

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

jQuery.noConflict();
	jQuery(document).ready(function(){	
		jQuery("#slider").easySlider({
			auto: true, 
			continuous: true,
			<!--numeric: true-->
		});
});//สไลด์รูป

Date : 2010-11-12 16:34:10

By : PlaKriM

No. 5

babyprogrammer

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

พี่PlaKriM ใช่แบบนี้ป่าวครับ แต่ก็ยังไม่ได้

<script type="text/javascript">
$(document).noConflict();
	$(document).ready(function(){	
		$("#slider").easySlider({
			auto: true, 
			continuous: true,
			<!--numeric: true-->
		});
	});	
</script>

Date : 2010-11-12 16:39:30

By : babyprogrammer

No. 6

PlaKriM

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

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#slider").easySlider({
auto: true,
continuous: true
});
});//สไลด์รูป

ใส่ jQuery.noConflict(); เพราะเห็นคุณใช้ prototype ด้วย

Date : 2010-11-12 17:05:39

By : PlaKriM

No. 7

กะล่อน

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

Code (PHP)

<link href="slideimg/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="slideimg/js/jquery.js"></script>
<script type="text/javascript" src="slideimg/js/easySlider1.7.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider({
			auto: true, 
			continuous: true,
			<!--numeric: true-->
		});
});//สไลด์รูป	
</script>

<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
//Lightbox
</script>

ลองงเอาไปรันดูนะครับ เหมือน มะกี้จะลืมปิด Script ถ้าไม่ได้ยังไง เดี๋ยวมาดูใหม่นะครับ

Date : 2010-11-12 17:19:01

By : adaaugusta

No. 8

babyprogrammer

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

ปิดแล้วก็ไม่ได้ครับ

Date : 2010-11-12 17:30:13

By : babyprogrammer

No. 9

กะล่อน

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

ขอดูโค้ดทั้งหน้าได้ไหมครับ ทั้งส่วนเรียกใช้ และ ส่วนประกาศสคริปต์

Date : 2010-11-12 17:33:44

By : adaaugusta

No. 10

Guest

อันนี้มัน comment ของ html ครับ
ของ js มี /* ... */ กับ //

แล้วก็
continuous: true,

ตัวสุดท้ายปล่อยให้มี , ไม่ได้นะครับ ต้องลบออกเป็น continuous: true

Date : 2010-11-12 17:54:02

By : :)

No. 11

PlaKriM

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

ตัวสุดท้ายปล่อยให้มี , ไม่ได้นะครับ ต้องลบออกเป็น continuous: true มีได้ครับ ถ้าใช้ firefox, chorme แต่ ie พี่เค้าไม่ค่อยยอมหรือพี่เค้าไม่เก่งก็ไม่รู้ 555

Date : 2010-11-12 18:04:35

By : PlaKriM

No. 12

กะล่อน

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

Code (PHP)

<link href="slideimg/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="slideimg/js/jquery.js"></script> 
<script type="text/javascript" src="slideimg/js/easySlider1.7.js"></script> 
<script type="text/javascript"> 
	$(document).ready(function(){	
		$("#slider").easySlider({
			auto: true, 
			continuous: true
		});
	});	
</script> 

<script src="lightbox/jsprototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
</script>

Date : 2010-11-12 18:08:59

By : adaaugusta

No. 13

Guest

ตัวสุดท้ายปล่อยให้มี , ไม่ได้นะครับ ต้องลบออกเป็น continuous: true มีได้ครับ ถ้าใช้ firefox, chorme แต่ ie พี่เค้าไม่ค่อยยอมหรือพี่เค้าไม่เก่งก็ไม่รู้ 555

^
syntax error นะครับ ตรงนี้ ie ไม่ผิดนะครับ ไม่ใช่ php นะครับ
เพียงแต่การจัดการกับ error ที่เบาๆ ต่างกันเท่านั้น

Date : 2010-11-12 18:22:59

By : :)

No. 14

babyprogrammer

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

Code (PHP)

<link href="slideimg/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="slideimg/js/jquery.js"></script>
<script type="text/javascript" src="slideimg/js/easySlider1.7.js"></script>
<script type="text/javascript">
<!--$(document).noConflict();-->
	$(document).ready(function(){	
		$("#slider").easySlider({
			auto: true, 
			continuous: true
		});
	});	
</script>
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />  

            <div id="slider">
                <ul><?
				$banner_pic=array('pic_banner2.jpg','pic_banner1.jpg','pic_banner3.jpg','pic_banner4.jpg','pic_banner5.jpg','pic_banner6.jpg','pic_banner7.jpg','pic_banner8.jpg','pic_banner9.jpg','pic_banner10.jpg','pic_banner11.jpg','pic_banner12.jpg','pic_banner13.jpg','pic_banner14.jpg','pic_banner15.jpg','pic_banner16.jpg','pic_banner1.jpg','pic_banner18.jpg');
				for($x=0;$x<=17;$x++){
					echo "<li><img src='../images_content/images_banner/$banner_pic[$x]' width='850'/></li>";
                }
                ?>
                </ul>
          </div>


    <td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr> <?
  $name_pic=array('coconut_4th01.jpg','coconut_4th02.jpg','coconut_4th03.jpg','coconut_4th04.jpg','coconut_4th09.jpg','coconut_4th10.jpg','coconut_4th11.jpg','coconut_4th13.jpg','coconut_4th15.jpg','coconut_4th16.jpg','coconut_4th17.jpg','coconut_4th18.jpg');
  for($x=0;$x<=11;$x++){
  ?>
        <td><table width="9%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="3%" align="left" valign="top"><img src="../images_content/Frame/Frame_pic/FramePic_01.gif" width="10" height="9" /></td>
            <td width="36%" align="left" valign="top"><img src="../images_content/Frame/Frame_pic/FramePic_02.gif" width="145" height="9" /></td>
            <td width="61%" align="left" valign="top"><img src="../images_content/Frame/Frame_pic/FramePic_03.gif" width="7" height="9" /></td>
          </tr>
          <tr>
            <td align="left" valign="top" background="../images_content/Frame/Frame_pic/FramePic_04.gif">&nbsp;</td>
            <td align="left" valign="top"><a href="../images_content/images_pattaya/coconut/4th/<?=$name_pic[$x]?>" rel="lightbox[roadtrip]" title="Coconut Condo 4th floor"><img src="../images_content/images_pattaya/coconut/4th/<?=$name_pic[$x]?>" width="145" border="0"/></a></td>
            <td align="left" valign="top" background="../images_content/Frame/Frame_pic/FramePic_06.gif">&nbsp;</td>
          </tr>
          <tr>
            <td height="9" align="left" valign="top"><img src="../images_content/Frame/Frame_pic/FramePic_07.gif" width="10" height="9" /></td>
            <td align="left" valign="top"><img src="../images_content/Frame/Frame_pic/FramePic_08.gif" width="145" height="9" /></td>
            <td align="left" valign="top"><img src="../images_content/Frame/Frame_pic/FramePic_09.gif" width="7" height="9" /></td>
          </tr>
        </table>
          <?
  	$count++;
	if($count%4==0){
		echo '</tr>';
		echo '<tr>';
	}
  }
  
 ?></td>

อันนี้เป็นตอนแรกใช้งาน
ไม่รู้ว่าต้องเอาไฟล์ js มาให้ดูด้วยรึป่าวครับ แต่มันเยอะอ่ะ

Date : 2010-11-12 18:33:10

By : babyprogrammer

No. 15

เอี่ยว

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

Code (PHP)

<script type="text/javascript" src="slideimg/js/jquery.js"></script>
<script type="text/javascript" src="slideimg/js/easySlider1.7.js"></script>
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

<script type="text/javascript">
(function($){
	$(document).ready(function(){	
		$("#slider").easySlider({
			auto: true, 
			continuous: true
		});
	});	
})(JQeury);
</script>

ลองดูคับ

ปล.ไม่เคยใช้ easyslider และ lightbox

Date : 2010-11-12 19:05:40

By : pjgunner.com

No. 16

Hatori

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

ตอนแรกผมก็ติดเหมือนกันครับ ผมใช้ dropdown menu ชนกับ lightbox เต็ม ผมทำตามพี่ PlaKriM บอกมา

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#slider").easySlider({
auto: true,
continuous: true
});
});//สไลด์รูป

ใส่ jQuery.noConflict(); เพราะเห็นคุณใช้ prototype ด้วย

ผมเปลี่ยน $ ให้เป็น jQuery ทั้งหมดเลย รันผ่านครับไม่มีปัญหา ขอบคุณพี่ PlaKriM มากๆ ครับ

โค้ดของผมเผื่อมีใครจะเจอปัญหาเหมือนกันแล้วมาเจอครับ

<script type="text/javascript">
var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

function jsddm_open()
{	jsddm_canceltimer();
	jsddm_close();
	ddmenuitem = jQuery(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{	closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{	if(closetimer)
	{	window.clearTimeout(closetimer);
		closetimer = null;}}
jQuery.noConflict();
jQuery(document).ready(function()
{	jQuery('#jsddm > li').bind('mouseover', jsddm_open);
	jQuery('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
</script>

Date : 2010-12-03 01:14:07

By : hatori

No. 17

PlaKriM

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

ตอบความคิดเห็นที่ : 16 เขียนโดย : hatori เมื่อวันที่ 2010-12-03 01:14:07

รายละเอียดของการตอบ ::

ยินดีครับท่าน

Date : 2010-12-03 03:21:40

By : PlaKriM

No. 18

ranarong

โพสกระทู้ ( 1,242 )
บทความ ( 13 )

(function($){
	JQeury(document).ready(function(){	
		JQeury("#slider").easySlider({
			auto: true, 
			continuous: true
		});
	});	
})(JQeury);

เท่าที่สังเกตุเห็นน่าจะเป็นการชนกัน ของ library framework 2 ตัวคือ Prototype กับ jQuery

ปล. jQuery lighbox ก็มีครับ

ประวัติการแก้ไข
2010-12-03 06:45:32

Date : 2010-12-03 06:32:44

By : DS_Ohm

No. 19

Guest

เจอปัญหานี้เหมือนกันคะ แต่พอเปลี่ยน $ เป็น jQuery แล้ว รันได้ตามปกติเลยคะ ขอบคุณนะคะที่แนะนำ

Date : 2011-02-10 12:27:00

By : Mee

No. 20

Guest

$ เป็น jQuery +1

Date : 2011-04-23 23:56:59

By : @reekoong

No. 21

Guest

สวัสดีค่ะ

ตอนนี้มีปัญหา slide ชนกับ js อ่าค่ะ....รบกวนช่วยหน่อยน่ะค่ะ

Code (JavaScript)

<script type="text/javascript">

jQuery.noConflict();
jQuery(document).ready(function($){	
	
	//Execute the slideShow
	
	slideShow();
	auto: true,
	continuous: true,

});

function slideShow() {

	//Set the opacity of all images to 0
	$('#gallery a').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('#gallery a:first').css({opacity: 1.0});
	
	//Set the caption background to semi-transparent
	$('#gallery .caption').css({opacity: 0.7});

	//Resize the width of the caption according to the image width
	$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
	
	//Get the caption of the first image from REL attribute and display it
	$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
	.animate({opacity: 0.7}, 1000);
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',4000);
	
}

function gallery() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
	//Set the opacity to 0 and height to 1px
	$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
	
	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
	$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
	
	//Display the content
	$('#gallery .content').html(caption);
	
	
}

</script>

........กับ...........

Code (JavaScript)

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Date : 2011-06-02 10:04:10

By : อยากรู้

No. 22

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

Go to : prettyPhoto jQuery lightbox SlideShow สร้าง lightbox ทำ Gallery ด้วย prettyPhoto

Go to : ColorBox jQuery Images SlideShow ทำ Gallery แบบ สไลด์รูปภาพแสดงภาพเปลี่ยนไปเรื่อยๆ

Go to : Popup Fancybox jQuery and PHP Mysql สร้างกล่อง Fancybox ทำงานร่วมกับ PHP และ MySQL

Date : 2011-10-28 21:23:08

By : webmaster

No. 23

tenichi

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

Code (JavaScript)

<link rel="stylesheet" type="text/css" href="css/demo2.css" media="screen" />
<SCRIPT type="text/javascript" src="js/jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/script2.js"></SCRIPT>


<link href="css/108livep2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/css2.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
	jQuery.noConflict();
	jQuery(function(){
		jQuery('#drop li').mouseenter(function(){
			jQuery(this).find('ul').css("display","block");
		}).mouseleave(function(){
			jQuery(this).find('ul').css("display","none");
		})
	});
</script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />	
<script src="js/js/prototype.js" type="text/javascript"></script>
<script src="js/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/js/lightbox.js" type="text/javascript"></script>

ของผมแก้ยังไงเหรอครับ

Date : 2011-12-28 10:55:39

By : tenichi

No. 24

toom

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

ขอบคุณพี่ด้วยค่ะ ทำได้แล้ว อิอิ

Date : 2013-05-21 11:48:47

By : nongtoom

No. 25

Guest

ขอบคุณมากค่ะ งมตั้งนาน แค่เปลี่ยน $ เป็น jQuery ได้เลยค่ะ

Date : 2013-05-30 10:34:04

By : utchy

No. 26

Guest

เเเ

Date : 2015-12-12 13:20:04

By : ผผ

ค้นหาข้อมูล

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

Re : สคิป Lightbox กับ สไลด์โชว์รูปชนกันไม่รู้ว่าจะแก้ไงดี หัวจะระเบิดแล้ว

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

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

Load balance : Server 01

Registered : 109,037

document.write("<font color=996600>[PHP]</font>"); สคิป Lightbox กับ สไลด์โชว์รูปชนกันไม่รู้ว่าจะแก้ไงดี หัวจะระเบิดแล้ว

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

No. 7

No. 8

No. 9

No. 10

No. 11

No. 12

No. 13

No. 14

No. 15

No. 16

No. 17

No. 18

No. 19

No. 20

No. 21

No. 22

No. 23

No. 24

No. 25

No. 26

ค้นหาข้อมูล

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

Notice

สคิป Lightbox กับ สไลด์โชว์รูปชนกันไม่รู้ว่าจะแก้ไงดี หัวจะระเบิดแล้ว