Вы ищите расширение, которое бы отображало содержимое: HTML, AJAX, DHTML, текст, видеоплеер, YouTube, SWF. А также могло бы послужить отличной фотогалереей?
Вы попали в саму точку! HighSlide - это все в одном. Незаменимое расширение функциональности любого сайта (WordPress, Joomla, Magento, Drupal и тому подобные) позволит Вам легко настроить красивые всплывающие элементы Вашего кода, а также видеоплеера, код которых Вы сможете разместить в любом месте и на любой HTML странице.
Для того, чтобы Highslide заработал, Вам всего лишь необходимо подключить требуемый файлы JavaScript, CSS и просто начать использовать замечательную фотогалерею или отображать видео с сайта YouTube.
Чтобы использовать данное расширение для показа видеороликов, которые будут отображаться во всплывающем контейнере с мягкой анимацией, по нажатию пользователем на ссылку, изображение или текст Вам необходимо произвести следующее:
Добавить на требуемую страницу код:
<script src="http://YOUR_SITE.org/ПУТЬ_К_ФАЙЛУ/highslide-full.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
hs.graphicsDir = 'http://YOUR_SITE.org/ПУТЬ_К_ГРАФИЧЕСКИМ_ФАЙЛАМ/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
</script>
Не забудьте поменять путь к файлам:
hs.graphicsDir = 'http://YOUR_SITE.org/ПУТЬ_К_ГРАФИЧЕСКИМ_ФАЙЛАМ/';
<script src="http://YOUR_SITE.org/ПУТЬ_К_ФАЙЛУ/highslide-full.js" type="text/javascript" charset="utf-8"></script>
Далее Вам остается взять код Вашего плеера, который собираетесь поставить для открытия в появляющемся div'e:
<a href="#" onclick="return hs.htmlExpand(this, { width: 650,height: 430,contentId: 'highslide-htmlc193', outlineType: 'rounded-white', wrapperClassName: 'draggable-header', headingText: 'Selena Gomez & The Scene - Round & Round' } )" class="highslide"><img style="float:left;" src="http://YOUR_SITE.org/ПУТЬ_К_ИЗОБРАЖЕНИЮ/p.jpg" title="Нажмите, чтобы воспроизвести видео" width="80" height="60" /></a>
<div class="highslide-html-content" id="highslide-htmlc193">
<div class="highslide-header">
<ul>
<li class="highslide-close">
<a href="#" onclick="return hs.close(this)"></a>
</li>
</ul>
</div>
<div class="highslide-body">
<p><embed id="player" src="//inverser.pro/sys/player.swf" width="640" height="360" flashvars="set_pl1_title=Inverser.PRO&set_pl1_posterUrl=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_prew.jpg&set_pl1_video1_url=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_site.mp4&set_pl1_duration=0&set_uiLanguage=ru&set_color_scheme=light&set_color_buttonBg=&set_color_buttonNormal=#424242&set_color_buttonHover=#ff002e&set_skinName=transparent&set_hide=shareCodeButton&set_title_show=beforePlay,onPlay,afterPlay&set_autoHideControlBar=true" bgcolor="#000000" wmode="opaque" allowscriptaccess="always" type="application/x-shockwave-flash" allowfullscreen="true" allownetworking="external" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></p>
<div class="highslide-footer">
<div><span class="highslide-resize" title="Изменить размер"></span></div>
</div>
</div>
Итак:
<a href="#" onclick="return hs.htmlExpand(this, { width: 650,height: 430,contentId: 'highslide-htmlc193', outlineType: 'rounded-white', wrapperClassName: 'draggable-header', headingText: 'Selena Gomez & The Scene - Round & Round' } )" class="highslide"><img style="float:left;" src="https://usemind.org/m/uploads/p.jpg" title="Нажмите, чтобы воспроизвести видео" width="80" height="60" /></a>
• width: 640,height: 360 - ширина и высота окошка;
• contentId: 'highslide-htmlc193' - id того элемента, которое будет использовано в качетсве окна;
• outlineType: 'rounded-white' - тема оформления;
• headingText: 'Selena Gomez & The Scene - Round & Round' - текст, который будет выведен в заголовок - он будет использован в качестве элемента, за который можно передвигать окно;
• <img style="float:left;" src="http://YOUR_SITE.org/ПУТЬ_К_ИЗОБРАЖЕНИЮ/p.jpg" title="Нажмите, чтобы воспроизвести видео" width="80" height="60" /> - изображение, которое служит вызовом функции, которая активирует всплывающее окно, можете использовать ссылку, вместо этого изображения или взять это: 
<div class="highslide-html-content" id="highslide-htmlc193">
id контейнера, который будем использовать;
<p><embed id="player" src="//inverser.pro/sys/player.swf" width="640" height="360" flashvars="set_pl1_title=Inverser.PRO&set_pl1_posterUrl=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_prew.jpg&set_pl1_video1_url=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_site.mp4&set_pl1_duration=0&set_uiLanguage=ru&set_color_scheme=light&set_color_buttonBg=&set_color_buttonNormal=#424242&set_color_buttonHover=#ff002e&set_skinName=transparent&set_hide=shareCodeButton&set_title_show=beforePlay,onPlay,afterPlay&set_autoHideControlBar=true" bgcolor="#000000" wmode="opaque" allowscriptaccess="always" type="application/x-shockwave-flash" allowfullscreen="true" allownetworking="external" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></p>
- это сам плеер, то есть код плеера, который Вы будете вставлять;
<div><span class="highslide-resize" title="Изменить размер"></span></div>
- изменение размера.
Как видите, highslide-htmlc193 - это id должно быть разным для каждого плеера, находящегося на одной странице с другим контейнером со всплывающим видео, вставленным этим образом. То есть, если Вы используете несколько плееров, которые всплывают на одной странице, то меняйте это значение, не важно как, важно, чтобы оно было разным в разных контейнерах.
Демонстрация устроена таким образом, что открывая страницу, Вы получаете все возможные примеры использования данного расширения. Далее проследуйте к интересующему Вас примеру и откройте Исходный код страницы, нажав на пустом месте страницы правой кнопкой мыши.
Имея исходный код, воспользуйтесь примерами вставки изображений или видео из него. Если у Вас возникают вопросы, пишите в комментариях к этой статье.
Успешного использования этого замечательного скрипта!
