Fancybox и видео

  • Решено kuzco

    (@kuzco)


    14 лет, 3 месяца назад

    Нашел тут в форуме описание как использовать fancybox с видео. Помогите расшифровать код:

    <div style="text-align: center;"><a class="fancybox" href="#welcomevideo"><img src="http://www.howieolson.com/wp-content/uploads/2010/04/howie-olsen-welcome-video.jpg" width="251px" height="188px" alt="Welcome To High Output"></a></div>

<div style="display:none" id="welcomevideo">
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object>
</div>

    Если хочется использовать для текстовой ссылки например и с youtube, то что и куда?

Просмотр 5 ответов — с 1 по 5 (всего 5)
  • anatole111

    (@anatole111)

    14 лет, 3 месяца назад

    Во-первых, если вы еще не скачали fancybox, то скачайте тут:link. Затем пихаете папку fancybox в папку темы.
    Потом, в header.php темы и между <head></head> но ПОСЛЕ <?php wp_head(); ?> вставляете эти строки:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script type="text/javascript">$(document).ready(function() {

	/* This is basic - uses default settings */

	$("a#single_image").fancybox();

	/* Using custom settings */

	$("a#inline").fancybox({
		'hideOnContentClick': true
	});

	/* Apply fancybox to multiple items */

	$("a.group").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600,
		'speedOut'		:	200,
		'overlayShow'	:	false
	});

	$("#youtube_box").click(function() { /* #youtube_box - id вашей ссылки на видео*/
	$.fancybox({
			'padding'		: 0,
			'autoScale'		: false,
			'transitionIn'	: 'none',
			'transitionOut'	: 'none',
			'title'			: this.title,
			'width'		: 680,
			'height'		: 495,
			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
			'type'			: 'swf',
			'swf'			: {
			   	 'wmode'		: 'transparent',
				'allowfullscreen'	: 'true'
			}
		});

	return false;
});
});
</script>

    Ну и потом где надо делаете ссылку типа: <a id="youtube_box" href="http://www.youtube.com/watch?v=M-cIjPOJdFM&fs=1">Смотреть Ютуб</a>

    Автор kuzco

    (@kuzco)

    14 лет, 3 месяца назад

    Этот вариант радикальнее установки соответствующего плагина

    Автор kuzco

    (@kuzco)

    14 лет, 3 месяца назад

    Вон у меня уже стоит fancybox for wordpress в виде плагина. Но в нем нет многих штатных функций в настройках. В частности подписей внутри картинки и видео.

    anatole111

    (@anatole111)

    14 лет, 3 месяца назад

    Да, я знаю толк в извращениях ))) Но мне легче вызвать fancybox мануально чем, а в посты вставлять соответствующие ссылки, или добавить кнопку в wordpress ный html редактор для вставки тех или иных фич fancybox а. Но это уже сугобо личные предпочтения )

    Автор kuzco

    (@kuzco)

    14 лет, 2 месяца назад

    А не повредит, если я вставлю в блог и этот код и плагин оставлю?

Просмотр 5 ответов — с 1 по 5 (всего 5)
  • Тема «Fancybox и видео» закрыта для новых ответов.