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,038

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



 

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

 



Topic : 063893



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

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

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




Code (PHP)
01.<script type="text/javascript" src="js/prototype.js"></script>
02.<script type="text/javascript" src="js/lightbox_form.js"></script>
03. 
04.<script type="text/javascript" src="js/slider_image.js"></script><!--สำหรับทำสไลด์รูป-->
05.<script type="text/javascript">
06.var $j = jQuery.noConflict();//set for $ is $j of JQUERY
07.$j(document).ready(function() {    
08.     
09.    //Execute the slideShow
10.    slideShow();
11. 
12.});
13. 
14.function slideShow() {
15.    var $j = jQuery.noConflict();//set for $ is $j of JQUERY
16.    //Set the opacity of all images to 0
17.    $j('#gallery a').css({opacity: 0.0});
18.     
19.    //Get the first image and display it (set it to full opacity)
20.    $j('#gallery a:first').css({opacity: 1.0});
21.     
22.    //Set the caption background to semi-transparent
23.    $j('#gallery .caption').css({opacity: 0.7});
24. 
25.    //Resize the width of the caption according to the image width
26.    $j('#gallery .caption').css({width: $j('#gallery a').find('img').css('width')});
27.     
28.    //Get the caption of the first image from REL attribute and display it
29.    $j('#gallery .content').html($j('#gallery a:first').find('img').attr('rel'))
30.    .animate({opacity: 0.7}, 400);
31.     
32.    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
33.    setInterval('gallery()',6000);
34.     
35.}
36. 
37.function gallery() {
38.    var $j = jQuery.noConflict();//set for $ is $j of JQUERY
39.    //if no IMGs have the show class, grab the first image
40.    var current = ($j('#gallery a.show')?  $j('#gallery a.show') : $j('#gallery a:first'));
41. 
42.    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
43.    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $j('#gallery a:first') :current.next()) : $j('#gallery a:first'));
44.     
45.    //Get next image caption
46.    var caption = next.find('img').attr('rel');
47.     
48.    //Set the fade in effect for the next image, show class has higher z-index
49.    next.css({opacity: 0.0})
50.    .addClass('show')
51.    .animate({opacity: 1.0}, 1000);
52. 
53.    //Hide the current image
54.    current.animate({opacity: 0.0}, 1000)
55.    .removeClass('show');
56.     
57.    //Set the opacity to 0 and height to 1px
58.    $j('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });   
59.     
60.    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
61.    $j('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
62.     
63.    //Display the content
64.    $j('#gallery .content').html(caption);
65.     
66.     
67.}
68.</script>


ก่อนหน้านี้ส่วนไลท์บ็อกใช้ได้แต่ตรงสไลด์รูปจะใช้ไม่ได้ แต่พอแก้ตรงที่เป็น $ เป็น $j ส่วนสไลด์ใช้ได้แต่ตัวไลท์บ็อกใช้ไม่ได้



Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2011-07-28 15:07:46 By : babyprogrammer View : 1535 Reply : 3
 

 

No. 1



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

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

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

นี่มัน jQuery นี่นา
แล้วทำไมไม่ให้ ไลท์บ็อก ใช้เหมือนเดิม แล้วแก้ สไลด์รูป ให้เป็น $j อะคะ มันต้องใช้ร่วมกันหรอ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-07-28 15:26:12 By : ultrasiam
 


 

No. 2



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

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

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


ไม่ได้ใช้ร่วมกันครับ $j นี่เป็นของไสลด์รูปครับ ส่วนของไลท์บ็อกมีแค่
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/lightbox_form.js"></script>
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-07-28 15:47:03 By : babyprogrammer
 

 

No. 3



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

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

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



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:22:37 By : webmaster
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สคิป Lightbox กับ สไลด์โชว์รูปชนกันไม่รู้ว่าจะแก้ไงดี
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่