featurebox front-end - dynamic (AJAX) loading added, the rest is only theme styling; working examples in jayya and _blank (better one)

2025-09-02 02:42:40 +02:00 · 2009-12-10 22:46:46 +00:00
parent 52d9d13d3f
commit abc0d5a7c6
20 changed files with 597 additions and 194 deletions
--- a/e107_plugins/featurebox/admin_config.php
+++ b/e107_plugins/featurebox/admin_config.php
@@ -9,8 +9,8 @@
 * Featurebox administration
 *
 * $Source: /cvs_backup/e107_0.8/e107_plugins/featurebox/admin_config.php,v $
-* $Revision: 1.12 $
-* $Date: 2009-12-09 18:33:40 $
+* $Revision: 1.13 $
+* $Date: 2009-12-10 22:46:45 $
 * $Author: secretr $
 *
 */
@@ -160,14 +160,14 @@ class fb_main_ui extends e_admin_ui
 		'fb_id'				=> array('title'=> LAN_ID,				'type' => 'number',			'data'=> 'int', 'width' =>'5%', 'forced'=> TRUE),
     	'fb_category' 		=> array('title'=> LAN_CATEGORY,		'type' => 'dropdown',		'data'=> 'int',	'width' => '5%',  'filter'=>TRUE, 'batch'=>TRUE),
 		'fb_title' 			=> array('title'=> LAN_TITLE,			'type' => 'text',			'width' => 'auto', 'thclass' => 'left'), 
-     	'fb_text' 			=> array('title'=> "Message Text",		'type' => 'bbarea',			'width' => '30%', 'readParms' => 'expand=...&truncate=50&bb=1'), // Display name
+     	'fb_text' 			=> array('title'=> "Message Text",		'type' => 'bbarea',			'width' => '30%', 'readParms' => 'expand=...&truncate=50&bb=1'), 
 		//DEPRECATED 'fb_mode' 			=> array('title'=> FBLAN_12,			'type' => 'dropdown',		'data'=> 'int',	'width' => '5%', 'filter'=>TRUE, 'batch'=>TRUE),		
 		//DEPRECATED 'fb_rendertype' 	=> array('title'=> FBLAN_22,			'type' => 'dropdown',		'data'=> 'int',	'width' => 'auto', 'noedit' => TRUE),	
-        'fb_template' 		=> array('title'=> FBLAN_25,			'type' => 'layouts',		'data'=> 'str', 'width' => 'auto', 'thclass' => 'center', 'class'=>'center', 'writeParms' => 'plugin=featurebox', 'filter' => true, 'batch' => true),	 	// Photo
-		'fb_image' 			=> array('title'=> "Image",				'type' => 'image',			'width' => 'auto', 'thclass' => 'left first'),
-		'fb_imageurl' 		=> array('title'=> "Image Link",		'type' => 'url',			'width' => 'auto', 'thclass' => 'left first'),
+        'fb_template' 		=> array('title'=> FBLAN_25,			'type' => 'layouts',		'data'=> 'str', 'width' => 'auto', 'writeParms' => 'plugin=featurebox', 'filter' => true, 'batch' => true),	 	// Photo
+		'fb_image' 			=> array('title'=> "Image",				'type' => 'image',			'width' => 'auto'),
+		'fb_imageurl' 		=> array('title'=> "Image Link",		'type' => 'url',			'width' => 'auto'),
 		'fb_class' 			=> array('title'=> LAN_VISIBILITY,		'type' => 'userclass',		'data' => 'int', 'width' => 'auto'),	// User id
-		'fb_order' 			=> array('title'=> LAN_ORDER,			'type' => 'number',			'data'=> 'int','width' => '5%', 'thclass' => 'center' ),
+		'fb_order' 			=> array('title'=> LAN_ORDER,			'type' => 'number',			'data'=> 'int','width' => '5%' ),
 		'options' 			=> array('title'=> LAN_OPTIONS,			'type' => null,				'forced'=>TRUE, 'width' => '10%', 'thclass' => 'center last', 'class' => 'center')
 	);
 	 
--- a/e107_plugins/featurebox/e_shortcode.php
+++ b/e107_plugins/featurebox/e_shortcode.php
@@ -1,7 +1,7 @@
 <?php
 /*
 * Copyright (c) e107 Inc 2009 - e107.org, Licensed under GNU GPL (http://www.gnu.org/licenses/gpl.txt)
-* $Id: e_shortcode.php,v 1.3 2009-12-09 18:33:37 secretr Exp $
+* $Id: e_shortcode.php,v 1.4 2009-12-10 22:46:45 secretr Exp $
 *
 * Featurebox shortcode batch class - shortcodes available site-wide. ie. equivalent to multiple .sc files.
 */
@@ -12,6 +12,8 @@ e107::includeLan(e_PLUGIN.'featurebox/languages/'.e_LANGUAGE.'_front_featurebox.

 class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_FOLDER]_shortcodes
 {	
+	protected $_categories = array();
+	
 	/**
 	 * Available parameters (GET string format)
 	 * - cols (integer): number of items per column, default 1
@@ -41,8 +43,7 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 		
 		parse_str($parm, $parm);
 		
-		$category = new plugin_featurebox_category();
-		$category->loadByTemplate($ctemplate);
+		$category = $this->getCategoryModel($ctemplate);
 		if(!$category->hasData())
 		{
 			return '';
@@ -63,6 +64,10 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 		$counter = 1;
 		$col_counter = 1;
 		$total = count($tree->getTree());
+		$category->setParam('total', $total)
+			->setParam('cols', $cols)
+			->setParam('no_fill_empty', isset($parm['no_fill_empty']) ? 1 : 0);
+			
 		foreach ($tree->getTree() as $id => $node) 
 		{
 			$tmpl_item = e107::getTemplate('featurebox', 'featurebox', $node->get('fb_template'));
@@ -94,19 +99,19 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 				// else add item separator
 				else 
 				{
-					$tmpl_item .= $ret['item_separator'];
+					$tmpl_item .= $tmpl['item_separator'];
 				}
 			}
 			// no more items - clean & close
 			else
 			{
 				$empty_cnt = $cols - $col_counter;
-				if($empty_cnt > 0 && !isset($parm['no_fill_empty']))
+				if($empty_cnt > 0 && !$category->getParam('no_fill_empty'))
 				{
 					// empty items fill
 					for ($index = 1; $index <= $empty_cnt; $index++) 
 					{
-						$tmpl_item .= $ret['item_separator'].varset($ret['item_empty'], '<div><!-- --></div>');
+						$tmpl_item .= $tmpl['item_separator'].varset($tmpl['item_empty'], '<div><!-- --></div>');
 					}
 				}
 				// add column end
@@ -114,6 +119,10 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 			}
 			
 			$ret[$counter] = $node->setParam('counter', $counter)
+				->setParam('cols', $cols)
+				->setParam('col_counter', $col_counter)
+				->setParam('limit', $category->get('fb_category_limit'))
+				->setParam('total', $total)
 				->setCategory($category)
 				->toHTML($tmpl_item);
 				
@@ -134,10 +143,8 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 	/**
 	 * Render featurebox navigation
 	 * Available parameters (GET string format)
-	 * - cols (integer): number of items per column, default 1
-	 * - no_fill_empty (boolean): don't fill last column with empty items (if required), default 0
-	 * - tablestyle (string): mode to be used with <code>tablerender()</code>, default 'featurebox'
-	 * - notablestyle (null): if isset - disable <code>tablerender()</code>
+	 * - loop (boolean): loop using 'nav_loop' template, default 0
+	 * - base (string): template key prefix, default is 'nav'. Example: 'mynav' base key will search templates 'mynav_start', 'mynav_loop', 'mynav_end'.
 	 * 
 	 * @param string $parm parameters
 	 * @param string $mod category template
@@ -158,16 +165,13 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 		{
 			$ctemplate = $mod;
 		}
-		
 		parse_str($parm, $parm);
 		
-		$category = new plugin_featurebox_category();
-		$category->loadByTemplate($ctemplate);
+		$category = $this->getCategoryModel($ctemplate);
 		if(!$category->hasData())
 		{
 			return '';
 		}
-		
 		$tree = $category->getItemTree();
 		if($tree->isEmpty())
 		{
@@ -175,6 +179,162 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 		}
 		
 		$tmpl = $this->getFboxTemplate($category);
+		if($category->get('fb_category_random'))
+		{
+			$parm['loop'] = 0;
+		}
+		
+		$base = vartrue($parm['base'], 'nav').'_';
+		$ret = $category->toHTML(varset($tmpl[$base.'start']), true); 
+		if(isset($parm['loop']) && $tree->getTotal() > 0 && vartrue($tmpl[$base.'item']))
+		{
+			$total = ceil($tree->getTotal() / $category->sc_featurebox_category_limit());
+			$model = clone $category;
+			$tmp = array();
+			for ($index = 1; $index <= $total; $index++) 
+			{
+				$tmp[] = $model->setParam('counter', $index)
+					->setParam('active', $index == varset($parm['from'], 1))
+					->toHTML($tmpl[$base.'item'], true);
+			}
+			$ret .= implode(varset($tmpl[$base.'separator']), $tmp);
+			unset($model, $tmp);
+		}
+		$ret .= $category->toHTML(varset($tmpl[$base.'end']), true);
+		
+		if(vartrue($tmpl['js']))
+		{
+			e107::getJs()->footerFile(explode(',', $tmpl['js']));
+		}
+		
+		if(vartrue($tmpl['js_inline']))
+		{
+			e107::getJs()->footerInline($tmpl['js_inline'], 3);
+		}
+		
+		return $ret;
+	}
+	
+	/**
+	 * Render featurebox navigation
+	 * Available parameters (GET string format)
+	 * - cols (integer): number of items per column, default 1
+	 * - no_fill_empty (boolean): don't fill last column with empty items (if required), default 0
+	 * - from (integer): start load at
+	 * - limit (integer): load to
+	 * 
+	 * @param string $parm parameters
+	 * @param string $mod category template
+	 */
+	function sc_featurebox_items($parm, $mod = '')
+	{
+		// TODO cache
+		if(!e107::isInstalled('featurebox')) //just in case
+		{
+			return '';
+		}
+		
+		if(!$mod)
+		{
+			$ctemplate = 'default';
+		}
+		else
+		{
+			$ctemplate = $mod;
+		}
+		
+		parse_str($parm, $parm);
+		
+		$category = clone $this->getCategoryModel($ctemplate);
+
+		if(!$category->hasData())
+		{
+			return '';
+		}
+		
+		$cols = intval(vartrue($parm['cols'], 1));
+		$limit = intval(varset($parm['limit'], $category->sc_featurebox_category_limit()));
+		$from = (intval(vartrue($parm['from'], 1)) - 1) * $cols;
+		
+		$category->setParam('cols', $cols)
+			->setParam('no_fill_empty', isset($parm['no_fill_empty']) ? 1 : 0)
+			->setParam('limit', $limit)
+			->setParam('from', $from);
+			
+		$tree = $category->getItemTree(true);
+		if($tree->isEmpty())
+		{
+			return '';
+		}
+		
+		$total = count($tree->getTree());
+		$category->setParam('total', $total);
+		$counter = 1;
+		$col_counter = 1;
+		$ret = '';
+		foreach ($tree->getTree() as $id => $node) 
+		{
+			$tmpl_item = e107::getTemplate('featurebox', 'featurebox', $node->get('fb_template'));
+			if(!$tmpl_item) 
+			{
+				$tmpl_item = e107::getTemplate('featurebox', 'featurebox', 'default');
+			}
+			
+			// reset column counter
+			if($col_counter > $cols)
+			{
+				$col_counter = 1;
+			}
+
+			// add column start
+			if(1 == $col_counter && vartrue($tmpl['col_start']))
+			{
+				$tmpl_item = $tmpl['col_start'].$tmpl_item;
+			}
+			
+			// there is more
+			if(($total - $counter) > 0)
+			{
+				// add column end if column end reached
+				if($cols == $col_counter && vartrue($tmpl['col_end']))
+				{
+					$tmpl_item .= $tmpl['col_end'];
+				}
+				// else add item separator
+				else 
+				{
+					$tmpl_item .= $tmpl['item_separator'];
+				}
+			}
+			// no more items - clean & close
+			else
+			{
+				$empty_cnt = $cols - $col_counter;
+				if($empty_cnt > 0 && !$category->getParam('no_fill_empty'))
+				{
+					// empty items fill
+					for ($index = 1; $index <= $empty_cnt; $index++) 
+					{
+						$tmpl_item .= $tmpl['item_separator'].varset($tmpl['item_empty'], '<div><!-- --></div>');
+					}
+				}
+				// add column end
+				$tmpl_item .= varset($tmpl['col_end']);
+			}
+			
+			$ret .= $node->setParam('counter', $counter)
+				->setParam('cols', $cols)
+				->setParam('col_counter', $col_counter)
+				->setParam('limit', $category->get('fb_category_limit'))
+				->setParam('total', $total)
+				->setCategory($category)
+				->toHTML($tmpl_item);
+				
+			
+			$counter++;
+			$col_counter++;
+		}
+		return $ret;
 	}
 	
 	/**
@@ -200,4 +360,19 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 		}
 		return $tmpl;
 	}
+	
+	/**
+	 * Get category model by template
+	 * @param string $template
+	 * @return plugin_featurebox_category
+	 */
+	public function getCategoryModel($template, $force = false)
+	{
+		if(!isset($this->_categories[$template]))
+		{
+			$this->_categories[$template] = new plugin_featurebox_category();
+			$this->_categories[$template]->loadByTemplate($template, $force);
+		}
+		return $this->_categories[$template];
+	}
 }
--- a/e107_plugins/featurebox/featurebox.js
+++ b/e107_plugins/featurebox/featurebox.js
@@ -0,0 +1,128 @@
+/*
+ * e107 website system
+ *
+ * Copyright (C) 2008-2009 e107 Inc (e107.org)
+ * Released under the terms and conditions of the
+ * GNU General Public License (http://www.gnu.org/licenses/gpl.txt)
+ *
+ * Featurebox Javascript Class
+ *
+ * $Source: /cvs_backup/e107_0.8/e107_plugins/featurebox/featurebox.js,v $
+ * $Revision: 1.1 $
+ * $Date: 2009-12-10 22:46:45 $
+ * $Author: secretr $
+ *
+*/
+
+// Temporary solution, will be moved to e107Widgets
+var Featurebox = Class.create({
+	
+	initialize: function(container, options) {
+		this._container = $(container);
+		if(!this._container) return;
+		
+		this.options = Object.extend({
+			'ajax_container': null,
+			'ajax_navbar': null,
+			'ajax_nav_selector': 'a.featurebox-nav-link',
+			'ajax_loader': null,
+			'ajax_hide_onload': false,
+			'continuous': false,
+			'ajax_url': '#{e_FILE}'.parsePath() + 'e_ajax.php'  
+		}, options || {});
+		
+		this._ajax_container = this.options.ajax_container && $(this.options.ajax_container) ? $(this.options.ajax_container) : this._container.down('.body');
+		this._ajax_navbar = this.options.ajax_navbar && $(this.options.ajax_navbar) ? $(this.options.ajax_navbar) : this._container.down('.featurebox-nav');
+		this._ajax_loader = this.options.ajax_loader && $(this.options.ajax_loader) ? $(this.options.ajax_loader) : this._container.down('.featurebox-loader');
+		this._current = $A();
+		
+		if(!this._ajax_container || !this._ajax_navbar) return;
+		this._ajax_nav = this._ajax_navbar.select(this.options.ajax_nav_selector);
+		
+		this.clickObserverHandler = this.clickObserver.bindAsEventListener(this);
+		this.nextObserverHandler = this.nextObserver.bindAsEventListener(this);
+		this.prevObserverHandler = this.prevObserver.bindAsEventListener(this);
+		
+		this.startObserve();
+	},
+	
+	clickObserver: function(event) {
+		var element = event.element('a');
+		event.stop();
+		this.run(element);
+	},
+	
+	nextObserver: function(event) {
+		event.stop();
+		var current = this._current[1] ? parseInt(this._current[1]) : 1, 
+			next = current >= this._ajax_nav.length ? 0 : current;
+		if(!this.options.continuous && next == 0) return;
+		this.run(this._ajax_nav[next]);
+	},
+	
+	prevObserver: function(event) {
+		event.stop();
+		var current = this._current[1] ? parseInt(this._current[1]) : 1, 
+			prev = (current - 2) < 0 ? this._ajax_nav.length - 1 : current - 2;
+		if(!this.options.continuous && prev == this._ajax_nav.length - 1) return;
+		this.run(this._ajax_nav[prev]);
+	},
+	
+	run: function(element) {
+		var options = element.href.split('#',2)[1].split('.'), that;
+		this._current = options;
+		
+		if(element.hasClassName('active')) return;
+		
+		this._ajax_navbar.select('.active').invoke('removeClassName', 'active');
+		element.addClassName('active');
+		if(element.up('li')) {
+			element.up('li').addClassName('active'); // only li support at this time
+		}
+		
+		this.showLoader();
+		that = this;
+		new e107Ajax.Request(this.options.ajax_url, {
+			parameters: { 
+				'ajax_sc': 'featurebox_items|' + varset(options[0], '') + '=from=' + varset(options[1], 0) + '&cols=' + varset(options[2], 0) + '&no_fill_empty=' + varset(options[3], 0)
+			},
+			method: 'post',
+			onComplete: function(transport) {
+				that.hideLoader(transport.responseText);
+			}
+		});
+	},
+	
+	startObserve: function() {
+		this._ajax_navbar.select('a.featurebox-nav-link').invoke('observe', 'click', this.clickObserverHandler);
+		this._ajax_navbar.select('a.featurebox-nav-next').invoke('observe', 'click', this.nextObserverHandler);
+		this._ajax_navbar.select('a.featurebox-nav-prev').invoke('observe', 'click', this.prevObserverHandler);
+	},
+	
+	stopObserve: function() {
+		this._ajax_navbar.select('a.featurebox-nav-link').invoke('stopObserving', 'click', this.clickObserverHandler);
+		this._ajax_navbar.select('a.featurebox-nav-next').invoke('stopObserving', 'click', this.nextObserverHandler);
+		this._ajax_navbar.select('a.featurebox-nav-prev').invoke('stopObserving', 'click', this.prevObserverHandler);
+	},
+	
+	showLoader: function() {
+		if(this._ajax_loader) {
+			if(this.options.ajax_hide_onload) {
+				this._ajax_container.hide();
+			}
+			this._ajax_loader.show();
+		}
+		this.stopObserve();
+	},
+	
+	hideLoader: function(text) {
+		if(this._ajax_loader) {
+			this._ajax_loader.hide();
+			if(this.options.ajax_hide_onload) {
+				this._ajax_container.show();
+			}
+		}
+		this._ajax_container.update(text);
+		this.startObserve();
+	}
+});
--- a/e107_plugins/featurebox/includes/category.php
+++ b/e107_plugins/featurebox/includes/category.php
@@ -9,8 +9,8 @@
 * Featurebox Category model
 *
 * $Source: /cvs_backup/e107_0.8/e107_plugins/featurebox/includes/category.php,v $
-* $Revision: 1.3 $
-* $Date: 2009-12-09 18:36:32 $
+* $Revision: 1.4 $
+* $Date: 2009-12-10 22:46:45 $
 * $Author: secretr $
 *
 */
@@ -78,8 +78,44 @@ class plugin_featurebox_category extends e_model
 	
 	public function sc_featurebox_category_template()
 	{
-		return $this->get('');
+		return $this->get('fb_category_template');
 	}
+	
+	public function sc_featurebox_category_limit()
+	{
+		return $this->get('fb_category_limit');
+	}
+	
+	public function sc_featurebox_category_total()
+	{
+		return $this->getParam('total', 0);
+	}
+
+	public function sc_featurebox_category_all()
+	{
+		return $this->getItemTree()->getTotal();
+	}
+	
+	public function sc_featurebox_category_cols()
+	{
+		return $this->getParam('cols', 1);
+	}
+
+	public function sc_featurebox_nav_counter()
+	{
+		return $this->getParam('counter', 1);
+	}
+
+	public function sc_featurebox_nav_active()
+	{
+		return $this->getParam('active') ? ' active' : '';
+	}
+
+	public function sc_featurebox_category_emptyfill()
+	{
+		return $this->getParam('no_fill_empty', 0);
+	}
+	
 	/**
 	 * Load category data by layout
 	 * TODO - system cache
@@ -116,6 +152,7 @@ class plugin_featurebox_category extends e_model
 			$this->_tree = new plugin_featurebox_tree();
 			$options = array(
 				'limit' => $this->getParam('limit', $this->get('fb_category_limit')),
+				'from' => $this->getParam('from', 0),
 				'random' => $this->getParam('random', $this->get('fb_category_random'))
 			);
 			$this->_tree->load($this->getId(), $options, $force);
--- a/e107_plugins/featurebox/includes/item.php
+++ b/e107_plugins/featurebox/includes/item.php
@@ -9,8 +9,8 @@
 * Featurebox Item model
 *
 * $Source: /cvs_backup/e107_0.8/e107_plugins/featurebox/includes/item.php,v $
-* $Revision: 1.2 $
-* $Date: 2009-12-08 17:21:32 $
+* $Revision: 1.3 $
+* $Date: 2009-12-10 22:46:45 $
 * $Author: secretr $
 *
 */
@@ -103,6 +103,32 @@ class plugin_featurebox_item extends e_model
 		return $this->getParam('counter', 1);
 	}
 	
+	public function sc_featurebox_limit()
+	{
+		return $this->getParam('limit', 0);
+	}
+	
+	public function sc_featurebox_total()
+	{
+		return $this->getParam('total', 0);
+	}
+	
+	public function sc_featurebox_all()
+	{
+		return $this->getCategory()->sc_featurebox_category_all();
+	}
+	
+	public function sc_featurebox_cols()
+	{
+		return $this->getParam('cols', 1);
+	}
+	
+	
+	public function sc_featurebox_colcount()
+	{
+		return $this->getParam('col_counter', 1);
+	}
+	
 	/**
 	 * Set current category
 	 * @param plugin_featurebox_category $category
--- a/e107_plugins/featurebox/includes/tree.php
+++ b/e107_plugins/featurebox/includes/tree.php
@@ -9,8 +9,8 @@
 * Featurebox Category Tree model
 *
 * $Source: /cvs_backup/e107_0.8/e107_plugins/featurebox/includes/tree.php,v $
-* $Revision: 1.2 $
-* $Date: 2009-12-08 17:21:32 $
+* $Revision: 1.3 $
+* $Date: 2009-12-10 22:46:45 $
 * $Author: secretr $
 *
 */
@@ -42,7 +42,7 @@ class plugin_featurebox_tree extends e_tree_model
 		$this->updateParams($options);
 		
 		$order = $this->getParam('random') ? ' ORDER BY rand()' : ' ORDER BY fb_order ASC';
-		$limit = $this->getParam('limit') ? ' LIMIT 0,'.intval($this->getParam('limit')) : '';
+		$limit = $this->getParam('limit') ? ' LIMIT '.intval($this->getParam('from'), 0).','.intval($this->getParam('limit')) : '';
 		$qry = 'SELECT SQL_CALC_FOUND_ROWS * FROM #featurebox WHERE fb_category='.intval($category_id).' AND fb_class IN('.USERCLASS_LIST.')'.$order.$limit;
 		$this->setParam('db_query', $qry);
 		
--- a/e107_plugins/featurebox/templates/featurebox_category_template.php
+++ b/e107_plugins/featurebox/templates/featurebox_category_template.php
@@ -23,43 +23,62 @@ $FEATUREBOX_CATEGORY_TEMPLATE['default']['col_start'] = '';
 $FEATUREBOX_CATEGORY_TEMPLATE['default']['col_end'] = '';

 $FEATUREBOX_CATEGORY_TEMPLATE['default']['item_start'] = '';
-
 $FEATUREBOX_CATEGORY_TEMPLATE['default']['item_end'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['default']['item_separator'] = '<div class="clear"><!-- --></div>';

 // empty item  - used with col templates, no shortcodes just basic markup
 $FEATUREBOX_CATEGORY_TEMPLATE['default']['item_empty'] = '';

-$FEATUREBOX_CATEGORY_TEMPLATE['default']['item_separator'] = '<div class="clear"><!-- --></div>';
+// no dynamic load support
+$FEATUREBOX_CATEGORY_TEMPLATE['default']['nav_start'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['default']['nav_item'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['default']['nav_end'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['default']['nav_separator'] = '';

+// external JS, comma separated list
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['js'] = '';
+// inline JS, without <script> tags
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['js_inline'] = '';

 /*
 * Dynamic Template
 * Example call: {FEATUREBOX|dynamic}
 */
 $FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['list_start'] = '
-<div class="box featurebox">
-	<h2>{FEATUREBOX_CATEGORY_ICON}{FEATUREBOX_CATEGORY_TITLE}</h2>
+<div class="box featurebox" id="featurebox-container">
+	<h2 class="title">{FEATUREBOX_CATEGORY_ICON}{FEATUREBOX_CATEGORY_TITLE}</h2>
 	<div class="body">
 ';

 $FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['list_end'] = '
 	</div>
+	<div class="clear"><!-- --></div>
+	{FEATUREBOX_NAVIGATION|dynamic=loop}
+	<div class="clear"><!-- --></div>
 </div>
 ';

 // no column support
-$FEATUREBOX_CATEGORY_TEMPLATE['default']['col_start'] = '';
-$FEATUREBOX_CATEGORY_TEMPLATE['default']['col_end'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['col_start'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['col_end'] = '';

+// ajax navigation (unobtrusive)
 $FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['item_start'] = '';
-
 $FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['item_end'] = '';
-
-// empty item  - used with col templates, no shortcodes just basic markup
-$FEATUREBOX_CATEGORY_TEMPLATE['default']['item_empty'] = '';
-
 $FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['item_separator'] = '<div class="clear"><!-- --></div>';

+// empty item  - used with col templates, no shortcodes just basic markup
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['item_empty'] = '';
+
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['nav_start'] = '<div class="featurebox-nav show-if-js"> <a href="#" class="featurebox-nav-prev">prev</a> <a href="#" class="featurebox-nav-next">next</a> ';
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['nav_item'] = '<a href="#{FEATUREBOX_CATEGORY_TEMPLATE}.{FEATUREBOX_NAV_COUNTER}.{FEATUREBOX_CATEGORY_COLS}.{FEATUREBOX_CATEGORY_EMPTYFILL}" class="featurebox-nav-link{FEATUREBOX_NAV_ACTIVE}">{FEATUREBOX_NAV_COUNTER}</a>';
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['nav_end'] = '</div>';
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['nav_separator'] = '&nbsp;';
+
+// external JS, comma separated list
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['js'] = '{e_PLUGIN}featurebox/featurebox.js';
+// inline JS, without <script> tags
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['js_inline'] = 'new Featurebox(\'featurebox-container\')';
 /**
 * Template information. 
 * Allowed keys:
--- a/e107_plugins/featurebox/templates/featurebox_template.php
+++ b/e107_plugins/featurebox/templates/featurebox_template.php
@@ -8,19 +8,21 @@ $FEATUREBOX_TEMPLATE['default'] = '
 </div>
 ';

-$sc_style['FEATUREBOX_IMAGE|image_left']['pre'] = '<div class="f-left">';
-$sc_style['FEATUREBOX_IMAGE|image_left']['post'] = '</div>';
-$FEATUREBOX_TEMPLATE['image_right'] = '
-<div class="featurebox-item imgleft" id="featurebox-item-{FEATUREBOX_ID}">
-	<div class="featurebox-body">{FEATUREBOX_IMAGE|image_left}<h3>{FEATUREBOX_TITLE|image_left}</h3>{FEATUREBOX_TEXT|image_left}</div>
+$sc_style['FEATUREBOX_IMAGE|image_left']['pre'] = '<img class="f-left" src="';
+$sc_style['FEATUREBOX_IMAGE|image_left']['post'] = '" alt="" />';
+$FEATUREBOX_TEMPLATE['image_left'] = '
+<div class="featurebox-item">
+	{FEATUREBOX_IMAGE|image_left=src}<h3>{FEATUREBOX_TITLE|image_left}</h3>{FEATUREBOX_TEXT|image_left}
+	<div class="clear"><!-- --></div>
 </div>
 ';

-$sc_style['FEATUREBOX_IMAGE|image_right']['pre'] = '<div class="f-right">';
-$sc_style['FEATUREBOX_IMAGE|image_right']['post'] = '</div>';
+$sc_style['FEATUREBOX_IMAGE|image_right']['pre'] = '<img class="f-right" src="';
+$sc_style['FEATUREBOX_IMAGE|image_right']['post'] = '" alt="" />';
 $FEATUREBOX_TEMPLATE['image_right'] = '
-<div class="featurebox-item imgright" id="featurebox-item-{FEATUREBOX_ID}">
-	<div class="featurebox-body">{FEATUREBOX_IMAGE|image_right}<h3>{FEATUREBOX_TITLE|image_right}</h3>{FEATUREBOX_TEXT|image_right}</div>
+<div class="featurebox-item">
+	{FEATUREBOX_IMAGE|image_right=src}<h3>{FEATUREBOX_TITLE|image_right}</h3>{FEATUREBOX_TEXT|image_right}
+	<div class="clear"><!-- --></div>
 </div>
 ';