• About Sarwar
  • Portfolio
  • আমার বাংলা

sarwar's weblogs

~ story of web applications…..

sarwar's weblogs

Tag Archives: thickbox

jquery-thickbox

29 Friday Aug 2008

Posted by Sarwar in JavaScript, jquery

≈ 10 Comments

Tags

jquery, thickbox


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.

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

Author

  • Sarwar

Categories

  • .htaccess
  • Apache
  • API
  • CSS
  • Debug
  • Framework
    • CakePHP
  • HTML
  • JavaScript
    • Ajax
    • ckeditor
    • jquery
    • jQuery UI
    • tinymce
  • Joomla
    • Virtumart
  • Linux
  • MySQL
  • PHP
  • SVN
  • Twitter
  • WHM/cPanel
View Sarwar Hossain's profile on LinkedIn
Follow bdsarwar on Twitter

Tweets

  • “Running a small business without a plan is a lot like driving without directions.” — @GoldmanSachs via @appexchange    4 years ago
  • RT @TechCrunch: 5K people turn up to catch Pokémon in Chicago tcrn.ch/2aaLRys https://t.co/VVQSd7nmN4    4 years ago
  • linkedin.com/slink?code=eZ2… @ibneha, @mdthanvirahmed, @shafi_aszad, @ashrafulkauser, @digitalstatusbd, @eternolimited, @mamunha34354847    4 years ago
  • linkedin.com/slink?code=eYt… @html50, @bdwasif, @81faabfaa6f34a8, @saimonsajid, @voipworldcalls, @sarwar31945, @tomamuns    4 years ago
  • linkedin.com/slink?code=ewd… @ataharhh, @shariful51, @akhtar_h, @litetechno, @tahsin_wsit, @noormd25522880, @abmukid11    4 years ago
  • linkedin.com/slink?code=ewA… @solamanraji, @mycomplain, @washimk118_s, @audacity_it_ltd, @jibonbikash, @salimshalimm784, @mukul_politeboy    4 years ago

Flickr Photos

From Helipad ViewAbove the CloudHillNear to SkySunset Moment#sunset #beach #ocean #coxsbazar#jamroll #food #deliciousfood #homemade  #homemadefood#seaside #ocean #oceanview #travelphotography #coxsbazar #bayofbengal #travel #longestbeach#beach #lifeguard #seaside #holiday #tour #longestbeach #travel #travelphotography #coxsbazar #bayofbengal#resort #mountains
More Photos

Archives

  • February 2012 (1)
  • January 2012 (2)
  • August 2011 (1)
  • July 2011 (1)
  • June 2011 (2)
  • May 2011 (2)
  • April 2011 (1)
  • March 2011 (3)
  • December 2010 (3)
  • November 2010 (1)
  • October 2010 (4)
  • September 2010 (1)
  • June 2010 (1)
  • May 2010 (2)
  • April 2010 (1)
  • March 2010 (1)
  • January 2010 (2)
  • July 2009 (1)
  • January 2009 (1)
  • August 2008 (1)

Recent Comments

  • SolkAgoks on quick setup of Auth Component for CakePHP 2.0
  • Kush on how to cakephp in a sub-directory, access it from root using .htaccess
  • CharlesLaula on Drag and Drop dashboard using jquery and save state of each change
  • ror on set & reset form text value onfocus, onblur, onclick using javascript
  • Mr Griever on Access session data in a model -cakephp
  • RSS - Posts
  • RSS - Comments

Meta

  • Register
  • Log in
  • Entries feed
  • Comments feed
  • WordPress.com

Blog at WordPress.com.

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
%d bloggers like this: