Размеры для flash-баннера в процентах — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
 
(не показаны 3 промежуточные версии этого же участника)
Строка 6: Строка 6:
 
<br/><br/>
 
<br/><br/>
 
Для того, чтобы изменить размеры баннера, на те которые указаны в процентах, будем отправлять ajax запрос для получения данных о этих величинах и с помощью jQuery изменять соответствующие атрибуты у элемента embed баннера.
 
Для того, чтобы изменить размеры баннера, на те которые указаны в процентах, будем отправлять ajax запрос для получения данных о этих величинах и с помощью jQuery изменять соответствующие атрибуты у элемента embed баннера.
 +
<br/><br/>
 +
В файл \classes\modules\custom.php добавим код метода getBannerWidthAndHeight(), который по id баннера будет возвращать его ширину и высоту в процентах:
 +
<source lang="php">
 +
public function getBannerWidthAndHeight( $banner_id )
 +
{
 +
  $banner_id = ( $banner_id ? $banner_id : getRequest('param0') );
 +
  $banner = umiObjectsCollection::getInstance()->getObject( $banner_id );
 +
 
 +
  $banner_width_procent = 0;
 +
  $banner_height_procent = 0;
 +
 
 +
  if ( $banner instanceof iumiObject )
 +
  {
 +
  $banner_width_procent =  (int) $banner->getValue('width_procent');
 +
  $banner_height_procent = (int) $banner->getValue('height_procent');
 +
  }
 +
  return array('width_procent' => $banner_width_procent,
 +
          'height_procent' => $banner_height_procent);
 +
}
 +
</source>
 +
 +
Вызов макроса %banners fastInsert()% поместим в блочный элемент с id = "flash_banner":
 +
<source lang="html4strict">
 +
<div class="flash_banner">
 +
    %banners fastInsert('идентификатор_рекламного_места')%
 +
</div>
 +
</source>
 +
 +
После этих строк добавим JavaScript код отправки ajax запроса и обработки полученных данных:
 +
<source lang="javascript">
 +
<script type="text/javascript">
 +
$('document').ready(function(){
 +
$('.flash_banner > object').ready(function(){
 +
var $bannerObject = $('.flash_banner > object');
 +
if ( !$bannerObject  )
 +
return false;
 +
var bannerId = $bannerObject.attr('id');
 +
var urlToGetData = "/udata://custom/getBannerWidthAndHeight/"+ bannerId +"/.json";
 +
$.ajax({
 +
type: "POST",
 +
url: urlToGetData,
 +
dataType: 'json'
 +
  })
 +
.done(function( result ) {
 +
var widthProcent = result.width_procent;
 +
var heightProcent = result.height_procent;
 +
var bannerObjectEmbed = $('.flash_banner > object > embed');
 +
if ( !!widthProcent && !!heightProcent )
 +
{
 +
bannerObjectEmbed.attr('width', widthProcent + '%');
 +
bannerObjectEmbed.attr('height', heightProcent + '%');
 +
}
 +
});
 +
});
 +
});
 +
</script>
 +
</source>

Текущая версия на 07:08, 12 апреля 2014

Актуально для версии 2.9.6

Задача: Реализовать возможность указания для flash-баннера его ширины и высоты в процентах.

Реализация:
В модуле "Шаблоны данных" для типа данных "Баннер с флешкой" добавим группу полей с названием "Размеры в процентах". В эту группе полей добавим два поля типа "Число" с названиями "Ширина" и "Высота", и идентификаторами "width_procent" и "height_procent" соответственно.

Для того, чтобы изменить размеры баннера, на те которые указаны в процентах, будем отправлять ajax запрос для получения данных о этих величинах и с помощью jQuery изменять соответствующие атрибуты у элемента embed баннера.

В файл \classes\modules\custom.php добавим код метода getBannerWidthAndHeight(), который по id баннера будет возвращать его ширину и высоту в процентах: 

public function getBannerWidthAndHeight( $banner_id )
{
   $banner_id = ( $banner_id ? $banner_id : getRequest('param0') );
   $banner = umiObjectsCollection::getInstance()->getObject( $banner_id );
   
   $banner_width_procent = 0;
   $banner_height_procent = 0;
   
   if ( $banner instanceof iumiObject ) 
   {
	   $banner_width_procent =  (int) $banner->getValue('width_procent');
	   $banner_height_procent = (int) $banner->getValue('height_procent');
   }
   return array('width_procent' => $banner_width_procent,
	          'height_procent' => $banner_height_procent);
}

Вызов макроса %banners fastInsert()% поместим в блочный элемент с id = "flash_banner": 

<div class="flash_banner">
     %banners fastInsert('идентификатор_рекламного_места')%
</div>

После этих строк добавим JavaScript код отправки ajax запроса и обработки полученных данных: 

<script type="text/javascript">
	$('document').ready(function(){
		$('.flash_banner > object').ready(function(){
			var $bannerObject = $('.flash_banner > object');
			if ( !$bannerObject  )
				return false;
			var bannerId = $bannerObject.attr('id');
			var urlToGetData = "/udata://custom/getBannerWidthAndHeight/"+ bannerId +"/.json";
			$.ajax({
				type: "POST",
				url: urlToGetData,
				dataType: 'json'
			  })
				.done(function( result ) {
					var widthProcent = result.width_procent;
					var heightProcent = result.height_procent;
					var bannerObjectEmbed = $('.flash_banner > object > embed');
					if ( !!widthProcent && !!heightProcent )
					{
						bannerObjectEmbed.attr('width', widthProcent + '%');
						bannerObjectEmbed.attr('height', heightProcent + '%');
					}
				});
		});
	});
</script>
Источник — «https://wiki.umisoft.ru/index.php?title=Размеры_для_flash-баннера_в_процентах&oldid=7478»