Cotonti / Open Source PHP Content Management FrameworkContent Management Framework

Fancybox Integration without plugin

Документация / Инструкции и типовые решения / Fancybox Integration without plugin

How to integrate Fancybox or lightbox-clone in Cotonti without a plugin

Эта страница еще не переведена на русский. Отображен оригинал страницы на английском языке. Вы можете зарегистрироваться и помочь с переводом.

#1. Fancybox integration

1.1. Download at https://github.com/fancyapps/fancyBox

1.2. Copy contents of the source folder into themes/nemesis/js/fancybox/

1.3. Include the plugin in nemesis.rc.php:

cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/fancybox/jquery.fancybox.css');
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/fancybox/jquery.fancybox.pack.js');

1.4. Initialize the plugin in themes/nemesis/js/js.js:

$(".fancybox").fancybox();

1.5. Add .fancybox class to any element you need like:

<a href="#" title="Lorem Ipsum" class="fancybox"><img src="#" alt="" /></a>

1.6. Find options for the init string here: http://fancyapps.com/fancybox/

 

 

#2. PrettyPhoto integration

2.1. Download at http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

2.2. Unzip the package into themes/nemesis/js/prettyphoto/

2.3. Include:

cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/prettyphoto/css/prettyPhoto.css');
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/prettyphoto/js/jquery.prettyPhoto.js');

2.4. Init (example):

$("a[rel^='prettyPhoto']").prettyPhoto({
	show_title: true,
	social_tools: 0
});

2.5. Use selectors (mavatar example):

<ul id="listGal">
<!-- BEGIN: PAGEMAVATAR_ROW -->
	<li<!-- IF {PAGE_SLIDER_MAVATARNUM} % 4 == 0 --> class="endItem"<!-- ENDIF -->><a href="{PAGE_SLIDER_MAVATAR}" rel="prettyPhoto[pp_gal]" title="{PAGE_SLIDER_MAVATARDESC}"><img src="datas/galleries/thumb_{PAGE_SLIDER_MAVATARFILE}" alt="" /></a></li>
<!-- END: PAGEMAVATAR_ROW -->
</ul>

2.6. Spice up with the options: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/

 

Advantages of the non-plugin approach

  • no need for a plugin and no need for a plugin maker
  • use any selector and any options for any selector
  • modal windows, galleries etc.
  • easy upgrade (just copy / overwrite source files)
  • use CSS/JS consolidation capability

 


1. Dayver  21.07.2012 10:15

Thanks: 0

Есть один минус - такие скрипты будут подгружаться на всех страницах (даже там где они не нужны) так что такие решения нужно предлагать сразу с решением такой проблемы - писать подключение в php файле ресурсов вместе с условием (Например данные скрипты нужны только в галереи сайта, которая в свою очередь работает, возможно, на основе модуля page ну и допустим еще на главной - потому нужно условие "подключаем если это главная и модуль page иначе не подключаем").

2. Kort  21.07.2012 13:36

Thanks: 0

А что -- плагин это решает? А если у меня по всему контенту в BBCodes используются popups и исключений гораздо меньше, чем необходимых локаций? Глобальная подгрузка упакованного jQuery-плагина в большей степени безвредна, чем ресурсоемки "умные" решения. Грузи if'ом из шаблона если есть сомнения. Или напиши и поддерживай "умный" плагин.

Всего: 2, на странице: 2

Добавление комментариев доступно только зарегистрированным пользователям