Машина времени / Coverflow: IMG для DIV

Question

Отличным ресурсом для анимации машины времени, похожей на яблоко, является "Космическая галерея": http://www.eyecon.ro/spacegallery

Я хотел бы разместить текст поверх каждого изображения, чтобы использовать галерею в качестве баннера. Я думаю, что лучшим способом было бы использовать DIV и поместить IMG и текст ссылки в него.

К сожалению, этого нельзя сделать, окружив "img" тегами "div" в.html и изменив "img" на "div" в.js...:(

У вас есть идея использовать DIV или даже лучшее решение?

Answer 1

Ну, это хороший плагин, надеюсь, автор добавит в будущем еще несколько методов (или поместит его как github), так что это можно сделать более программно. На данный момент, возможно, вам нужно настроить spacegallery.js самому.

Мое минимальное решение - использовать родные элементы div для подписей, расположенные в верхнем левом углу изображений и заимствовать их стили CSS. Вот копия плагина, изменения находятся в spacegallery.js. Используйте инструмент сравнения, чтобы увидеть изменения.

Я сделал это, чтобы использовать атрибуты изображения alt (добавил их в index.html) в качестве заголовков. Однако это можно сделать многими лучшими способами, это просто основа. Это также не работает после первого цикла, и я не добавил никаких стилей:)