Използване на видео плеър във Вашия сайт

Flowplayer е видео плеър, който позволява вграждане на видео файл в уеб страница. Това е безплатен софтуерен проект с GPL 3+ лиценз. Този плеър може да възпроизвежда флаш видео, като работи с форматите  .flv и .mp4

Инструкции:

1. В заглавната част на сайта (между таговете <head>) трябва да бъде включен javascript файла чрез следния код:

<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>

2. Мястото, където се визуализира видеото се намира между таговете за линк <a>

<a href="TomJerry.flv" id="player">
</a>

Стойността на атрибута href е пътя към видеото. Името на атрибута id също е важно, защото то ще бъде използвано, за да се укаже къде да се покаже видео файла

3. Най-важната част е извикването на функцията flowplayer(), като първият аргумент е id на линка, където се визуализира видеото, а втория е flash файла, който стартира плеъра.

<script>
	flowplayer("player", "flowplayer-3.2.7.swf", {
		clip : {
			height: 200,
			autoPlay : true,
			autoBuffering : true,
			controls : {
				mute : true,
				volume : true,
				time : true,
				scrubber : true,
				fullscreen : true
			}
		},
		onLoad: function () {
		  this.setVolume(100);
		}
	});
</script>

4. Последната стъпка изисква файла flowplayer.controls-3.2.5 да бъде наличен в директорията, където е разположен файла flowplayer-3.2.7

Свали файловете – videoplayer.zip 

Сподели в социалните мрежи

Google Maps API карта във вашия сайт

Google Maps API има неизчерпаем ресурс от функционалности, особено ако създавате уеб сайт, който ползва маршрути. Една от традиционните и най-често ползвани възможности е вграждане на карта на местоположението. Разпространеният начин е вграждане на iFrame от maps.google.com, където за всеки адрес предлагат съответна връзка с iFrame за вграждане. Използването на Google Maps API позволява по-голяма свобода при използването на картите, а същевременно става бързо и лесно.

Инструкции:

  1. Изтеглете jQuery библиотеката от сайта на jQuery или от нашия сървър - jquery-1.7.1.min и го качете в директорията с вашия сайт. (Например): /root/js/
  2. Изтеглете нашия javascript за имплементиране на картата – nexus-gmap.zip от нашия сървър и я качете в директорията с вашия сайт. (Например): /root/js/
  3. Включете jQuery библиотеката, javascript модула Google Maps API от техния сървър и nexus-gmap.js скрипта
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="js/nexus-gmap.js"></script>

4. Поставете следния код в мястото където искате да бъде вашата карта

<div id="place_map" style="width:450px; height:240px;">
	 <form>
		  <input  name="l2" type="hidden" value="42.13622" />
		  <input  name="l1" type="hidden" value="24.758028" />
		  <input  name="info" type="hidden" value="Пловдив, Христо Ботев 87" />
	 </form>
</div>

Това са всички стъпки по вграждането на картата. Вече имате напълно функционална карта от Google Maps API :)

Допълнителна информация

Написания от нас nexus-gmap.js използва l1, l2 и info от input полетата и извиква Google Maps API-то. Височината и ширината могат да се промеят от HTML кода на стъпка 4, а id-то на <div> place_map се използва от nexus-gmap.js и може да се променя само при положение че се промени и в javascript файла. Допълнителни настройки на извикването се правят директно в javascript файла

nexus-gmap.js

$(document).ready(function(){
     var lon = $('input[name="l1"]').val();
    	var lat = $('input[name="l2"]').val();
    	var info = $('input[name="info"]').val();	

     var latlng = new google.maps.LatLng(lat, lon);
     var myOptions = {
          zoom: 16,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
     };

     // add the map to the div, call google.maps.Map();
     var map = new google.maps.Map(document.getElementById("place_map"), myOptions);

     var marker = new google.maps.Marker({
          map:map,
          position: latlng,
          animation: google.maps.Animation.DROP,
          title:info
     });

     // add the marker to the map, call setMap();
     marker.setMap(map);
})

Сподели в социалните мрежи

Fancybox – полезен инструмент за разглеждане на изображения в уеб сайт

FancyBox е инструмент за изобразяване на картинки, html съдържание и мултимедия в типичния за MAC стил с кутийка, която застава отгоре върху текущо отворената уеб страница.
Инструментът е базиран на jQuery библиотеката и се разпространява свободно с MIT и GPL Лиценз.
Опции:
  • Може да изобразява както картинки, така и HTML елементи, SWF видео клипове, iFrame, Ajax извиквания
  • Лесно се персонализира от CSS файл и настройки при извикване
  • Групира свързани елементи (например снимки) и им добавя навигация
  • Ако е включен mouse-wheel plugin в страницата, тогава FancyBox ще реагира и на събития от скрола на мишката
Инструкции:
  1. Изтеглете jQuery библиотеката от сайта на jQuery или от нашия сървър - jquery-1.7.1.min и го качете в директорията с вашия сайт. (Например): /root/js/
  2. Изтеглете FancyBox от сайта на FancyBox или директно от нашия сървър - fancybox.zip и го качете в директорията с вашия сайт. (Например): /root/fancybox/
  3. Включете файловете в <head> секцията на HTML:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
   4.   Заредете jQuery функцията fancybox() на някой селектор – (Например): <a> таг с клас fancy_show
<script type="text/javascript">
	$(document).ready(function() {
		$("a.fancy_show").fancybox({
			'overlayShow'	: false,
			'speedIn'	: 600,
			'speedOut'	: 200,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});
	});
</script>
4.  За да използвате FancyBox просто обградете ваша малка снимка от <img> таг  с <a> таг, който сочи към по-големия вариант на снимката и е с клас fancy_show , както е показано на примера:
<a class="fancy_show" href="pictures/big_picture.jpg" rel="group">
     <img src="thumbs/thumb_picture.jpg" alt="" />
</a>

Сподели в социалните мрежи