Most Read

Most Read

Setting up Team Discussion Board

SharePoint 2007 has a Team Discussion Board that is used to initiate discussion and get replies on topics of interest. This article outlines the steps required to setup a discussion board, managing...
+ Full Article

More Popular Articles

Recent Articles

Recent Articles

Repeating Excel Header Rows

If your worksheet has several pages, it will be useful to have the header row repeat in all the pages. This will improve productivity as the user need not flip to the first page to view the header...
+ Full Article

More Recent Articles
Using Thickbox for rich User Interface PDF Print
User Rating: / 2
PoorBest 
Web - Web Design

Thickbox is an User Interface (UI) widget written in JavaScript and built using JQuery library. Thickbox can be used on any page to display images, inline content, iframe content etc. It provides a rich user experience and displays content on the same window. 

 

 What do you need to get started?

 

  • JQuery Library - Download from here
  • Download the following thickbox utilities from here
    • thickbox.js or thickbox-compressed.js
    • ThickBox.css
    • loadingAnimation.gif

 Where do you copy the files and what else?

 

  • Upload the JQuery library, thickbox.js, thickbox.css and the loading Animation.gif to your server 

  • Open the html page using an html editor onto which you wish to have thickbox feature incorporated

  • Between <head></head> tags include the path to jquery.js and thickbox.js or thickbox-compressed.js. For example,

<script type="text/javascript" src="/Javascripts/jquery.min.js"></script> 

<script type="text/javascript" src="/Javascripts/thickbox-compressed.js"></script>

  • The thickbox.js or thickbox-compressed.js has a reference to tb_pathToImage. Change the value of that path to the path where you have placed loadingAnimation.gif

  • You can either copy thickbox.css onto the web page or use an external stylesheet reference as follows:

 <link rel=stylesheet href="/reference/path to thickbox.css" type="text/css" media=screen>

 

URL Syntax

For example, if you want to hyperlink the word 'Thickbox Test', the syntax will be as follows:

<a href="http://www.foo.com/test.aspx?keepThis=true&TB_iframe=true&height=550&width=600" title="Thickbox Test" class="thickbox">Thickbox Test</a>   

 

Reference

Thickbox site has several examples and demos for images, inline content, and iframe content

Trackback(0)
Comments (0)add
feedSubscribe to this comment's feed
Write comment

security image
Write the displayed characters


busy
Last Updated on Tuesday, 02 June 2009 19:23
 

Syndicate

now browsing!

We have 30 guests online

Training

UPK Training

UPK Developer Training Course Description  Overview Understanding Developer menu and toolbar itemsSetting Developer PreferencesManaging FoldersManaging DocumentsCreating Views
+ Full Article

More on Training

Main Menu

Featured

Using BB Code

BBCode denotes Bulletin Board Code and is commonly used to post messages in Bulletin Board forums such as phpBB. The syntax or markup is similar to HTML though the tags are enclosed within square...
+ Full Article

More Featured Articles

Sharepoint

Using Sharepoint List Default Preview Style

Sharepoint by default displays the list items in a tabular format. The 'title' of the list item is hyperlinked and the user has to click the link to get further details on the item. This method...
+ Full Article

More on Sharepoint

Windows

Win XP Power Toys

Microsoft PowerToys for Windows XP are utilites that enhance and add functionality to Windows. There are around fourteen utilities available and each can be installed separately.
+ Full Article

More on Windows
 

Sedo - Buy and Sell Domain Names and Websites project info: referpages.com Statistics for project referpages.com etracker® web controlling instead of log file analysis