guide
PhotoSlice™ is a FREE web tool for your online images. It's very easy to use, it's crossbrowser and it looks very cool. To make a better idea read the following.
features
- - looks very cool
- - crossbrowser, and CSS valid
- - very light (~26kb)
- - easily customizable, also ability to turn off effects
- - backward compatible
- - works for single images and for image sets, too
- - navigation by mouse and by keyboard
- - image preloading
- ...and more to discover
demos
for one image
for more images
<a href="images/sample2.jpg" rel="photoslice.samples">[...]</a>
<a href="images/sample3.jpg" rel="photoslice.samples" title="here goes the caption">[...]</a>
explanation
OK, if you haven't already understood how it works, although I really doubt that, all you have to do is to add the "rel" attribute to the link (that leads to the image) and set it to "photoslice" for one image and "photoslice.name" (*) for an image set, 'name' being the name of that image set. So this way, if the JS is disabled the user will still be able to see the image how it would look normally. Optionally, you can set the caption by adding the "title" attribute to the link (see the 3rd image from the image set code).
* It's not necessary to use the dot (".") as a separator for the rel attribute when you have an image set, you can also use any other character you wish ("photoslice@name", "photoslice[name]", "photoslice-name", etc.) or even no character at all ("photoslicename"). Just be careful if you're using a character as a separator and you do care about the xHTML 1.1 validation, from my examples, only the dot and the hyphen are supported characters in the rel attribute.
Of course, for this to happen, you must first download the PhotoSlice™ files, put the 'photoslice' directory in your root directory and add this into your HTML header:
<script type="text/javascript" src="photoslice/functions.js"></script>
customizing
If you think you're up to it, it's possible, quite simple I might say. In order to make it your own style all you need is some CSS skills, open up style.css from the downloaded files and you can change whatever you like, the possibilities are infinite.
To change the loading image, the background overlay's alpha (transparency) or to turn on/off the resizing or fading animations open up functions.js from the downloaded files and you'll see the first lines. Make sure you don't edit anything below.
I'm waiting to see as many designs as possible. Good luck!
thank you
That's it, hope it helps you and you're pleased with the result.
If you're a happy user of PhotoSlice™, a donation, a backlink or even a comment would be highly appreciated. And if you want to stay in touch and be the first one to find out when a new version is released subscribe to the newsletter.
Also if you want to help the development, please report a bug if you find one and tell me on what browsers did it work for you and on which it didn't (in this case I'll check that and try fix the incompatibility). All this in the compatibility section. I'd really appreciate it.