The Internet As I See It

Earlier I posted about this cool wordpress plugin. The light box plugin especially for wordpress. I just found another similar plugin for hmtl pages - (also for other web extensions I think). The Slimbox.

Example page: A cool portfolio for your website

Slimbox versus Lightbox:

Features:

From a functional point of view, Slimbox has the following added features compared to the original Lightbox:

* Slimbox is ready to launch as soon as the document is ready. This means that you don’t have to wait for all images of the page to be loaded before clicking on a link launching the Lightbox effect.
* The left and right arrow keys can be used to navigate through images, and the ESC key can be used to close Slimbox (Warning: in Mozilla browsers, the ESC key is also used to stop GIF images from animating).
* The dark background overlay can be clicked anywhere to close Slimbox, even on the parts located on the left and right of the image.
* The script is more robust; for example you can try to start-stop Slimbox very quickly to interrupt the animation then resume it and you won’t notice any bug like in the original Lightbox where sometimes the animation stops or the captions are wrongly sized.
* Slimbox temporary hides flash animations and other embedded videos while it is open to avoid display bugs in some browsers.
* Slimbox can be launched from the traditional image links inside the page like the original Lightbox, but also directly from a Javascript call using a special method.

Like they say it, my opinion the slimbox works exactly like the lightbox.

The differences from the lightbox:

* The code has been entirely rewritten with efficiency in mind for the mootools framework instead of the huge Prototype/Scriptaculous. The script itself is as tiny as 7kb (uncompressed).
* The Slimbox CSS are simpler and 100% valid (no more CSS hacks). Also, all images used by Slimbox are specified in the CSS instead of the Javascript so it is easier to style.
* Slimbox does not use the 1 pixel transparent gif image needed by Lightbox.

As you can read, its alot lighter then the lightbox - Can this be true? Slimbox is more lighter then THE LIGHT BOX? Why do they call it light box? Got it?

The tool required:

Slimbox 1.4 requires the mootools framework, version 1.1 or more recent. Because mootools is modular, you can make your download smaller by only downloading the modules your scripts are actually using. Here are the modules required by Slimbox:

* Class: all
* Native: all
* Element: Element.Event
* Window: Window.DomReady, Window.Size
* Effects: Fx.Style, Fx.Styles (optionally Fx.Transitions)

1 - place this in the header tag:

2 - inlude the script in the header tag aswell:

3 - Customize your stylesheet with the slimbox.css:

4 - activate the plugin:

Example:

<a title=”my caption” rel=”lightbox” href=”image-1.jpg”>image #1</a>

Mutiple:

<a rel=”lightbox[atomium]” href=”image-1.jpg”>image #1</a>
<a rel=”lightbox[atomium]” href=”mage-2.jpg”>image #2</a>
<a rel=”lightbox[atomium]” href=”image-3.jpg”>image #3</a>

Display 1 image:

Alternatively, you can also launch the Lightbox effect using Javascript to display a single image. Just call the following method, passing the URL of the image as first parameter and optionally a title as second parameter:

Lightbox.show(’images/image-1.jpg’, ‘Spheres in construction’);

Thankz to this post I can use a transparent background over a wallpaper. Without cutting anything in photoshop.
Click here to see it:

http://www.rofaldez.com/media/transparent-html

1. The only thing you need is a wallpaper
2. A transparent white background with a png extension. I cut it up using photoshop. Give the white background a tranparency of 32%. Export it as a PNG extension and enable the transparent option.
3. Source code in your stylesheet:

html {
overflow: -moz-scrollbars-vertical;
height:100%;
}
body{
height:100%;
margin-left: 0px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
}
.maintable {
width: 600px;
height: 300px;
background-image:url(images/cubic-background.jpg);
background-repeat:repeat-x;
vertical-align:middle;

}

.trans_box2 {
font-family:verdana;
font-weight:bold;
padding:40px;
margin:30px;
border:solid 1px #555;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’images/35-transparent.png’);
}
/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box2[class] {
background-image:url(images/35-transparent.png);
vertical-align:top;
color:#ffffff;
}

4. Enjoy your lovely background as it is with a transparent background in front of it with your text.

Did you ever had the problem viewing webpages without scrollbars in firefox?
example of webpage on local machine viewed in firefox: website johec

Here is the style sheet structure how to fix firefox with sidebars for your html page.
The body tag gives the browser a 100% view in height and margin of 0px.

html{
overflow: -moz-scrollbars-vertical;
height:100%;
}

body{
height:100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}