On 06/06/2007, at 3:12 AM, [EMAIL PROTECTED] wrote:
Hi All, I'm hoping this is an easy fix.
Normally on the images list sample:
http://medienfreunde.com/lab/innerfade/
The images all load when there is now javascript support.
I'm planning to use an innerfade list of images in the header design
of a site.
I'ld like for the innerfade images to not load at all, if there is no
javascript support.
Or maybe the CSS could handle loading only 1 background image for that
div.
Any ideas?
It's not a big concern that there won't be javascript support, just a
general precaution.
Something I have done before is change all but the first image into
links to the images, Then use CSS to position all the li elements
absolutely on top of each other and z-index the first (and now only)
image on top of the links, obscuring them from view. Then, just
before calling your slideshow plugin (innerfade in your case) run
this simple plugin I wrote, upon the same containing element you are
about to run innerfade on:
$.fn.anchorsToImg = function() {
this.find("a").add(this.filter("a")).each(function() {
if (this.href.substr(this.href.length-4)==('.jpg' || '.gif' ||
'.png') ) {
var $$ = $(this);
$$.after('<img src="'+$$.attr("href")+'" alt=""
/>').remove();
}
}).end();
return this;
};
So your calling code may look like something like this:
$('.gallery').anchorsToImg().innerfade();
the anchorsToImg plugin will, um, change all the anchors found
anywhere within the element it is called upon into img tags, thereby
providing innerfade with the structure it needs. If JavaScript is
unavailable, only the one image is shown and the other images are not
downloaded but still remain accessible (at least in non-CSS
situations) via the links.
Good luck.
Joel Birch.
