TextPattern Plugins

ful_ajax_gallery

Description

This plugin helps to create a dynamic archive browsing using ajax, it uses ajax to query the textpattern db and to retrieve post information such title, text and whatever.
The plugin is strongly ispired on the cbs_live_search but it doesn’t use hardcoded query. So you can choose how to display your results simply creating a new layout form.

Release

v0.7

Download

Demo

http://php.fullo.net/textpattern/ click on “next” to start the demo

Reference

  • add in the <head> section of the page template the

    <txp:ful_ajax_gallery_js />
    it will add the necessaries javascript function to call ajax with prototype and scriptacoulus
  • the <txp:ful_ajax_gallery /> tag is the main tag of the plugin.

    This tag uses those attributes:

    • section: the section where to search data, note that is the same of custom_article
    • category: the category where to search data, note that is the same of custom_article
    • form: the form layout for the results
    • limit: how many articles are retrieved, note that is the same of custom_article
    • offset: the offset from which the data is retrieved, note that is the same of custom_article
    • label: show the menubar label
    • menu (true/false): show the menubar
    • sortby (posted): how to sort the results, note that is the same of custom_article
    • spinner (true/false): add the spinner div directly
    • top (true/false): add the top div directly
    • label_menu_next: the label for the ‘next’ link
    • label_menu_prev: the label for the ‘prev’ link
  • if you want to add the menu bar in another position you can use the tag <txp:ful_ajax_menu>
    it uses a limited sets of the attributes of <txp:ful_ajax_gallery />

    • section: the section where to search data, note that is the same of custom_article
    • category: the category where to search data, note that is the same of custom_article
    • form: the form layout for the results
    • limit: how many articles are retrieved, note that is the same of custom_article
    • offset: the offset from which the data is retrieved, note that is the same of custom_article
    • label (next/prev): used to create the link to previous o next articles

    and it need also a nested text as the label

  • if you want to add the ajax container for the article in another position you have to set the attribute top=false for
    <txp:ful_ajax_gallery /> and then you can use <txp:ful_ajax_top />.
    This tag accept 2 attributes and can manage text.

    • tag (div): the type of tag for the ajax container
    • class: the css class for the tag
      • as before if you want to add the ajax spinner in another position you have to set the attribute spinner=false for
        <txp:ful_ajax_gallery /> and then you can use <txp:ful_ajax_spinner />.
        This tag accept 2 attributes and can manage text.

        • tag (div): the type of tag for the ajax container
        • class: the css class for the tag
          • you can configure the default value for all the plugin changing the ful_ajax_config() array.

css style

Every object created by the plugin has its own css ID:

  • menu and menu links: ajax-menu, ajax-menu-next, ajax-menu-prev
  • title browsing (bottom interface): ful-ajax-bottom
  • article content: ful-ajax-top
  • spinner: ful-ajax-spinner

usage example

create a layout page, cloning the default template. Add then in the html head section the calling for the js libraries.
note that I\’ve installed prototype and scriptaculous in the /js directory

<script type="text/javascript" src="<txp:site_url/>js/prototype.js" ></script>
<script type="text/javascript" src="<txp:site_url/>js/scriptaculous.js" ></script>
<txp:full_ajax_gallery_js />

then in the body of the page I add the tag to create the ajax gallery

<h1>ajax article gallery</h1>
<txp:ful_ajax_gallery limit="5" category="mycat" form="myform" />

now an archive gallery for the category mycat is created by textpattern, and I have also a 5 title pagination.
The archive uses a generic article form myform

<div class="articolo">
<txp:ful_ajax_show_link form="myTopForm">##<txp:article_id />##<txp:title />&</txp:ful_ajax_show_link />
</div>

it is very important that the value inserted in the ful_ajax_show_link tag start with ##ID-OF-THE-POST## This is due a
textpattern limitation which cannot permit to use a txp:tag inside another txp:tag as attribute. After that pattern you can add anything.
Here I use a article form called myTopForm.

<h2><txp:permlink><txp:title /></txp:permlink></h2>
<txp:body />

if you want to add the spinner or the top container in another place you can change the page layout as follow:

<txp:ful_ajax_spinner><img src="path.to/spinner.img" alt="my ajax spinner" /></txp:ful_ajax_spinner>
		
<txp:ful_ajax_menu label="prev" limit="5" category="mycat" form="myform" menu="false" />
<txp:ful_ajax_menu label="next" limit="5" category="mycat" form="myform" menu="false" />
		
// some html code here
	
<h1> ajax article gallery </h1>
<txp:ful_ajax_gallery limit="5" category="mycat" form="myform" spinner="false" top="false" menu="false"/>
		
// some html code here
<txp:ful_ajax_top class="myCSS" tag="p">SOME TEXT HERE</txp:ful_ajax_top>

note that is very important to add the same attributes to the ful_ajax_menu and ful_ajax_gallery tags.

note: This plugin need the scriptacoulus and prototype js libraries loaded in the head of your site template