Размеры для flash-баннера в процентах — различия между версиями
Stexe (обсуждение | вклад) |
Stexe (обсуждение | вклад) |
||
| Строка 23: | Строка 23: | ||
} | } | ||
return array('width_procent' => $banner_width_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> | </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>