Feature-box jquery work. Slider and Tabs functional.

2025-08-19 21:02:09 +02:00 · 2012-06-05 09:14:22 +00:00
parent 855c6f2b8d
commit 6673c50006
14 changed files with 1325 additions and 46 deletions
--- a/e107_plugins/featurebox/templates/featurebox_category_template.php
+++ b/e107_plugins/featurebox/templates/featurebox_category_template.php
@@ -87,22 +87,61 @@ $FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['nav_separator'] = '&nbsp;';
 $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\')';
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['js_type'] = 'prototype';


+// ------------------------------------------ TABS (Legacy Prototype.js) ---------------------------

-//TODO - tabs template.
-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['list_start'] = '
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['list_start'] = '
 <div class="box featurebox admintabs" id="featurebox-tab-container">
 	{FEATUREBOX_NAVIGATION|tabs=loop&uselimit}
 	<div class="tab-content-wrap">
 ';

+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['list_end'] = '
+	</div>
+	<div class="clear"><!-- --></div>
+</div>
+';
+
+// no column support
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['col_start'] = '<div id="tab-{FEATUREBOX_COLSCOUNT}-activate"><div class="tab-content">';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['col_end'] = '</div></div>';
+
+// ajax navigation (unobtrusive)
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['item_start'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['item_end'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['item_separator'] = '<div class="clear"><!-- --></div>';
+
+// empty item  - used with col templates, no shortcodes just basic markup
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['item_empty'] = '';
+
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['nav_start'] = '<div class="tabs"><ul class="e-tabs clear" id="front-tabs">';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['nav_item'] = '<li id="featurebox-tab-{FEATUREBOX_COUNTER}"><a href="#tab-{FEATUREBOX_COUNTER}-activate"><span>{FEATUREBOX_TITLE}</span></a></li>';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['nav_end'] = '</ul></div>';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['nav_separator'] = '';
+
+// external JS, comma separated list
+
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['js'] = '{e_FILE}jslib/core/tabs.js';
+// inline JS, without <script> tags
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['js_inline'] = 'new e107Widgets.Tabs("featurebox-tab-container", { bookmarkFix: false });';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['js_type'] = 'prototype';
+
+
+// ------------------------------------------ TABS (jquery) ----------------------------------------------
+
+
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['list_start'] = '
+<div class="box featurebox e-tabs" id="featurebox-tab-container">
+	{FEATUREBOX_NAVIGATION|tabs=loop&uselimit}	
+';
+
 $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['list_end'] = '
 	</div>
 	<div class="clear"><!-- --></div>
 </div>
 ';
-
 // no column support
 $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['col_start'] = '<div id="tab-{FEATUREBOX_COLSCOUNT}-activate"><div class="tab-content">';
 $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['col_end'] = '</div></div>';
@@ -115,15 +154,60 @@ $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['item_separator'] = '<div class="clear"><!
 // empty item  - used with col templates, no shortcodes just basic markup
 $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['item_empty'] = '';

-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_start'] = '<div class="tabs"><ul class="e-tabs clear" id="front-tabs">';
-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_item'] = '<li id="featurebox-tab-{FEATUREBOX_COUNTER}"><a href="#tab-{FEATUREBOX_COUNTER}-activate"><span>{FEATUREBOX_TITLE}</span></a></li>';
-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_end'] = '</ul></div>';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_start'] = '<ul>';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_item'] = '<li><a href="#tab-{FEATUREBOX_COUNTER}-activate">{FEATUREBOX_TITLE}</a></li>';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_end'] = '</ul>';
 $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_separator'] = '';
-
+//<div class="e-tabs">
 // external JS, comma separated list
-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js'] = '{e_FILE}jslib/core/tabs.js';
+
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js'] = '';
 // inline JS, without <script> tags
-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js_inline'] = 'new e107Widgets.Tabs("featurebox-tab-container", { bookmarkFix: false });';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js_inline'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js_type'] = 'jquery';
+
+
+// ------------------------------------------ CAMERA ----------------------------------------------
+/*
+ <div class="camera_wrap">
+    <div data-src="images/image_1.jpg"></div>
+    <div data-src="images/image_1.jpg"></div>
+    <div data-src="images/image_2.jpg"></div>
+</div>
+ */
+
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['list_start'] = '<!-- start Camera -->
+<div class="box featurebox camera_wrap camera_azure_skin">
+	
+';
+// {FEATUREBOX_NAVIGATION|camera=loop&uselimit}
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['list_end'] = '
+</div>
+<div class="clear"><!-- --></div>
+<!-- End Camera -->
+';
+// no column support
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['col_start'] = '';// <div id="tab-{FEATUREBOX_COLSCOUNT}-activate"><div class="tab-content">';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['col_end'] = ''; // </div></div>';
+
+// ajax navigation (unobtrusive)
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['item_start'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['item_end'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['item_separator'] = '';// <div class="clear"><!-- --></div>';
+
+// empty item  - used with col templates, no shortcodes just basic markup
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['item_empty'] = '';
+
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['nav_start'] = ''; // <ul>';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['nav_item'] = ''; // <li><a href="#tab-{FEATUREBOX_COUNTER}-activate">{FEATUREBOX_TITLE}</a></li>';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['nav_end'] = ''; // </ul>';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['nav_separator'] = '';
+
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['js'] = '{e_FILE}jslib/camera/scripts/camera.min.js';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['js_inline'] = "$('.camera_wrap').camera({FEATUREBOX_PARMS});";
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['js_type'] = 'jquery';
+
+

 /**
 * Template information.
@@ -135,8 +219,10 @@ $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js_inline'] = 'new e107Widgets.Tabs("feat
 * @var array
 */
 $FEATUREBOX_CATEGORY_INFO = array(
-	'default' 	=> array('title' => 'Default (core)', 'description' => 'Flat - show by category limit'),
-	'dynamic' 	=> array('title' => 'Dynamic (core)', 'description' => 'Load items on click (AJAX)'),
-	'tabs'		=> array('title' => 'Tabs (core)'	, 'description' => 'Tabbed Feature box items')
+	'tabs' 			=> array('title' => 'Tabs (jquery)'	, 'description' => 'Tabbed Feature box items'),
+	'camera' 		=> array('title' => 'Image-Slider (jquery)'	, 'description' => 'Image transitions using "<a href=\'http://www.pixedelic.com/plugins/camera/\'>Camera</a>"'),
+	'default' 		=> array('title' => 'Default (prototype.js)', 'description' => 'Flat - show by category limit'),
+	'dynamic' 		=> array('title' => 'Dynamic (prototype.js)', 'description' => 'Load items on click (AJAX)'),
+	'tabs-proto' 	=> array('title' => 'Tabs (prototype.js)'	, 'description' => 'Tabbed Feature box items')
 );
 ?>
--- a/e107_plugins/featurebox/templates/featurebox_template.php
+++ b/e107_plugins/featurebox/templates/featurebox_template.php
@@ -8,13 +8,14 @@

 global $sc_style;

-$FEATUREBOX_TEMPLATE['default'] = '
-<div class="featurebox-item">
+$FEATUREBOX_TEMPLATE['default'] = '<!-- Feature box Item -->
+<div class="featurebox-item" >
 	<h3>{FEATUREBOX_TITLE|default}</h3>
 	{FEATUREBOX_TEXT|default}
 </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'] = '
@@ -24,6 +25,7 @@ $FEATUREBOX_TEMPLATE['image_left'] = '
 </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'] = '
@@ -33,9 +35,36 @@ $FEATUREBOX_TEMPLATE['image_right'] = '
 </div>
 ';

+
+
+$FEATUREBOX_TEMPLATE['camera'] = '
+<div class="featurebox-item" data-thumb="{FEATUREBOX_THUMB}" data-src="{FEATUREBOX_IMAGE|camera=src}" data-link="{FEATUREBOX_URL}">
+	<div class="featurebox-text camera_effected" style="position:absolute">
+		<div class="featurebox-title">{FEATUREBOX_TITLE|camera}</div>
+		<div class="featurebox-text">{FEATUREBOX_TEXT|camera}</div>
+	</div>
+</div>
+';
+
+
+
+$FEATUREBOX_TEMPLATE['camera_caption'] = '
+<div class="featurebox-item" data-thumb="{FEATUREBOX_THUMB}" data-src="{FEATUREBOX_IMAGE|camera=src}" data-link="{FEATUREBOX_URL}">
+	<div class="camera_caption fadeFromBottom">
+		<h3>{FEATUREBOX_TITLE|camera}</h3>
+		{FEATUREBOX_TEXT|camera}
+	</div>
+</div>
+';
+
+
+
+
 $FEATUREBOX_INFO = array(
 	'default' 		=> array('title' => 'Default (core)', 		'description' => 'Title and description - no image'),
 	'image_right' 	=> array('title' => 'Right image (core)',	'description' => 'Right floated image'),
-	'image_left'	=> array('title' => 'Left image (core)'	, 	'description' => 'Left floated image')
+	'image_left'	=> array('title' => 'Left image (core)'	, 	'description' => 'Left floated image'),
+	'camera'		=> array('title' => 'Image with text-overlay',	'description' => 'For use with the "camera" category'),
+	'camera_caption' => array('title' => 'Image with lower caption',	'description' => 'For use with the "camera" category')
 );
 ?>