Я создал специальный плагин для вас!
http://jsfiddle.net/adaz/tAECz/
Ну, это довольно просто, но я думаю, что оно соответствует вашим критериям. Вы можете активировать его двумя способами:
1) Если вас не затруднит создание миниатюр для каждого изображения, вы можете просто перечислить ваши изображения следующим образом:
<ul id="istockWannabe">
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
...
</ul>
2) Если вы действительно хотите создавать свои собственные эскизы, ваш HTML должен выглядеть следующим образом:
<ul id="istockWannabe">
<li>
<span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
</li>
...
</ul>
В любом случае, вы должны включить jQuery 1.7+ на свою страницу вместе с моим плагином.
Самое последнее, что вам нужно сделать, это активировать его, если вы выбираете первый вариант, вы можете просто включить на своей странице следующий код:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe();
});
</script>
Если вы выбираете второй вариант, вам нужно переопределить настройки по умолчанию, например:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe({ createThumbs: false });
});
</script>
Это больше похоже на прототип, поэтому он довольно ограничен с точки зрения функциональности, но вы можете установить некоторые параметры, такие как:
thumbMaxWidth: 100
thumbMaxHeight: 100
tooltipWidth: 200
tooltipHeight: 150
скорость перехода: 100
Если вам это нравится, я с удовольствием потрачу на него некоторое время и настрою его в соответствии с вашими потребностями!