mehdi plugins logo
Archived Stuff ...
Free Photoshop Stuff...ContactFAQ (Misc)
Related to
Joom 1.5 - Cpg 1.5 bridge:
Drupal bridge
Related to
Joom1.5-Phbb3 bridge :
Related to
Both Joomla bridges:
Popup effect &
bot for thumbnails:
Frontbox Js Script

Explanations updated : 21 februray 2009
Last times files updated:21 februray 2009, improved javascript (performance + bug fixes).

frontbox demo
  • Frontbox is a "lightbox like" script. I develloped my own version in order to get the following advantages:
  • + self-contained script (does not rely on any library).
  • + degrades well (nice behavior if user disable javascript)
  • + truely object oriented. No conflicts with other js scripts you may add to your page ...
  • + lightweight (compressed js & images & css, less than 25kb)
  • + cross browser. Support win IE5,6,7, firefox 1.5+, opera 9 whether on "quircks mode" or with a strict DTD ... All of these with a consistent display between browsers.
  • + polyvalent: pictures, iframes, hidden divs, contents retrieved by ajax.
  • + next/previous , maximize/minimize actions ...

How does the script work ?

  • Basically this work this way: take any link, put inside a span tag, with the class frontbox , and it's done .... Here's a minimal example:
  • <a href="mylink.htm">
    • <span class="frontbox"></span>
  • </a>

  • However, for more extended use, you have to use particular attributes. Here's an example that use all attributes available :
  • <a href="#">
    • <span class="frontbox" src="mylink.htm" name="myset" width="200" height="200" title="my life" type="ajax"></span>
  • </a>

  • Remark: These attributes are not XHTML compliant. Sorry, but I can live with this.

Description of all attributes

  • src: when set, this attribute will override destination of the link. When javascript is disabled, you can control where the user is directed with the regular link.
  • name: if you'd like to use next/previous actions, you have to specify to which "set" a "frontbox" belongs with this attribute.
  • width/height : whether or not the content displayed by the frontbox exceeds dimensions you've specified, you'll see or not scrollbars. Pictures are a special case, and I do not recommend to set the size for them.
  • title: for pictures, you might don't need to set this one. Indeed, the script will use the regular "title" attribute of the <img> tag .
  • type: by default, the script apply some basic rules to detect which kind of frontbox you'd like to use. If your link end with one of the extensions .jpg,.jpeg,.png,.gif then the script assume will assume that you'd like to display an image. If your link have the character # in it, then the script will assume that you want to display a hidden div. Otherwise the content is displayed inside an iframe. However you can override the "automatic" behavior, by specifying the type with one of these values: image, inline,ajax, iframe.
    • Notes: inline corresponds to "hidden divs". Ajax type, must be explicitely specified.
  • Here's an example of hidden div, used by the script:
  • <a href="#honey"> <span class="frontbox"></span> </a>
  • <div id="honey" style="display:none" > Sweet honey, you're my chocolate. </div>

Setup of the script, etc...

  • You need to include three files in the header of your document, like this:
  • <link href="fbox_css.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="fbox_conf.js"></script>
    <script type="text/javascript" src="fbox_engine-min"></script>

  • Ensure that the files spacer.gif (used by the css) and indicator.gif ( referenced by the fbox_conf.js file) are in the right location. All strings used by the script are in the fbox_conf.js file ... (for eventual translation)

  • The script will work better if your page does not rely on the followings css rules:
  • html{height:100% }
  • body{height:100%}
  • Anyway, if you don't remark any difference with or without these css rules, then it should just be ok.

This script interests you? Click the link below.

  Copyright © 2004-2017 Mehdi - All rights reserved