Как подружить Битрикс и jQuery?

Большая часть веб-разработчиков знает о замечательном javascript фреймворке  jquery. А те, кто знает о нем — знает и об огромном количестве симпатичных плагинов, которые можно подключить и получить замечательные фотогалереи, различные слайдеры, меню и многое другое. В этой статье я расскажу как подключить всю эту бездну красивых фишек к Битрикс. Как и всегда — все достаточно элементарно.1. Подключите в шаблоне сайта jquery например так:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

2. Подключите в шаблоне сайта нужный вам плагин jquery.

Для этого откройте страницу нужного плагина и прочитайте инструкцию по установке. Например, мы будем подключать thickbox — вот его страничка http://jquery.com/demo/thickbox/ .

Тут нужно скачать файлы thickbox-compressed.js, ThickBox.css и loadingAnimation.gif .  Разместить их желательно в шаблоне сайта в папках js,  css и images. Всегда желательно по максимуму все структуризировать чтобы не запутаться в ваших файлах. Т.к. в составе плагина есть графический файл, то это значит, что либо в css, либо в js-файле прописаны пути к нему и естественно их нужно поменять на ваши. В данном случае в thickbox-compressed.js нужно изменить строку
var tb_pathToImage = «images/loadingAnimation.gif»; на var tb_pathToImage = «../images/loadingAnimation.gif»; .

Теперь добавляем в шаблон строки:

<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/thickbox.js"></script> <link rel="stylesheet" href="<?=SITE_TEMPLATE_PATH?>/css/thickbox.css" type="text/css" media="screen" />

3. Изменяем шаблон нужного компонента, дабы добавить требуемую функциональность. В качестве примера покажу как сделать так, чтобы при клике по картинке в детальном просмотре товара возникала его увеличенная версия.

Для начала нужно поставить компонент bitrix:catalog.detail на нужную страницу.  Затем копируем шаблон с помощью стандартного функционала (он ведь вам известен, не правда ли?) и открываем на редактирование шаблон компонента.

Находим строки:

<?if(is_array($arResult["PREVIEW_PICTURE"]) && is_array($arResult["DETAIL_PICTURE"])):?>
<img border="0" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arResult["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arResult["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" id="image_<?=$arResult["PREVIEW_PICTURE"]["ID"]?>" style="display:block;cursor:pointer;cursor: hand;" OnClick="document.getElementById('image_<?=$arResult["PREVIEW_PICTURE"]["ID"]?>').style.display='none';document.getElementById('image_<?=$arResult["DETAIL_PICTURE"]["ID"]?>').style.display='block'" />
<img border="0" src="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" width="<?=$arResult["DETAIL_PICTURE"]["WIDTH"]?>" height="<?=$arResult["DETAIL_PICTURE"]["HEIGHT"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" id="image_<?=$arResult["DETAIL_PICTURE"]["ID"]?>" style="display:none;cursor:pointer; cursor: hand;" OnClick="document.getElementById('image_<?=$arResult["DETAIL_PICTURE"]["ID"]?>').style.display='none';document.getElementById('image_<?=$arResult["PREVIEW_PICTURE"]["ID"]?>').style.display='block'" />
<?elseif(is_array($arResult["DETAIL_PICTURE"])):?>
<img border="0" src="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" width="<?=$arResult["DETAIL_PICTURE"]["WIDTH"]?>" height="<?=$arResult["DETAIL_PICTURE"]["HEIGHT"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" />
<?elseif(is_array($arResult["PREVIEW_PICTURE"])):?>
<img border="0" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arResult["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arResult["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" />
<?endif?>

Они так сказать на все случаи жизни — у нас же будет один случай: большая и маленькая картинка товара загружены и на странице детального просмотра товара мы хотим видеть маленькую картинку и по клику по ней увидеть большую.

Заменяем эти строки на:

<a href="<?=$arResult["DETAIL_PICTURE"]["SRC"]?>" class="thickbox"><img border="0" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arResult["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arResult["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /></a>