ลำดับของเลเยอร์ jquery fancybox

ลำดับของเลเยอร์ jquery fancybox


สอบถามการใช้งาน jquery fancybox กับ flash ผมมีปัญหาว่า เมื่อเปิด popup FancyBox มันโดนแฟลชทับครับ ซึ่งผมกำหนด เลเยอร์ แฟลช z-index = -500 แล้วมันก็ยังทับ ดังรูป ด้านบนคือ แฟลช ล่างคือ popup fancybox



css  ของ flash

#slider { height:249px; position:relative; overflow:hidden; padding-top:20px; z-index: -500; }

#slider-holder {

 width:960px;

 height:249px;

 position:relative;

 overflow:hidden;

 z-index: -500;

 visibility: hidden;

}



css ของ fancybox

div#fancy_loading {

 position: absolute;

 height: 40px;

 width: 40px;

 cursor: pointer;

 display: none;

 overflow: hidden;

 background: transparent;

 z-index: 100;

}



ผมกำหนด

<param name="wmode" value="transparent">ของแฟลช แล้วมันก็ยังทับอยู่ครับ แก้ไขยังไงดี


29 ก.ย. 2553 7 3,863

ปกติแล้ว  เมื่อ flash กำหนด เป็น wmode=transparent แลัว div กำหนด position เป็น absolute  และ กำหนด z-Index แล้ว มันก็น่าจะไม่ถูกบัง



แต่ปัญหาอาจเกิดได้หากเป็น IE ที่ต่ำกว่า 8 เนื่องจาก Browser พวกนี้ไม่ค่อยปฏิบัติตามมาตรฐานเท่าไรนัก



การแก้ไขก็พอมีนะครับ แต่ค่อนข้างยุ่งยาก ด้วยการสร้าง iframe อยู่ตรงกลางระหว่าง fancybox และ พื้นหลัง ซึ่งโดยปกติ มันควรถูกจัดการโดย fancybox (ถ้าเขาคิดเผื่อไปแล้ว)



สำหรับกรณีอื่นๆ ก็ต้องลองดูว่า javascript มันได้เปลี่ยนแปลงค่าอะไรที่จำเป็นไปหรือเปล่า ทำให้มันไม่สามารถแสดงผลได้ตามที่คาดหวัง



อีกทีนึงก็ลองกำหนด z-Index ให้สูงๆไปเลย เช่น z-Index:9999; 
#1


แก้ไม่ยากครับ



เพิ่ม



<param name="wmode" value="transparent" />  ใน <object>.................</object>



ถ้าใช้ AC_FL_RunContent ด้วย ก็ เพิ่มตรงนี้เข้าไปอีกครับ ,'wmode', 'transparent'



ตัวอย่าง



<script type="text/javascript">

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0'

,'width','1009','height','120','src','images/header','loop','false','wmode','transparent','quality','high'

,'pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/header' ); //end AC code

</script>


      <noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1009" height="120">

        <param name="movie" value="images/header.swf" />

        <param name="quality" value="high" />

        <param name="LOOP" value="false" />

        <param name="wmode" value="transparent" />

  <embed src="images/header.swf" width="1009" height="120" wmode="transparent" loop="false" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>

      </object>

    </noscript>





สีแดง  คือส่วนที่เพิ่มเข้าไปครับ


#2

IE 8 ครับ ลอง firefox และ  chrome ด้วย เป็นหมดเลยครับ ขอลองโค๊ด แฟลชของคุณ Ars_BeaL ก่อนเดี๋ยวกับมารายงานผลครับ ขอบคุณมากมายครับ
#3


ไม่หายครับ มันยังทับอยู่เลย ลองทั้งโค๊ดที่เพิ่ม <param name="wmode" value="transparent" />

<script type="text/javascript">

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0'

,'width','1009','height','120','src','images/header','loop','false','wmode','transparent','quality','high'

,'pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/header' ); //end AC code

</script>


 และแก้ไข z-index = 9999; แล้วยังไม่หายครับ มีใครช่วยได้ไหมครับ

 


#4

เปลี่ยนไปใช้ตัวอื่นสิครับ มีหลายตัวเลย หรือไม่ก็ลอง lightbox เวอร์ชั่นล่าสุด ถ้าคิดจะแก้ไขก็คงยาวแหละครับ ต้องทำตามที่บอกในข้อ 1 เท่านั้น 
#5

ลำดับของเลเยอร์ jquery fancybox
เห็นด้วยกับความคิดเห็นที่1คับ
#6

แนะนำอีกตัว colorbox
#7
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^