While this may seem super simple and obvious to some, others may not know how to do this so it bears writing. We're not going to use any fancy javacript or anything, just a simple div and a little styling with an image.
In a nutshell, you're going to wrap a div around your image and give it a class. Then, in your stylesheet you'll style the div with css. Head over to AjaxLoad.info and create your own loading image, that's where I got the one I use on my photoblog.
The HTML
<div class="img-preloader">
<img src="/path/to/your/image.jpg" alt="My Image" />
</div>
As you can see we just wrapped a div with a class of img-preloader around our main image. Now let's check out the styling.
The CSS
.img-preloader{
background: url (/path/to/your/preloader/image/preloader.gif) 50% 50% no-repeat;
}
What this does is gives your div, the one you wrapped around your main image, a background image. The background image is set to appear in the center of your div. When the page loads you see the preloading image and your main image hides the preloading image. Make sense?
Here is an example of the div without the image inside:
I'm posting my Palm Treo 650 woes with Opera Mini, the need for the IBM WebSphere JVM that Palm no longer offers because Palm is (in my opinion) going down the tubes. It took some digging, I got it working finally and here is how I did it.
Back in 2006 I shared how I made my own ring light with supplies from the local hardware store. I made a new ring light recently and wanted to share how I did it. This new version uses less power and looks good enough to take in front of a client/model (the old one was ugly).
New Ring Light Tutorial ComingI built a new and improved ring light. This is a sample photo of me, again at 3 am after I finished it. The new light will be more portable, not as dangerous, not as hot and more environment friendly (104 total watts instead of 800 watts). Look for that tutorial soon.
http://sarahholst.com
http://www.flickr.com/photos/daisies/
http://photoflavor.com/
http://friskypics.com/
I'm a huge fan of jQuery. Call me a fanboi I don't care, I just love it. It's actually one of the main reasons why I wanted to redevelop my site, to convert everything over to jQuery.
I was working on a project that relied on an opacity state when a link (or in this case, a thumbnail link) is either :active or :focus. I got everything working but noticed the dreaded dots in FF & IE6.
From susanbuck.net: Here's something every photographer knows : built in flash photography is harsh. The kind of flash common to most of our cameras is called "direct flash" which fires a burst of light directly at your subject.
Building a light box is pretty easy stuff. A light box is particularly useful for product photography where you need a nice white background. Many people find that their products will actually sell faster with a more professional looking photo. Here you'll find a step by step on how to build your own DIY light box.
Like what you see? Snag my blog feed and stay up to date. Check out all of my site feeds here.
Back Up