Как настроить, чтобы в блоге видео открывалось в всплывающем окне как при использовании библиотеки Lightview?

голоса: 0

Добрый день уважаемый консультант.

Мой вопрос состоит в следующем.

у меня есть ког видеоблога

 

При наведении мышка картинка увеличивается маленько, мне нужно что бы видео с ютуба открывалось в ajax окне.

Не могу ничего найти и сделать на этом сайте я нашел подходящий образец видео с ютуба но не могу понять как мне сделать так же на моем сайте. Подскажите пожалуйста, может просто есть какой то код, просто я не силен в этом чаще всего использую готовые коды и редактирую под себя. Помогите, объясните пожалуйста как мне добится желаемого результата?

 

Нужно вот так ->

Адрес сайта http://levprotiv.do.am/
Закрыто с пометкой: Вопрос решен!
| Автор: | Категория: Дизайн сайта
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

Голоса: +1

1. Перейдите по ссылке - http://projects.nickstakenburg.com/lightview/download скачайте архив.

2. Перейдите в раздел документацию, прочтите инструкцию по установке - http://projects.nickstakenburg.com/lightview/documentation

На страницах в блоке между <head>здесь</head> должны быть прописаны скрипты и стили:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!--[if lt IE 9]>
  <script type="text/javascript" src="/js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/spinners/spinners.min.js"></script>
<script type="text/javascript" src="/js/lightview/lightview.js"></script>

<link rel="stylesheet" type="text/css" href="/css/lightview/lightview.css"/>

Все эти файлы и скрипты вы должны загрузить на фтп сайта с архива который скачаете с этого сайта и папки должны совпадать как и в этих путях прописано так как в скриптах и стилях данные путя у директориям так же прописаны и чтобы все работало нужно сделать аналогично либо менять под себя и отредактировать все файлы.

После уже в материале на сайте вы можете добавлять видео подобным образом:

<a href="ссылка на видео" class="lightview" data-lightview-type="iframe" data-lightview-options="width: 638, height: 360, viewport: 'scale'" data-lightview-title="Название к видео в всплывающем окне" data-lightview-caption="описание к видео в окне">
<img src="ссылка на превью к видео" alt=""></a>

как-то так, я ранее этой библиотекой пользовался, удобно.

| Автор:
После того как я эксперементировал было все криво и админ бар проподал с сайта.
Роман Творкунас,
не за место своих, а установить рядом и попробовать, если все правильно установите, то все будет работать, если неправильно соответственно не будет
Роман Творкунас,
Не вижу ни страницы примера с установленным видео ни установленных скриптов которые я описал выше, извините, но я уже описал и так детально, за вас никто не сделает пока вы сами этого не захотите.
Yuri_Geruk,

так в общем смотрите у меня стоит код с одним видео сейчас он создан отдельно в глобальном блоке.

Далее я залил все файлы которые скачал. и подскажите куда вставить вашь код. я вставлял его везде но не получилось:) Пожалуйста ткните носом ^_^

Роман Творкунас,
смотрите внимательно выше, я написал какие скрипты стоять должны на сайте, вы же установили лишние, после удалили или чего еще, я не вижу ничего чтобы проверить работу скрипта ни ссылки где установлен пример
Yuri_Geruk,

Все я разобрался спасибо вам огромное за помощь перечитал на 5 раз все добавил <head></head>

код получился следующим:

 

<head><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!--[if lt IE 9]>
  <script type="text/javascript" src="/js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/spinners/spinners.min.js"></script>
<script type="text/javascript" src="/js/lightview/lightview.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/lightview/lightview.css"/></head>
    

<!-- Обзор видео --> 
<div class="right_bg_t"> 
<div class="right_bg_rr"> 
<div class="right_bg_r"> 
<div class="right_bg_b"> 
<div class="vid">

<a href="http://www.youtube.com/v/tiTYxSKAPmo" class="lightview" data-lightview-type="iframe" data-lightview-options="width: 638, height: 360, viewport: 'scale'" data-lightview-title="Best Css movie HD" data-lightview-caption="Cool Head shot">
<img src="/slider/1.jpg" alt="" width="178" ></a>    
    
</div> 
</div> 
</div> 
</div> 
</div> 
<!-- /Обзор видео -->

Все заработало отлично. Спасибо огромное.

 

 

Роман Творкунас,
вот и отлично, разобрались и это главное))
...