Email:
Mobile:
YouTube

Вы ищите расширение, которое бы отображало содержимое: 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&amp;set_pl1_posterUrl=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_prew.jpg&amp;set_pl1_video1_url=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_site.mp4&amp;set_pl1_duration=0&amp;set_uiLanguage=ru&amp;set_color_scheme=light&amp;set_color_buttonBg=&amp;set_color_buttonNormal=#424242&amp;set_color_buttonHover=#ff002e&amp;set_skinName=transparent&amp;set_hide=shareCodeButton&amp;set_title_show=beforePlay,onPlay,afterPlay&amp;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" /> - изображение, которое служит вызовом функции, которая активирует всплывающее окно, можете использовать ссылку, вместо этого изображения или взять это: кнопка play

<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&amp;set_pl1_posterUrl=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_prew.jpg&amp;set_pl1_video1_url=http%3A%2F%2Ff.usemind.org%2Ffiles%2Fsites%2Finverser.pro%2F_inverser.pro_site.mp4&amp;set_pl1_duration=0&amp;set_uiLanguage=ru&amp;set_color_scheme=light&amp;set_color_buttonBg=&amp;set_color_buttonNormal=#424242&amp;set_color_buttonHover=#ff002e&amp;set_skinName=transparent&amp;set_hide=shareCodeButton&amp;set_title_show=beforePlay,onPlay,afterPlay&amp;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 должно быть разным для каждого плеера, находящегося на одной странице с другим контейнером со всплывающим видео, вставленным этим образом. То есть, если Вы используете несколько плееров, которые всплывают на одной странице, то меняйте это значение, не важно как, важно, чтобы оно было разным в разных контейнерах.

Демонстрация устроена таким образом, что открывая страницу, Вы получаете все возможные примеры использования данного расширения. Далее проследуйте к интересующему Вас примеру и откройте Исходный код страницы, нажав на пустом месте страницы правой кнопкой мыши.

Имея исходный код, воспользуйтесь примерами вставки изображений или видео из него. Если у Вас возникают вопросы, пишите в комментариях к этой статье.

Успешного использования этого замечательного скрипта!

Highslide

Файлы Highslide:

Скачать Highslide v4.1.13
DEMO

Задать вопрос

inverser 2015-10-07 09:11:40
Devol, возможно возникает конфликт JS.
Devol 2015-10-07 09:11:17
Не катит скрипт на Битрикс ... (
inverser 2015-10-07 09:10:59
Василий, изучайте JS. Что Вы от меня хотите?
Василий 2015-10-07 09:10:37
А какой смысл менять на целые числа, если они в этом случае являются пикселями! Ну выровняю я к примеру таким образом окно по центру, при условии, что разрешение моего экрана 1366х768. А зайдет пользователь на мой сайт у которого разрешение экрана другое и соответственно окно то у него будет отображаться со смещением.
inverser 2015-10-07 09:10:06
Василий, попробуйте менять на целые числа, например 150 или 200.
Василий 2015-10-07 09:09:47
Мне нужно вставить во всплывающее окно видео и текст, и я выбрал вот это: f.usemind.org/.../player.html
Изменение этих значений на "auto" не дает никаких результатов (скрипт со значением auto вообще перестает работать). С нетерпением жду ответа.
inverser 2015-10-07 09:09:07
Василий, в зависимости от того какой именно вариант скрипта Вы подключили. Попробуйте найти следующий код в highslide.js (или имя файла должно быть подобным):
marginLeft : 15,
marginRight : 15,
marginTop : 15,
marginBottom : 15,
и попробуйте также изменить эти значения на большие или же на auto.
Например:
marginLeft : auto,
marginRight : auto,
marginTop : auto,
marginBottom : auto
Василий 2015-10-07 09:08:42
Здравствуйте, а как сделать так, чтобы содержимое постоянно всплывало по центру экрана? А то окно у меня всплывает в разных местах, то слева, то справа, то снизу, то сверху, в зависимости от того где расположена картинка, после нажатия на которую появляется окно с содержимым.
Хостинг для Вашего сайта
от 7$/365 дней
подробнее