Fancy box
Зависимости
При помощи данного компонента вы можете:
- Создавать галлереи изображений
- Загружать данные через ajax во всплывающие окно
- Показывать данные скрытого div-а во всплывающием окне
- Подгружать данные в iframe во всплывающие окно
В месте где необходима библиотека напишите:
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>