Click here to Skip to main content
11,797,355 members (76,569 online)
Click here to Skip to main content

HTML Preview

, 26 Aug 2002 154.1K 2.1K 52
Rate this:
Please Sign up or sign in to vote.
Automatically build Html thumbnails of HTML pages
image, 103kb
Screen capture of the actual HTML Preview explained in this article


What is HTML Preview

HTML Preview is a tool answering a need I have got for a couple of years, actually since I started storing tons of HTML archives on my hard drives. My problem is likely to be yours : how to preview HTML pages without actually double-clicking on each item thus waiting for Internet Explorer to render it.

The amazing thing is that out there on the Internet, you have hundreds if not thousands of image thumbnailer sharewares, but you don't have a single tool to build automatically and with ease an aesthetic preview of all HTML pages in a given folder.

So let it be there.

Playing with HTML Preview

Before you intend to read the remainder of this article (if you like, or if you can), you may play with the provided HTML source code by doing the following. Once downloaded htmlpreview.html:
  • copy this file in the target folder
  • of course you need html pages to play with,
  • double-click on it
  • answer Yes when IE asks you if ActiveX scripting should be let run
  • just watch!

Building the HTML Preview from scratch

The story begins with the Windows Explorer web folders feature. You know, that space hungry thing anyone disables after a couple of days, which shows a zoomed out view of a selected picture, html or even doc file. Well, as anyone certainly guesses, this feature is full of HTML behind the wheel. Read this MS article for more info. Namely, when the web folders are activated, the operating system looks for either a <user profile>\folder.htt file or for the default <windowsdir>\web\folder.htt file. This .htt file is in fact simple HTML with ActiveX scripting inside (remember to enable ActiveX scripting in your Internet configuration panel).

What I've done is figure out the actual elementary ActiveX component that builds the preview of one picture or document, and then put some application logic to reflect the fact that I want not a single preview in the output, but the preview of all HTML pages.

Below is the key data for this ActiveX :

  • ActiveX friendly name: ThumbCl class

  • CLSID : 1D2B4F40-1F10-11D1-9E88-00C04FDCAB92

  • Automation-enabled

  • Exposed methods:

    HRESULT displayFile([IN] BSTR filepath)
    HRESULT haveThumbnail([OUT] BOOL *bThumbnail)
  • Exposed properties :

    [propget] HRESULT freeSpace(/* [retval][out] */ long *);
    [propget] HRESULT usedSpace(/* [retval][out] */ long *);
    [propget] HRESULT totalSpace(/* [retval][out] */ long *);
Of course as anyone guesses the one and only method that is worth mentioning is that displayFile([IN] BSTR filepath). It uses the client area declared in the HTML <object...> tag to render a preview of the passed file.
In fact, in HTML, that's simple code like follows :
      <object id=Thumbnail_0
              width=120 height=100>
  function Init_0()
     Thumbnail_0.displayFile( 'D:\\new_stuff\\codeproject_homepage.htm' )
So far that's easy. Now let's put this in true dirty Javascript code. In order to do this, we assume the following (to keep things simpler for the moment) :
  • we have an file enumerator called fc to browse all files of the current folder.fc.item() returns the current file, and fc.moveNext() switches to next.
  • we are working with a variable curdir, which holds the current folder being previewed.
  • thisfilename = htmlpreview.html
The Javascript code to do the previewing of all *.htm(l) pages is as follows :
<script language="javascript">
// purpose : use directory file enumerator to list all *.htm* files
//           and prepare a table cell to preview it using the preview ActiveX

// put the following line in comment if you don't want scaling
var imgsize = " width=160 height=140";
var clsid = " classid='clsid:1D2B4F40-1F10-11D1-9E88-00C04FDCAB92'";

var fso = new ActiveXObject("Scripting.FileSystemObject"), f, fc;

f = fso.GetFolder(curdir);
fc = new Enumerator(f.files); 
s = "";
sf = "<script language="'javascript'"> function Init() { ";
i = 0;

for (; !fc.atEnd(); fc.moveNext())
  // create an ActiveX instance for the preview of this html file
  name = "Thumbnail"+i
  s = "<object id=" + name + clsid + imgsize + "></"+"object>";
  if (fc.item().Name.indexOf(".htm",0)>-1 && fc.item().Name!=thisfilename)
    // and add an hyperlink to play with
    s = "<a href='"+fc.item().Name+"'>" + s + "</a>";
    // attach initialisation code to it
    // .replace(/\\/g, "\\\\") replaces simple backslashes with 
    // double-backslashes
    s = name + 
       ".displayFile( '" + fc.item().Path.replace(/\\/g, "\\\\") + "');";
    sf += s;
sf += "} </"+ "script>
Again sorry for those who don't speak Javascript.

OK, now before providing the full uncensored listing, let's discuss the initial steps : When you double-click on htmlpreview.html in any folder, we begin with retrieving the full qualified path of htmlpreview.html, for instance c:\ Documents and Settings \ Administrator \ My Documents \ htmlpreview.html. But instead of getting just that with :

var fullpath = location.href;
we rather get something of the form file:/// c:/ Documents%20and%20Settings / Administrator / My%20Documents / htmlpreview.html because javascript is cross-platform by design, thus returns a file://-protocol compliant URI.
We remove, strip down, replace some stuff out of this one to prepare URIs that are meaning something for the web browser when htmlpreview.html is being rendered. That's why you'll see the following code :
<script language="javascript">

  var fullpath, curdir, thisfilename;

  fullpath = location.href; // fully qualified filepath 
  // of the form "file:///c:/Documents%20and%20Settings/Administrator/
  // My%20Documents/htmlpreview.html"

  // regexp weirdo
  fullpath = fullpath.replace(/file:\/\/\//,""); // remove file:///
  fullpath = fullpath.replace(/\//g,"\\"); // replace slash with backslash 
                                           // (for use on Windows OS)
  fullpath = fullpath.replace(/%20/g," "); // replace escaped space

  // split path and filename
  var iLastBackslash = fullpath.lastIndexOf("\\");

  // = htmlpreview.html
  var thisfilename = fullpath.substring( iLastBackslash+1, fullpath.length); 
  // remove filename from full path, we are just interested in the path
  var curdir = fullpath.substring( 0, iLastBackslash );
Ok now for full listing of htmlpreview.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
The hyperlinks we have inserted while generating the HTML code are of course enabled : just right-click on previews.

Last remark, if you would like to change the size of thumbnails, just change the imgsize value.

The sample Code project preview then becomes (fraction-only to avoid full size) :

image, 141kb


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Addicted to reverse engineering. At work, I am developing business intelligence software in a team of smart people (independent software vendor).

Need a fast Excel generation component? Try xlsgen.

You may also be interested in...

Comments and Discussions

QuestionNot Working Pin
Gaurav.Tekkie11-May-10 2:46
memberGaurav.Tekkie11-May-10 2:46 
GeneralProblem in IMG tag Pin
Anudeep Jaiswal - NOIDA24-Nov-08 22:52
memberAnudeep Jaiswal - NOIDA24-Nov-08 22:52 
Questionvar fso = new ActiveXObject("Scripting.FileSystemObject"), f, fc; Pin
Gnarlhead99-Nov-07 15:30
memberGnarlhead99-Nov-07 15:30 
AnswerRe: var fso = new ActiveXObject("Scripting.FileSystemObject"), f, fc; Pin
Gnarlhead99-Nov-07 16:46
memberGnarlhead99-Nov-07 16:46 
GeneralHtmlPreview not working Pin
Mohit Infosys28-Feb-06 22:24
memberMohit Infosys28-Feb-06 22:24 
QuestionRe: HtmlPreview not working Pin
JobberBoy7-Jun-07 7:20
memberJobberBoy7-Jun-07 7:20 
AnswerRe: HtmlPreview not working Pin
darthbilly23-Jun-08 17:10
memberdarthbilly23-Jun-08 17:10 
GeneralSubfolders Pin
iamalive15-Feb-06 1:11
memberiamalive15-Feb-06 1:11 
GeneralRe: Subfolders Pin
Stephane Rodriguez.15-Feb-06 23:22
memberStephane Rodriguez.15-Feb-06 23:22 
GeneralRe: Subfolders Pin
iamalive15-Feb-06 23:52
memberiamalive15-Feb-06 23:52 
GeneralRe: Subfolders Pin
Stephane Rodriguez.16-Feb-06 6:47
memberStephane Rodriguez.16-Feb-06 6:47 
GeneralRe: Subfolders Pin
iamalive16-Feb-06 7:49
memberiamalive16-Feb-06 7:49 
Generalreverse concept Pin
simonelli20-Jul-04 7:32
membersimonelli20-Jul-04 7:32 
QuestionHow to do HTML Preview in Web Publishing form? Pin
copchen29-Jul-03 16:29
membercopchen29-Jul-03 16:29 
Generalwhy no display in ie6+sp1 Pin
ueb28-Jul-03 16:06
memberueb28-Jul-03 16:06 
GeneralRe: why no display in ie6+sp1 Pin
Andrew Jackson1-Oct-03 1:07
memberAndrew Jackson1-Oct-03 1:07 
Questionuseful? Pin
lexxwern1-Sep-02 3:55
memberlexxwern1-Sep-02 3:55 
AnswerRe: useful? Pin
.S.Rod.22-Dec-02 0:28
member.S.Rod.22-Dec-02 0:28 
Questioncan it be done with... Pin
nattu9726-Aug-02 20:11
sussnattu9726-Aug-02 20:11 
AnswerRe: can it be done with... Pin
StephaneRodriguez26-Aug-02 20:17
memberStephaneRodriguez26-Aug-02 20:17 
AnswerRe: can it be done with... Pin
Anonymous21-Jul-03 11:39
sussAnonymous21-Jul-03 11:39 
GeneralRe: can it be done with... Pin
Stephane Rodriguez.21-Jul-03 18:26
memberStephane Rodriguez.21-Jul-03 18:26 
GeneralPlease watch words more carefully Pin
Samy Abd El-Rahman26-Aug-02 20:07
memberSamy Abd El-Rahman26-Aug-02 20:07 
GeneralRe: Please watch words more carefully Pin
Nishant S26-Aug-02 20:36
editorNishant S26-Aug-02 20:36 
GeneralRe: Please watch words more carefully Pin
Samy Abd El-Rahman26-Aug-02 20:43
memberSamy Abd El-Rahman26-Aug-02 20:43 
GeneralNice Pin
Colin^Davies21-Aug-02 19:27
memberColin^Davies21-Aug-02 19:27 
GeneralRe: Nice Pin
Soliant22-Aug-02 11:50
memberSoliant22-Aug-02 11:50 
GeneralRe: Nice Pin
StephaneRodriguez22-Aug-02 13:10
memberStephaneRodriguez22-Aug-02 13:10 
This one on GotDotNet is totally different in nature (ONE url only), in usage (web service-based, mine requires nothing and is meant for hard drives or cd-roms first, and then remote behind a web server), in code, and in feature (size (with increased readbility) can be changed).
Seriously though, I admit the code in "Html Preview" could have been published when windows 98 went retail,

-- modified at 9:54 Tuesday 11th October, 2005

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151002.1 | Last Updated 27 Aug 2002
Article Copyright 2002 by Stephane Rodriguez.
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid