Так выглядит конструкция HTML для применяемых стилей.
<div id="mainwrapper">
<!-- Подпись 1 -->
<div id="box-1" class="box">
<img id="image-1" src="http ://image.JPG"/>
<span class="caption simple-caption">
<p>Простая подпись</p>
</span>
</div>
<!-- Подпись 2 -->
<div id="box-2" class="box">
<img id="image-2" src="http ://image.JPG"/>
<span class="caption full-caption">
<h3>Подпись на всю картинку Full Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
<!-- Подпись 3 -->
<div id="box-3" class="box">
<img id="image-3" src="http ://image.JPG"/>
<span class="caption fade-caption">
<h3>Проявляющаяся подпись Fade Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
<!-- Подпись 4 -->
<div id="box-4" class="box">
<img id="image-4" src="http ://image.JPG"/>
<span class="caption slide-caption">
<h3>Выскальзывающая подпись Slide Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
<!-- Подпись 5 -->
<div id="box-5" class="box">
<div class="rotate">
<img id="image-5" src="http ://image.JPG"/>
<span class="caption rotate-caption">
<h3>Подпись с поворотом This is rotate caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
<!-- Подпись 6 -->
<div id="box-6" class="box">
<img id="image-6" src="http ://image.jpg"/>
<span class="caption scale-caption">
<h3>Масштабная подпись Free Style Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
Комментариев нет:
Отправить комментарий