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

sarwar's weblogs

~ story of web applications…..

sarwar's weblogs

Monthly Archives: August 2008

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.

Advertisement

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

  • RT @ESPNUK: If Erling Haaland wanted to match Cristiano Ronaldo's 700 league goals, he'd have to score 40 goals a season until the year 203…    1 month ago
  • RT @Cristiano: Great team effort and a good victory. We stand together. Let’s go, United! 💪🏽 https://t.co/GnjAR3oM3s    3 months ago
  • RT @Cristiano: Hard work always pays off 🙏🏽💪🏽 https://t.co/kMqIpB2nfV    5 months ago
  • RT @realDonaldTrump: Just finished a very good conversation with President Xi of China. Discussed in great detail the CoronaVirus that is r…    2 years ago
  • “Running a small business without a plan is a lot like driving without directions.” — @GoldmanSachs via @appexchange    6 years ago
  • RT @TechCrunch: 5K people turn up to catch Pokémon in Chicago tcrn.ch/2aaLRys https://t.co/VVQSd7nmN4    6 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

  • Kush on how to cakephp in a sub-directory, access it from root using .htaccess
  • Mr Griever on Access session data in a model -cakephp
  • apnarahimyarkhan on cakephp- CONCAT in query, Virtual Fields and make a drop down
  • Toko Kunci Pintu Murah on set & reset form text value onfocus, onblur, onclick using javascript
  • nevitaputri1.doodlekit on cakephp- CONCAT in query, Virtual Fields and make a drop down
  • RSS - Posts
  • RSS - Comments

Meta

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

Blog at WordPress.com.

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
  • Follow Following
    • sarwar's weblogs
    • Join 328 other followers
    • Already have a WordPress.com account? Log in now.
    • sarwar's weblogs
    • Customize
    • Follow Following
    • Sign up
    • Log in
    • Report this content
    • View site in Reader
    • Manage subscriptions
    • Collapse this bar
%d bloggers like this: