FAO Twiebie - Slimbox + Imagescaling plugin (siena)

Kort

#34967 2012-07-16 06:48

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:

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:

JavaScript

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

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

XML/XHTML

        
              <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:

PHP

        
              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):

JavaScript

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

2.5. Use selectors (mavatar example):

XML/XHTML

        
              <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

SED.by - создание сайтов, разработка плагинов и тем для Котонти

This post was edited by Kort (2012-07-16 09:09, 12 years ago)