uery is really excellent javascript framework. I’m really enjoining with this. But when I use this I’ve faced some problem, which I wanna share with you.
Thikbox is very helpful for image gallery or any types of pop up options. But I’ve faced some problem when viewed in browser all Flash objects in the page are displayed on top of my thickBox pop up. I want the popUp to be at the top level (above flash objects)
How to work with thickbox? I’ve decribe the whole thing as follows.
Download jquery latest verison first. The latest version will support more. You can get more examples and documentation from here about jquery.
Download thickbox, “thickbox.js “, “ThickBox.css,”, “loadingAnimation.gif” and “macFFBgHack.png ” download this, you can get more example and help from download link.
In your main html/php/asp file you have to add the follwoing
<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/thickbox.js"></script <link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
You must have to add the image location in your js and css file
Suppose at the begaining in thickbox.js file The follwing should be accurate link
var tb_pathToImage = "[your-path]/loadingAnimation.gif";
Set the thikbox to view the images use the image as follows (add to your html/php/asp file)
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank"class="thickbox" rel="gallery-plants"><imgsrc="images/plant2_t.jpg" alt="Plant 2"/> </a>
You can run this gallery easely. But If your file contain some embeded flash object then you have to follow the following options
Wrap your flash content in a div
Add to your object tag
Set
wmode="transparent"
in the embed tag
Use css to set the position and z-index for your div (don’t set negative z-index values as it will make your flash disappear)
Use the following CSS
#flash {
position: relative; /*or absolute*/
z-index: 0;
}
Use the following XHTML
<div id="flash"> <object ...> <param name="wmode" value="transparent"> <embed ... wmode="transparent"> </object> </div>
I’ve already tried and just say WoW!! Now you can try.
Yes, it’s really cool.
