Cotonti / Open Source PHP Content Management FrameworkContent Management Framework

Search Tags

Several comma-separated tags will be considered as logical AND between them. You can also use semicolon for logical OR. AND has a priority over OR and you cannot use parentheses for logical grouping. Asterisk (*) within a tag will be regarded as a mask for "any string".

Found in pages

  • Adding inline pictures with popups using BBCodes / Pageavatar / Fancybox

    Sections: Documentation / Quick help & how-to's


    Using HTML parser with elRTE / elFinder is cool. BBCodes, however, remain simple yet powerful tool that can be used not only to maintain full control over the text markup. It enables an easy way to embed pictures into the page main text (PAGE_TEXT). This is how you do it:

    1. Install Fancybox (see how)
    2. Install Pagemavatar
    3. Configure picture upload: 
      somecat|datas/photos|s_-200-200-crop|0||
    4. Go for BBCodes list and add a new one name inline: 
      \[inline=(\d+),(\d+),(.+?),(.+?)\]
<a href="datas/photos/page_$1_$2.jpg" class="fancybox" title="$3"><img src="datas/photos/s_page_$1_$2.jpg" alt="$3" class="inline col$4" /></a>
    5. Add / check styles for .colleft / .colright / .inline classes
    6. In the page text insert pictures using following tags: 
      [inline=23,1,This is alt text for the picture and title for the link,right]

      Parameters: page ID (you can use pictures uploaded for other pages too), picture number, alt text, float direction (left or right)

  • Fancybox Integration without plugin

    Sections: Documentation / Quick help & how-to's


    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/

     

     

    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

     

  • FancyBox

    Sections: Extensions / Files & Media


    This plugin will enable FancyBox on your site and will turn images on your site into galleries.

    Fancybox screenshot

    FancyBox is an alternative to Lightbox in jQuery. It enables fancy image viewing without leaving the current page, with some nice FX.