• Решено kuzco

    (@kuzco)


    Нашел тут в форуме описание как использовать 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)
  • Во-первых, если вы еще не скачали 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)

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

    Автор kuzco

    (@kuzco)

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

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

    Автор kuzco

    (@kuzco)

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

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