Preloading images is a great way to improve the user experience. When images are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for photo galleries and other image-heavy sites where you want to deliver the goods as quickly and seamlessly as possible. Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to […] Continue reading »
In this ultimate guide to swfIR, you will learn how to use swfIR to replace your ordinary images with richer, stylized graphics. swfIR enables efficient, practical and scalable application of drop-shadows, rounded corners, and even image rotation to any number of specified images throughout your site. From concept and application to examples and recipes, this guide covers everything you need for successful swfIR implementation. The Challenge.. There are many ways to enhance the visual presentation of your images. Popular visual […] Continue reading »
Pardon this post! I am posting this information online for personal references purposes. I may need to revisit this code at some point in the future, and if I post it here I will always know where to find it (trust me, it would disappear into the abyss if I tried storing it offline). So, although it is intended solely for myself, feel free to extract and use anything you like, as long as commented attribution remains. What we have […] Continue reading »
Clean, easy, effective. You don’t need no stinking JavaScript to preload your images. Nope. Try some tasty CSS and (X)HTML instead! Here’s how to do it with only two easy steps.. Step 1 — Place this in your CSS file: div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; } Step 2 — Place this at the bottom of your (X)HTML document: <div id="preloaded-images"> <img src="https://perishablepress.com/image-01.png" width="1" height="1" alt="" /> <img src="https://perishablepress.com/image-02.png" width="1" height="1" alt="" […] Continue reading »
In our previous article, Alternate JavaScript Slideshow for SlideshowPro, we present an elaborate method for providing alternate content specifically for SlideshowPro. Although the method points toward a more generalized adaptation, its overall functional implementation remains focused on the presentation of slideshows. Continue reading »
For the unenlightened, SlideshowPro (SP) is a Flash-based slideshow-authoring system that delivers full-featured, high-end, Flash-based slideshows. Websites featuring SP slideshows present content in sophisticated fashion, inspiring users with elegant captions, beautiful transitions, and intuitive navigation. However, many visitors are unable to experience SP slideshows because they lack the requisite Flash support. SlideshowPro-based slideshows currently require Flash 7 or better to function. And, although Flash 7 is quite common, it is far from ubiquitous. In the “worst-case” scenario, Flash-challenged visitors will […] Continue reading »
Fast-loading pages reduce errors, conserve bandwidth, and please visitors. One way to decrease loading times and enhance performance involves maximizing image display efficiency. Your mantra for achieving image efficiency should be “reuse, optimize, and preload.”. While each of these methods plays an important role, this article will focus on methods for preloading images. Consult your server error logs to identify web pages that may require image help. Note: preloading images does not reduce bandwidth! It only decreases apparent load time, […] Continue reading »
Here are a few sIFR Notes for Perishable Press. Just what are we looking at here? Well, first it is important to understand the sIFR variables and the order in which they should appear: Continue reading »
To add Lightbox functionality to any single image: Add rel="lightbox" to the anchor tag. Add a title="" attribute to the anchor tag. Add an alt="" attribute to the image tag. To add Lightbox functionality to any series of images: Add rel="lightbox[value]" to the anchor tag of each image. Add a title="" attribute to the anchor tag of each image. Add an alt="" attribute to the image tag of each image. Any set of pictures with the same rel="lightbox[value]" will display […] Continue reading »