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 35 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

Changing Windows Prompt

One can interact with the Operating System either from a graphical interface or from the Command Prompt. From the Command Prompt you enter commands by supplying the required arguments. On Windows...
+ Full Article

More Featured Articles

Sharepoint

Print Feature in SharePoint Discussion Board and Lists

SharePoint Discussion Board as well as the other Lists such as Contacts, Calendar etc. do not have 'Print' functionality and you have to use the browser's 'Print Preview' function and then print....
+ Full Article

More on Sharepoint

Windows

Using the Shift Key

The most common use of the Shift key is to use Capital letters while typing. There are other uses of the Shift key, that might come in handy.
+ 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