1 ตั้งโดย poomrin

  • ลงทะเบียน: 2009-10-10
  • คำตอบ: 73

กระทู้: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

พอจะมีวิธีใช้ jQuery ในส่วนของ Ajax content ที่โหลดมาไหมครับ

ของผมโหลดมาในลักษณะคล้าย inline content คือ ใช้เนื้อหา จากหน้า #page1 มาแทนในส่วนของ Content หน้าเดิมครับ แต่พอโหลดมาเรียบร้อยแล้ว อยากให้มันสามารถใช้ jQuery Fancy box มาขยายภาพได้ด้วย (แต่ดูคล้ายว่าไม่สามารถนำเนื้อหาที่โหลดมานั้นมาใช้ลูกเล่นอะไรต่อได้เลยครับ)

เรื่องของเรื่องที่ต้องใช้ Ajax เพราะว่าทำ Background Music ด้วยครับ แต่ว่าถ้าสั่งให้ target=_blank แล้วมันก็จะออกมาหลายๆ หน้าแล้วก็จะมีเพลงตีกัน เพราะสมมุติว่าใส่เพลงไว้ทุกหน้า

แต่ถ้าเหลือเพลงไว้เพียงหน้าแรกหน้าเดียวก็ทำได้ แต่ถ้ามี Menu ให้คนใช้คลิ๊กจาก window ที่เปิดใหม่ เกิดถ้าเค้าคลิ๊กไปที่ หน้า index.html เพลงก็จะซ้อนกันอีกอยู่ดี เลยอยากให้มันใช้งานอยู่หน้าเดียวกันเสียเลย

แต่เท่าที่ผมเห็นคนอื่นๆ ที่มี Background Music จะใช้ Flash ทำทั้งนั้นเลยครับแต่ผมใช้ไม่เป็น

แก้ไขล่าสุดโดย poomrin (2011-08-30 04:30:41)

2 ตอบโดย BeYourCyber

  • ลงทะเบียน: 2006-01-11
  • คำตอบ: 3,184

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

เนื่องจาก content ที่ถูกโหลดมาจาก ajax ไม่ได้ถูกสร้างเป็น DOM ตั้งแต่ตอนโหลดหน้าเว็บ
ดังนั้นการอ้างอิงเพื่อใช้งานจึงไม่สามารถทำได้

แต่....
ด้วย jquery ก็มี function เพื่ออ้างอิง object เหล่านั้นมาให้ใช้ นั่นคือ .live()
อ่านวิธีการและตัวอย่างได้ที่ http://api.jquery.com/live/ จะทำให้อ้างอิง object ที่ไม่มีใน DOM ตอนโหลด page ได้

สำหรับ background music เป็นสิ่งที่ไม่ควรทำนะครับ คุณลองนึกเอาง่ายๆ ว่าเว็บที่ดังระดับโลก มีเว็บไหนที่ทำ background music บ้าง?
ผมเคยพูดเรื่องนี้ไว้นานมากแล้ว ว่าถ้าเว็บคุณไม่ใช่เว็บที่เปิดมาเพื่อการฟังเพลงที่รันอยู่เป็นหลัก แล้วไปเอา background music มาใส่ user เวลาเปิดเว็บ(จะเปิดหลายเว็บพร้อมกัน) เค้าจะรีบค้นหาทันทีว่าเพลงมาจากไหน และเมื่อเจอ จะรีบปิดทันที รวมทั้งมี negative feedback ต่อเว็บนั้นๆทันที ถ้าไม่จำเป็นอย่าทำครับ

Hosting เน้นคุณภาพ การบริการ มากกว่าการตัดราคา บริการทุกท่าน ตั้งแต่ 04/2006 จนปัจจุบัน
จดโดเมนภาษาไทย

BeYourCyber's Website

3 ตอบโดย poomrin

  • ลงทะเบียน: 2009-10-10
  • คำตอบ: 73

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

แก้ ได้แล้วครับ เอาโค๊ดนี้ไปไปแทน บรรทัด ที่ 787 ของ Fancy box (Credit Mr.Jeff)
$.fn.fancybox = function(options) {

   $(this)
.die('click.fb').live('click.fb', function(e) {
           
   $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() :
{})))
              

   e.preventDefault();

แต่ว่าก็ยังมีปัญหาเกี่ยวกับการใช้แบบ Group คือถ้ากด next มันก็ยังอยู่รูปเดิม แต่ content เปลี่ยนครับ แต่ยังดีกว่าไม่มีใช้เลย

แต่พบปัญหาอีกอย่างแล้วครับ ใน IE8 + Chrome

คือผมใช้ iframe จาก youtube อยู่ครับ ใน FF ก็ OK ดี แต่ตัวอื่นพอ pop up ภาพขึ้นมา มันดันไปซ่อนอยู่ด้านหลัง iframe จาก youtube ซะงั้น. ใน FF ก็มีปัญหาอยู่บ้าง pop up ขึ้นมาแล้วถ้า iframe อยู่ด้านขวา ตัวกดกากะบาทปิด มันหายไปครับเมื่อมันซ้อนกัน iframe เหลือหัวมุมนิดเดียว

มีใครแก้ได้ไหมครับ

4 ตอบโดย BeYourCyber

  • ลงทะเบียน: 2006-01-11
  • คำตอบ: 3,184

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

วิธีแก้แบบมึนๆ ก็คือ เวลาที่เรา action เปิด pop up แล้ว ให้เรา ซ่อน element youtube ครับ (.hide()) แล้วพอปิด ก็ show ตามเดิม

Hosting เน้นคุณภาพ การบริการ มากกว่าการตัดราคา บริการทุกท่าน ตั้งแต่ 04/2006 จนปัจจุบัน
จดโดเมนภาษาไทย

BeYourCyber's Website

5 ตอบโดย poomrin

  • ลงทะเบียน: 2009-10-10
  • คำตอบ: 73

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

ขอบคุณครับ แล้วถ้าจะให้ youtube กลับมาโชว์อีกทีหลังจากที่ปิดลิ้งต่อจากนี้ ทำไงละครับ

$("a[rel=gallery]").click(function ( event ) {
      event.preventDefault();
      $("#content").hide();
});

เพราะไม่รู้ว่าจะต้องอ้างอิงอะไรให้มันปิดนะครับ

6 ตอบโดย bonparadorn

  • ลงทะเบียน: 2008-01-07
  • คำตอบ: 411

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

ทุกปัญหา มีทางออก ตอนนี้ไม่เข้าใจปัญหา..จ่ายยาไม่ถูก

7 ตอบโดย eyetaa

  • ลงทะเบียน: 2011-09-12
  • คำตอบ: 1

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

smile  smile  smile

8 ตอบโดย BeYourCyber

  • ลงทะเบียน: 2006-01-11
  • คำตอบ: 3,184

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

ผมไม่รู้ว่า preventdefault ทำอะไรนะครับ

แต่ถ้าใช้ fancybox มันจะมี event handle อยู่ คือดักจับการกดเปิด ให้ซ่อนเนื้อหา เมื่อกดปิดก็แสดงเนื้อหา

ถ้าไม่ได้ใช้ตัวนี้ก็ต้องดูว่าเวลากดปิดมันมี action ตรงไหน ก็ไปดัก event ตรงนั้น ให้สั่งแสดงเนื้อหาอีกครั้ง

Hosting เน้นคุณภาพ การบริการ มากกว่าการตัดราคา บริการทุกท่าน ตั้งแต่ 04/2006 จนปัจจุบัน
จดโดเมนภาษาไทย

BeYourCyber's Website

9 ตอบโดย poomrin

  • ลงทะเบียน: 2009-10-10
  • คำตอบ: 73

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

ผมเจอแถวๆ บรรทัดที่ 1060

close.click($.fancybox.close); ไม่รู้ว่าตัวนี้หรือเปล่า
แล้วมันอ้างอิงยังไงครับ

$("close").click(function () {
    $("content").show();
    });

แบบนี้หรือเปล่าครับ

10 ตอบโดย BeYourCyber

  • ลงทะเบียน: 2006-01-11
  • คำตอบ: 3,184

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

หน้านี้ครับ http://fancybox.net/api
ดูส่วน public method
$.fancybox.close ตัวนี้ครับ

Hosting เน้นคุณภาพ การบริการ มากกว่าการตัดราคา บริการทุกท่าน ตั้งแต่ 04/2006 จนปัจจุบัน
จดโดเมนภาษาไทย

BeYourCyber's Website

11 ตอบโดย BeYourCyber

  • ลงทะเบียน: 2006-01-11
  • คำตอบ: 3,184

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

ตัวอย่าง
http://fancybox.net/blog
หัวข้อ 3. Show/hide title on hover. แต่ case นั้นใช้ onComplete คือทำงานเมื่อเปิด

Hosting เน้นคุณภาพ การบริการ มากกว่าการตัดราคา บริการทุกท่าน ตั้งแต่ 04/2006 จนปัจจุบัน
จดโดเมนภาษาไทย

BeYourCyber's Website

12 ตอบโดย poomrin

  • ลงทะเบียน: 2009-10-10
  • คำตอบ: 73

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

ผมลองแล้วครับ แต่ทำแบบงง
เพราะคิดว่าถ้า จับที่ onComplete กับ onClosed น่าจะดี เพราะอันที่ผมทำอันบนมันปิด youtube อย่างเดียว เอาคืนไม่ได้ แต่ลงแล้วก็ไม่เวิร์ค ครับ สำหรับโค้ดตัวล่าง

$("a[rel=gallery]").fancybox({
    'onComplete'    :    function() { $("#content").hide();},
    'onClosed'    :    function() { $("#content").show();},
});

13 ตอบโดย BeYourCyber

  • ลงทะเบียน: 2006-01-11
  • คำตอบ: 3,184

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

ไม่แน่ใจว่าไม่ work เพราะอะไร แต่ว่าดูจากที่เขียนมี syntag ผิดพลาดนิดหน่อยคือใส่ลูกน้ำตัวสุดท้ายเกิน
เพราะว่าคำสั่งสุดท้ายต้องไม่มีลูกน้ำแล้วครับ

ส่วนตัวซ่อน น่าจะเป็น event ที่ทำงานก่อน on complete นะครับ เพราะว่า oncomplete หมายความว่าทำงานตอนโหลดเสร็จแล้ว มันอาจจะช้าไปครับ

Hosting เน้นคุณภาพ การบริการ มากกว่าการตัดราคา บริการทุกท่าน ตั้งแต่ 04/2006 จนปัจจุบัน
จดโดเมนภาษาไทย

BeYourCyber's Website

14 ตอบโดย poomrin

  • ลงทะเบียน: 2009-10-10
  • คำตอบ: 73

ตอบ: มีวิธีใช้ jQuery fancy box ใน Ajax content ไหม?

ผมลอง 2 แบบ เอาง่ายๆ เลยนะ

อันนี้ใช้ได้
$("a[rel=gallery]").click(function () { 
      $("#content").hide();
});

ส่วนอันนี้ไม่ work

$("a[rel=gallery]").fancybox({
    'onComplete'    :    function() { $("#content").hide();}
   
});


หรือแบบนี้ ก็ใช้ได้แต่โค้ดตัวบนครับ

$("a[rel=gallery]").click(function () { 
      $("#content").hide();
});

$("a[rel=gallery]").fancybox({
    'onClosed'    :    function() { $("#content").show();}
   
});

เหมือนกับว่าใช้ a[ref] แล้วมันไม่ work อย่างั้นแหละ