$(".tips").tip_cards({ entrance: "bottom", column: 4, margin: "1%", selector: "> li", hoverTilt: "right", triggerSelector: "> li a", cardFlyDirection: "all", closeButton: "X", flipButton: "Flip", navigation: true, beforeOpen: null, afterOpen: null }); wowSliderProject generated by WOWSlider.com dzhordvik: html каркас.

20 нояб. 2012 г.

html каркас.


Так выглядит конструкция 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>

Комментариев нет:

Отправить комментарий