Как реализовать: нажать на картинку и всплывает окно с видео

<<

StalkerDL

Автор темы

Сообщения: 10

Зарегистрирован: 17 ноя 2011, 02:20

Благодарил (а): 5 раз.
Поблагодарили: 0 раз.

Сообщение 30 ноя 2011, 14:18

Re: Как реализовать: нажать на картинку и всплывает окно с в

а если хостинг - это blogspot?

Добавлено спустя 53 минуты 45 секунд:
Re: Как реализовать: нажать на картинку и всплывает окно с видео
никак не могу понять в чем дело. и так и сяк подходил к корректировке скрипта - не получается и все! :(

Что Я делал?

1 картинки скопировал в picasa.google.com
2 поменял в файле prettyPhoto.css адреса локальные на интернет-адреса
3 загрузил файлы prettyPhoto.css, jquery-1.6.1.min.js и jquery.prettyPhoto.js на сайт гугла (как в теме выше было рассказано, права доступа прописал как было в той самой теме расписано)
4 поменял в файле index.html адреса локальных файлов prettyPhoto.css, jquery-1.6.1.min.js и jquery.prettyPhoto.js на загруженные
открываю index.html. все работает

теперь надо перенести на blogspot.
вот здесь и получается косяк.

Посмотрев код, вставляю вот этот код:
  Код:
      <script src="https://sites.google.com/site/testovijsajt888/jquery-1.6.1.min.js" type="text/javascript"></script>
      <link rel="stylesheet" href="https://sites.google.com/site/testovijsajt888/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
      <script src="https://sites.google.com/site/testovijsajt888/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

в шаблон блога (Дизайн -> Изменить html) перед тегом </head>

A в тело перед </body> вставляю такой код:
  Код:
         <script type="text/javascript" charset="utf-8">
         $(document).ready(function(){
            $("area[rel^='prettyPhoto']").prettyPhoto();
            
            $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
            $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
      
            $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
               custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
               changepicturecallback: function(){ initialize(); }
            });

            $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
               custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
               changepicturecallback: function(){ _bsap.exec(); }
            });
         });
         </script>

и дальше начинается "мистика".

Когда вставляю код слайд-шоу или видео, то работает как-то странно. То видео показывает ок, а флеш как глючит, загрузится, потом снова загрузится и снова, то рамка у видео или флеш вместо сглаженных углов становится прямой. В чем дело - понять не могу... Уже намучался с этим скриптом...
Кто разобрался и успешно реализовал на практике, напишите, пожалуйста, алгоритм как Вы делали???
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 30 ноя 2011, 16:19

Re: Как реализовать: нажать на картинку и всплывает окно с в

StalkerDL писал(а):Кто разобрался и успешно реализовал на практике, напишите, пожалуйста, алгоритм как Вы делали???

Я разобрался (где-то тут уже постил ссылку), правда для флеш не пробовал, но там не сильные отличия:
  Код:
<a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf?width=792&amp;height=294" rel="prettyPhoto[flash]">bla-bla-bla</a>

Дайте ссылку на руководство, по которому вы делали.
Последний раз редактировалось aldous 30 ноя 2011, 16:27, всего редактировалось 1 раз.
<<

StalkerDL

Автор темы

Сообщения: 10

Зарегистрирован: 17 ноя 2011, 02:20

Благодарил (а): 5 раз.
Поблагодарили: 0 раз.

Сообщение 02 дек 2011, 05:52

Re: Как реализовать: нажать на картинку и всплывает окно с в

aldous писал(а):
StalkerDL писал(а):Дайте ссылку на руководство, по которому вы делали.
Я имел в виду руководство по размещению файлов на гугле. Вот оно: /go.php?http://amateurblogger.ru/2010/09/kak-zagruzit-file-v-blog-blogspot.html

Остальное сам разбирался открыв код index.html.

Экспериментировал и получилось таким образом:

  Код:
         <div class="gallery clearfix"></div>
            <div class="gallery clearfix">
               <a href="http://dl.dropbox.com/u/6869821/test.swf?width=650&amp;height=290" rel="prettyPhoto[flash]" title="text"><img src="http://..." width="60" alt="text" /></a>
            </div>


Если убрать строку
  Код:
<div class="gallery clearfix"></div>

То есть разместить
  Код:
            <div class="gallery clearfix">
               <a href="http://dl.dropbox.com/u/6869821/test.swf?width=650&amp;height=290" rel="prettyPhoto[flash]" title="text"><img src="http://..." width="60" alt="text" /></a>
            </div>

то почему-то скрипт начинает глючить. Почему так - не знаю.
Короче, вот такой прикол. Причем только таким образом получается разметить как флеш, так и видео с ютуба.

Добавлено спустя 32 минуты 7 секунд:
Re: Как реализовать: нажать на картинку и всплывает окно с видео
описанная мной выше схема работает только для отдельного сайта (просто на компе index.html, хотя все адреса изображений и файлов поменял на размещенные в Интернете).

aldous, сделал как вы написали в своем блоге один к одному для блогспота. Не работает... :(

да чтож такое.... ((
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 02 дек 2011, 09:25

Re: Как реализовать: нажать на картинку и всплывает окно с в

Попробуйте такую схему.
Создайте пост, вставьте в него ↓ , сохраните и проверьте, будет ли всплывать ролик или нет.
  Код:
<script type="text/javascript" src="http://planeta.omg-linux.ru/docs/pretty/jquery.prettyPhoto.js"></script>

<link rel="stylesheet" href="http://planeta.omg-linux.ru/docs/pretty/prettyPhoto.css">

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
   theme: 'light_square'
  });
});
</script>

<a href="http://www.youtube.com/watch?v=2xB4dbdNSXY" rel="prettyPhoto" title=""><img src="http://img.youtube.com/vi/2xB4dbdNSXY/0.jpg" alt="YouTube" width="320" /></a>

Код 100 рабочий, только что копипастнул на статическую страницу блога и проверил. На нём же проверил ваш ролик с дропбокса (который вы удалили), prettyphoto пробует загрузить ссылку, значит, всё ок.


test.png


Не знаю почему, но я пробую на разных шаблона - не заводится там, где работал лайтбокс (его естественно нужно отключить).
Версия жуквери:
  Код:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'></script>

Ссылки на скрипт prettypho и стили, которые вы захостили, нужно в это время убрать из шаблона, иначе не получится сделать достоверные выводы.
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Последний раз редактировалось aldous 02 дек 2011, 09:49, всего редактировалось 3 раз(а).
<<

StalkerDL

Автор темы

Сообщения: 10

Зарегистрирован: 17 ноя 2011, 02:20

Благодарил (а): 5 раз.
Поблагодарили: 0 раз.

Сообщение 02 дек 2011, 19:55

Re: Как реализовать: нажать на картинку и всплывает окно с в

Я создал новый блог. И вставил в новый пост вот этот код:
aldous писал(а):
  Код:
<script type="text/javascript" src="http://planeta.omg-linux.ru/docs/pretty/jquery.prettyPhoto.js"></script>

<link rel="stylesheet" href="http://planeta.omg-linux.ru/docs/pretty/prettyPhoto.css">

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
   theme: 'light_square'
  });
});
</script>

<a href="http://www.youtube.com/watch?v=2xB4dbdNSXY" rel="prettyPhoto" title=""><img src="http://img.youtube.com/vi/2xB4dbdNSXY/0.jpg" alt="YouTube" width="320" /></a>



нажимаю на картинку - просто переходит на ютуб, никаких всплывающих окон PrettyPhoto... Я тестирую на абсолютно новом блоге blogspot.
Я правильно понял вас??

Добавлено спустя 36 секунд:
Re: Как реализовать: нажать на картинку и всплывает окно с видео
вот он: http://testovijblog888.blogspot.com/
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 02 дек 2011, 20:11

Re: Как реализовать: нажать на картинку и всплывает окно с в

А jQuery где?
  Код:
Версия жуквери:

  Код:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'></script>

Я сохранил страницу вашего блога на десктоп, подставил линк на библиотеку (перед /head). Проверил. Всё ворк.
<<

StalkerDL

Автор темы

Сообщения: 10

Зарегистрирован: 17 ноя 2011, 02:20

Благодарил (а): 5 раз.
Поблагодарили: 0 раз.

Сообщение 02 дек 2011, 22:33

Re: Как реализовать: нажать на картинку и всплывает окно с в

aldous писал(а):А jQuery где?
  Код:
Версия жуквери:

  Код:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'></script>

Я сохранил страницу вашего блога на десктоп, подставил линк на библиотеку (перед /head). Проверил. Всё ворк.



ура! заработало! )) спасибо большое )))

есть правда одна проблемка: дизайн всплываемых окошек прямоугольное белое окно. а в исходном варианте было со скругленными углами и тонкой темной рамкой. Странно, поменял адреса файлов с ваших на свои, все равно ничего не изменилось.

И еще есть вопрос.
Ваш вариант, который вы предложили и который работает отличает от того, который привел Я только следующим кодом:
у меня:
  Код:
         <script type="text/javascript" charset="utf-8">
         $(document).ready(function(){
            $("area[rel^='prettyPhoto']").prettyPhoto();
            
            $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
            $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
      
            $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
               custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
               changepicturecallback: function(){ initialize(); }
            });

            $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
               custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
               changepicturecallback: function(){ _bsap.exec(); }
            });
         });
         </script>


у вас:
  Код:
<script charset='utf-8' type='text/javascript'>
  $(document).ready(function(){
    $(&quot;a[rel^=&#39;prettyPhoto&#39;]&quot;).prettyPhoto({
   theme: &#39;light_square&#39;
  });
});
</script>


откуда у вас этот код?
самое интересное, что код выше Я брал с самого файла index.html архива PrettyPhoto и в локальном варианте когда файл на компе, все работает, однако вот с описанными выше ньюансами.
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 02 дек 2011, 23:17

Re: Как реализовать: нажать на картинку и всплывает окно с в

Вдумчивое чтение документации сократит количество вопросов :)

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

Ответ:
Посмотрите, что находится внутри архива в /images/prettyPhoto/
Название папки является названием темы. Вернёмся к скрипту подключения. Помимо темы здесь можно указать настройки поведения окна, анимации и т.п.
Делается это вот таким образом :theme: 'light_square'

Темы:
Как реализовать: нажать на картинку и всплывает окно с видео

Если вы использовали мой скрипт, то там тема, которую прописал я, это не дефолтовая (light_rounded).

Вопрос:
Ваш вариант, который вы предложили и который работает отличает от того, который привел Я только следующим кодом....

Ответ:
Там громадный код на все демонстрации, которые выложены на странице: галереи, видео и т.д. Для каждой прописаны специфические настройки. Такой огромный ковёр не нужен.
Последний раз редактировалось aldous 02 дек 2011, 23:23, всего редактировалось 1 раз.
<<

StalkerDL

Автор темы

Сообщения: 10

Зарегистрирован: 17 ноя 2011, 02:20

Благодарил (а): 5 раз.
Поблагодарили: 0 раз.

Сообщение 03 дек 2011, 01:17

Re: Как реализовать: нажать на картинку и всплывает окно с в

супер! спасибо большое еще раз, разобрался)

скажите, с помощью чего вы делаете превью видео? с помощью gimp, вручную или с помощью программки (например, как VideoLightBox - красивые) ?
<<

aldous

Аватара пользователя

Сообщения: 1167

Зарегистрирован: 22 май 2011, 22:53

Откуда: Оттуда

Благодарил (а): 20 раз.
Поблагодарили: 131 раз.

Сообщение 03 дек 2011, 01:38

Re: Как реализовать: нажать на картинку и всплывает окно с в

StalkerDL писал(а):супер! спасибо большое еще раз, разобрался)

скажите, с помощью чего вы делаете превью видео? с помощью gimp, вручную или с помощью программки (например, как VideoLightBox - красивые) ?

В смысле картинка, к которой можно привязать ролик? Если понадобится, получу картинку так. А вот такой способ для тех, кто ценит юзабилити в дизайне сайта.
Может ещё как-то делал, уже не помню.
Ютуб вообще зачетная тема, Яндекс любит всё, что с ним связано.
Последний раз редактировалось aldous 03 дек 2011, 01:40, всего редактировалось 1 раз.
Пред.След.

Вернуться в Скрипты для Blogger

Кто сейчас на конференции

Зарегистрированные пользователи: Google [Bot], Yandex [Bot]

Работает на phpBB © 2000, 2002, 2005, 2007 phpBB Group. Дизайн ST Software и Blogger Форум. Русская поддержка phpBB
ЧПУ ссылки от phpbb seo