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

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «<hr> <h2>Как можно задать ширину флеш-баннера в процентах?</h2> На данный момент для задания раз…»)
 
 
(не показано 8 промежуточных версий 2 участников)
Строка 1: Строка 1:
−
<hr>
+
[[Категория:Верстка в TPL]][[Категория: Модуль Баннеры]]
−
<h2>Как можно задать ширину флеш-баннера в процентах?</h2>
+
'''Актуально для версии 2.9.6'''<br/><br/>
 +
'''Задача:''' Реализовать возможность указания для flash-баннера его ширины и высоты в процентах.<br/><br/>
 +
'''Реализация:''' <br/>
 +
В модуле "Шаблоны данных" для типа данных "Баннер с флешкой" добавим группу полей с названием "Размеры в процентах". В эту группе полей добавим два поля типа "Число" с названиями "Ширина" и "Высота", и идентификаторами "width_procent" и "height_procent" соответственно.
 +
<br/><br/>
 +
Для того, чтобы изменить размеры баннера, на те которые указаны в процентах, будем отправлять 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>
  
−
На данный момент для задания размеров у флеш-баннеров используются поля типа "Число". При этом символ "%" не работает. Мы предлагаем заменить тип этих полей на "Строка", а в файле classes/modules/banners/class.php заменить строки
+
Вызов макроса %banners fastInsert()% поместим в блочный элемент с id = "flash_banner":
 +
<source lang="html4strict">
 +
<div class="flash_banner">
 +
    %banners fastInsert('идентификатор_рекламного_места')%
 +
</div>
 +
</source>
  
−
(285-286):
+
После этих строк добавим JavaScript код отправки ajax запроса и обработки полученных данных:
−
 
+
<source lang="javascript">
−
  $iWidth = (int) $oBanner->getValue('width');
+
<script type="text/javascript">
−
  $iHeight = (int) $oBanner->getValue('height');
+
$('document').ready(function(){
−
 
+
$('.flash_banner > object').ready(function(){
−
 
+
var $bannerObject = $('.flash_banner > object');
−
на
+
if ( !$bannerObject  )
−
 
+
return false;
−
  $iWidth = (string) $oBanner->getValue('width');
+
var bannerId = $bannerObject.attr('id');
−
  $iHeight = (string) $oBanner->getValue('height');
+
var urlToGetData = "/udata://custom/getBannerWidthAndHeight/"+ bannerId +"/.json";
−
 
+
$.ajax({
−
+
type: "POST",
−
 
+
url: urlToGetData,
−
ВНИМАНИЕ! после обновления системы эти изменения пропадут и их нужно будет вносить заново!
+
dataType: 'json'
−
 
+
  })
−
Для редактирования типа данных пройдите в модуль "Шаблоны-данных" -> "Баннер" -> редактирование "Баннер с флешкой". Поскольку все поля закрыты для редактирования, применим "хак": в адресной строке (при использовании скина "Основной") допишите ?skip-lock=1 и нажмите "ввод". После этого поля станут доступны для редактирования. Измените тип полей "Ширина" и "Высота" на "Строка"
+
.done(function( result ) {
−
 
+
var widthProcent = result.width_procent;
−
Внимание, если у других флеш-баннеров у вас заданы размеры, то после смены типа данных они "слетят".
+
var heightProcent = result.height_procent;
−
 
+
var bannerObjectEmbed = $('.flash_banner > object > embed');
−
Будьте предельно внимательны и осторожны при редактировании закрытых полей, поскольку неверные действия могут повлечь за собой неработоспособность сайта
+
if ( !!widthProcent && !!heightProcent )
−
 
+
{
−
Данное решение позволяет указывать размеры баннеров в процентах (например, 100%). Конвертирование символа "%" в &#0З7; никак не влияет на результат
+
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»