Fancy box

Зависимости

При помощи данного компонента вы можете:

В месте где необходима библиотека напишите:

IncludeCom('dev/init_fancybox')
    <?php IncludeCom('dev/init_fancybox')?>


    <h2>Отдельные картинки</h2>
    <a class="fancybox" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg" title="Test">
        <img src="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" alt="" />
    </a>
    <a class="fancybox" href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg" title="Test">
        <img src="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_m.jpg" alt="" />
    </a>
    <a class="fancybox" href="http://farm8.staticflickr.com/7065/7058141285_064170310e_b.jpg" title="Test">
        <img src="http://farm8.staticflickr.com/7065/7058141285_064170310e_m.jpg" alt="" />
    </a>
    <a class="fancybox" href="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_b.jpg" title="Test">
        <img src="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_m.jpg" alt="" />
    </a>


    <h2>Отдельные картинки с единой инициализацией</h2>
    <div class="fancyboxes">
        <a href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg" title="Test">
            <img src="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" alt="" />
        </a>
        <a href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg" title="Test">
            <img src="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_m.jpg" alt="" />
        </a>
        <a href="http://farm8.staticflickr.com/7065/7058141285_064170310e_b.jpg" title="Test">
            <img src="http://farm8.staticflickr.com/7065/7058141285_064170310e_m.jpg" alt="" />
        </a>
        <a href="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_b.jpg" title="Test">
            <img src="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_m.jpg" alt="" />
        </a>
    </div>


    <h2>Отдельные картинки с единой инициализацией и картинками при наведении</h2>
    <div class="fancyboxes fancyboxes-hover-icon">
        <a href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg" title="Test">
            <img src="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" alt="" />
        </a>
        <a href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg" title="Test">
            <img src="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_m.jpg" alt="" />
        </a>
        <a href="http://farm8.staticflickr.com/7065/7058141285_064170310e_b.jpg" title="Test">
            <img src="http://farm8.staticflickr.com/7065/7058141285_064170310e_m.jpg" alt="" />
        </a>
        <a href="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_b.jpg" title="Test">
            <img src="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_m.jpg" alt="" />
        </a>
    </div>


    <h2>Объединение в галлерею</h2>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg" title="Test">
        <img src="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7234/7047458501_46a2203733_b.jpg" title="Test">
        <img src="http://farm8.staticflickr.com/7234/7047458501_46a2203733_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_b.jpg" title="Test">
        <img src="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_b.jpg" title="Test">
        <img src="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_m.jpg" alt="" />
    </a>


    <h2>Media-данные</h2>
    <ul>
        <li><a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a></li>
        <li><a class="fancybox-media" href="http://vimeo.com/25634903">Vimeo</a></li>
        <li><a class="fancybox-media" href="http://www.metacafe.com/watch/7635964/">Metacafe</a></li>
        <li><a class="fancybox-media" href="http://www.dailymotion.com/video/xoeylt_electric-guest-this-head-i-hold_music">Dailymotion</a></li>
        <li><a class="fancybox-media" href="http://twitvid.com/QY7MD">Twitvid</a></li>
        <li><a class="fancybox-media" href="http://twitpic.com/7p93st">Twitpic</a></li>
        <li><a class="fancybox-media" href="http://instagr.am/p/IejkuUGxQn">Instagram</a></li>
    </ul>


    <h2>Различные типы (ajax, iframe, inline, swf)</h2>
    <div style="display: none" id="inline">
        Test test inline data test
    </div>
    <ul class="fancyboxes">
        <li>
            <a class="fancybox.ajax" href="/">Ajax</a>
        </li>
        <li>
            <a href="#inline">Inline</a>
        </li>
        <li>
            <a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">SWF</a>
        </li>
    </ul>

    <ul class="fancyboxes">
        <li>
            <a class="fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
        </li>
        <li>
            <a class="fancybox.iframe" href="http://maps.google.com/...">Google maps (iframe)</a>
        </li>
    </ul>