I'm using fancybox 2 with the following code (demo here):
<a class="fancybox"
href="http://a.com/bmw-328-manual-2008-black-18-inch-rims.jpg"
title"bmw 328 manual 2008 black 18 inch rims">
<img alt="bmw 328 manual 2008 black 18 inch rims"
src="http://a.com/bmw-328-manual-2008-black-18-inch-rims-s.jpg" />
</a>
<div class="hidden">
<a class="fancybox"
href="http://a.com/bmw-328-manual-2008-black-18-inch-rims.jpg"
title"bmw 328 manual 2008 black 18 inch rims">
<img alt="bmw 328 manual 2008 black 18 inch rims"
src="http://a.com/bmw-328-manual-2008-black-18-inch-rims-s.jpg" />
</a>
<a class="fancybox"
href="http://a.com/bmw-328-manual-2008-black-18-inch-rims.jpg"
title"bmw 328 manual 2008 black 18 inch rims">
<img alt="bmw 328 manual 2008 black 18 inch rims"
src="http://a.com/bmw-328-manual-2008-black-18-inch-rims-s.jpg" />
</a>
</div>
As you can see, the first image is visible, the 2 others are only visible when the first one is clicked on, this triggers fancybox to start:
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0
});
With the CSS:
.hidden {
display: none;
}
A question here addresses something that concerns me. The main difference is that I use words in the file name, alt tag and title tag to describe the item.
The title is displayed by fancybox when triggered.
I wonder if this would look like spam to search engines, would it?