Forums / Cotonti / Support / FAO Twiebie - Slimbox + Imagescaling plugin (siena)

Why would you guys need to:

1. Use outdated script?
2. Use plugin and limit yourselves with just one class rather than including the script via theme resource file?

Any lightbox clone (like Fancybox, PrettyPhoto etc.) can be used via theme rc.php and configured via js.js. It's a routine thing giving you any class or rel, galleries, modal windows, flash, youtube videos & more, taking 10 minutes of work and definitely not worth the time you spend of the useless plugin.

Frankly, back in 2011 I was also convinced that a Fancybox plugin for Cotonti Genoa was a good idea. I made it wasting a lot of time to transfer the Fancybox options into the plugin config and coding all IF / ELSE statements. This quickly brought me to an understanding that a much easier way is to naturally integrate it via the skin and use options from within the init strings (see below for advantages). Except these, any project might require a different lightbox-clone, so making (and supporting, which is different from making!) each plugin is just nonsense and a huge waste of time. So for you, guys, two small tuts:

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