glFusion Wiki

Site Tools


glfusion:widgets

Widgets

Widgets are little snippets of code that enhance a glFusion site. While not complex enough to be considered a plugin, they perform specific tasks or functions that add interactivity to your site.

Many of the widgets included with glFusion are built in JavaScript, using the jQuery library as their foundation. Widgets can also be functions that reside in public_html/lib-common.php, private/system/lib-custom.php (for your non-standard custom ones), or most commonly private/system/lib-widgets.php.

jQuery Widgets

One of the benefits of including the jQuery compact JavaScript library, is the ability to create custom widgets that bring additional functionality to your site. Most of the widgets below function by adding HTML or PHP code to a block or static page. You can then position the block or static page however you like on your glFusion powered site (i.e. above or below the featured story, at the bottom of the page, etc.) Additionally, some widgets can be used within .thtml theme template files for a constant site presence.

By default, the css styling for all jQuery based widgets is now located in your theme's style.css file.

Since this site uses UTF-8 character encoding, copying and pasting code from this wiki documentation may have unexpected results in non UTF-8 aware text editors.

Rotator

By implementing Nivo Slider class, glFusion has the ability to create a flexible, responsive slider. The Rotator widget is a sequential image rotator with hyperlinks and optional descriptive text. Created with JavaScript, it provides an alternative to using Flash to rotate featured content links on your site.

To create a Rotator widget, go to the Static Page admin interface, and create a static page, and make sure Post Mode is set to HTML Formatted. Then enter the following code, inserting your own content where specified.

// this staticpage needs to have PHP set to execute PHP below
// use lib-widgets.php
USES_lib_widgets();
 
$sliderData = array(
'images' => array(
  array(
    'image' => '/images/library/Image/moorotator1.jpg',
    'caption' => 'Welcome to the glFusion Revolution!<br>Learn more about the glFusion development philosophy today!',
    'link'  => 'http://www.glfusion.org/wiki/doku.php?id=glfusion:mission'
  ),
  array(
    'image' => '/images/library/Image/moorotator2.jpg',
    'caption' => '<b>Custom Header Images</b><br>Personalize your site according to your visitors time of day!',
    'link' => 'http://www.glfusion.org/wiki/doku.php?id=glfusion:nouveau#custom_header_images',
  ),
  array(
    'image' => '/images/library/Image/moorotator3.jpg',
    'caption' => '<b>Language Localization</b><br>Support for a multi-lingual site right out of the box!',
    'link' => 'http://www.glfusion.org/wiki/doku.php?id=glfusion:language',
  ),
  array(
    'image' => '/images/library/Image/moorotator4.jpg',
    'caption' => '<b>Bugs Belong in Nature, not glFusion</b><br>Found a bug? Visit our Tracker and submit a report!',
    'link' => 'https://github.com/glFusion/glfusion/issues',
  ),
  array(
    'image' => '/images/library/Image/moorotator5.jpg',
    'caption' => '<b>Remote Social Authentication</b><br>Login to glFusion using your favorite social networking services.',
    'link' => 'http://www.glfusion.org/wiki/glfusion:remoteauth',
  ),
 
  /* repeat the array as needed for more slides */
 
),
 
'options' => array(
  'slideWidth' => 570,            // the width of each slide   
  'mode' => 'horizontal',         // Type of transition - horizontal, vertical, fade
  'speed' => 500,                 // Slide transition duration (ms)
  'slideMargin' => 0,             // Margin between each slide
  'startSlide' => 0,              // Starting slide index (zero-based)
  'randomStart' => false,         // Start slider on a random slide
  'infiniteLoop' => true,         // if true, clicking Next while on last slide will transition to the first
  'hideControlOnEnd' => false,    // If true, "Next" control will be hidden on last slide and vice-versa
  'captions' => true,             // Include image captions
  'responsive' => true,           // Enable or disable auto resize of the slider
  'touchEnabled' => true,         // slider will allow touch swipes
  'pager' => true,                // If true, a pager will be added
  'pagerType' => 'full',          // if full, a pager link will be generated for each slide. If short, a x / y page will be used (ex. 1 / 5)
  'auto' => true
),
 
'template' => 'slider.thtml'      // you can specify a custom template file if needed
);
 
return WIDGET_slider($sliderData);
Option Default Value Description
effect 'random' Specify sets like ,'fold ,fade ,sliceDown'
slices 15 For slice animations
boxCols 8 For box animations
boxRows 4 For box animations
animSpeed 500 Slide transition speed
pauseTime 3000 How long each slide will show
startSlide 0 Set starting Slide (0 index)
directionNav true Next & Prev navigation
controlNav true 1,2,3… navigation
controlNavThumbs false Use thumbnails for Control Nav
pauseOnHover true Stop animation while hovering
manualAdvance false Force manual transitions
prevText 'Prev' Prev directionNav text
nextText 'Next' Next directionNav text
randomStart false Start on a random slide

The transition can be any one of the following:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the glFusion Documentation to learn how to enable/disable PHP in static pages.

Set In a block to unchecked, set PHP to execute PHP and save your static page, including any other placement options you desire.

To change the styling of the Rotator, edit your theme's style.css file.

Rotator Block

Utilizing the bxSlider jQuery Widget, the Rotator Block widget is a sequential image rotator with hyperlinks and optional descriptive text. Created with javascript, it provides an alternative to using Flash to rotate featured content links in a block on your site.

To create a Rotator Block widget, go to the Block admin interface and create a new block, and make sure Type is set to Normal Block. Then enter the following code, inserting your own content where specified:

<script type="text/javascript" src="http://www.yoursitehere.com/javascript/addons/bxslider/jquery.bxslider.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.bxslider1').bxSlider({
            slideWidth : 150,
            mode : 'fade',          // Type of transition between slides - 'horizontal', 'vertical', 'fade'
            speed : 500,            // Slide transition duration (in ms)
            slideMargin : 0,        // Margin between each slide
            startSlide : 0,         // Starting slide index (zero-based)
            randomStart : false,    // Start slider on a random slide - (true / false)
            infiniteLoop : true,    // If true, clicking "Next" while on the last slide will transition to the first slide and vice-versa
            hideControlOnEnd : true,// If true, "Next" control will be hidden on last slide and vice-versa
            captions : false,       // Include image captions. Captions are derived from the image's title attribute
            responsive : true,      // Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders.
            touchEnabled : false,   // If true, slider will allow touch swipe transitions
            controls: false,        // If true, "Next" / "Prev" controls will be added
            pager : false,          // If true, a pager will be added
            auto : true             // Slides will automatically transition
        });
    });
</script>
 
<ul class="bxslider1" style="padding:0px !important;">
    <li>
        <a href="http://www.glfusion.org/wiki/doku.php?id=glfusion:start" target="_blank">
            <img src="http://theme.glfusion.org/images/library/Image/moorotatorblock1.jpg" title="Documentation Wiki" alt="Documentation Wiki">
        </a>
    </li>
    <li>
        <a href="http://www.glfusion.org/wiki/doku.php?id=roadmap" target="_blank">
            <img src="http://theme.glfusion.org/images/library/Image/moorotatorblock2.jpg" title="glFusion Roadmap" alt="glFusion Roadmap">
        </a>
    </li>
    <li>
        <a href="http://www.glfusion.org/wiki/doku.php?id=glfusion:mission" target="_blank">
            <img src="http://theme.glfusion.org/images/library/Image/moorotatorblock4.jpg" title="Join Us" alt="Join Us">
        </a>
    </li>
</ul>

Make sure you update public_html/javascript/mootools/gl_moorotator-block.js and specify the absolute path to your blankimage variable. If you don't, you'll notice broken image issues in between image fades. Since the block editor doesn't support switching back and forth between PHP and html code (like the staticpage editor does), you will have to make this edit manually.

To change the styling of the gl_moorotator-block, edit your theme's style.css file.

Tab Slider

The Tab Slider widget allows you to create multiple content elements, and then alternate between viewing those elements within the display area. This maximizes the use of screen space, keeps the overall page layout cleaner, and allows for enhanced user interaction with your site. Click here to see a live example.

You can navigate between the content elements by either clicking on the individual tab header links, or by using the blue previous and next buttons.

In glFusion v1.1.0 and beyond, we have included a function that will take the content of other static pages, and combine them to create one mooslide. Simply create your static pages, and then create a separate static page, and make sure Post Mode is set to HTML Formatted, then enter the following code:

  // this staticpage needs to have PHP set to execute PHP (return) below
  // use lib-widgets.php
  USES_lib_widgets();
 
  // add your staticpage IDs, order here is order they appear on the slide tabs
 
  $dataArray = array(
    'panels' => array(
      'slide_whatsnew',
      'slide_cachetech',
      'slide_integratedplugins',
      'slide_jquery',
      'slide_widgets',
    ),
    'options' => array(
      'autoplay' =>  6000,         // false or integer - Number of milliseconds betweeen transitions to the next tab.
      'tabArrowWidth' =>  35,      // Width in pixels of the tab arrows.
      'defaultTab' =>  1,          // Index of the tab selected by default. (1-indexed)
    /*  'height' =>  300,  */          // Set a static value for the height of the whole widget in pixels.
      'indicators' =>  true,       // Show panel indicators.
      'mousewheel' =>  true,       // Allow scrolling to the next and previous panel using the mousewheel.
      'position' =>  'top',        // top or bottom  - Position of the tabs relative to the panel container
      'panelArrows' =>  true,      // Show the next and previous panel arrows.
      'panelArrowsShowOnHover' =>  true,  // Hide the panel arrows unless the panel container is being hovered over.
      'tabs' =>  true,             // Use tabs
      'tabHeight' =>  30,          // Height in pixels of the tabs container
      'tabArrows' =>  true,        // Use tab arrows when tabs overflow out of their container.
      'tabSlideLength' =>  100,    // Number of pixels to slide the tabs when using the tab arrows.
      'tabSlideSpeed' =>  200,     // Number of milliseconds of the tab sliding transition.
      'transition' =>  'slide',    // slide or fade - Transition to use for panel transitions.
      'transitionSpeed' =>  500,   // Number of milliseconds of the panel transition.
      'width' =>  560,             // Set a static width in pixels for the widget.
    )
  );
 
  //call the WIDGET_tabslide function from lib-widgets.php
  return WIDGET_tabslide($dataArray);

PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the glFusion Documentation to learn how to enable/disable PHP in static pages.

Set In a block to unchecked, set PHP to execute PHP (return) and save your static page, including any other placement options you desire.

Spring Menu

Like the Tab Slider widget above, the Spring Menu widget is a great way to showcase content, while maximizing layout space. This widget is geared toward prominently displaying important links on your site, and will grab the attention of your visitors, keeping them engaged as they interact with the fun, yet unobtrusive sizing animation. Use them as supplemental menus to important areas of your site. Click here to see a live example.

To setup this widget, go to the Static Page admin interface, and create a new static page. Make sure Post Mode is set to HTML Formatted, then enter the following code:

USES_lib_widgets();
 
$menuData = array(
  'images' => array(
    array(
      'image' => '/layout/vintage/images/grabit.jpg',
      'link'  => 'http://dvlp.glfusion.org/filemgmt/'
    ),
    array(
      'image' => '/layout/vintage/images/readit.jpg',
      'link' => 'http://glfusion.org/wiki/doku.php',
    ),
    array(
      'image' => '/layout/vintage/images/sayit.jpg',
      'link' => 'http://theme.glfusion.org/forum/',
    ),
    array(
      'image' => '/layout/vintage/images/joinus.jpg',
      'link' => 'http://glfusion.org/wiki/doku.php',
    )
  ),
  'options' => array(
	  'border' => 5,
	  'duration' => 400,
	  'openDim' => 240,
	  'closeDim' => 125,
	  'fadeInTitle' => false,
	  'height' => 100
  )
);
 
return WIDGET_springMenu($menuData);

PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the glFusion Documentation to learn how to enable/disable PHP in static pages.

Set In a block to unchecked, set PHP to execute PHP and save your static page, including any other placement options you desire.

Auto Translations

In addition to the multi-language capabilities built into glFusion, we have partnered with Google to leverage their automatic translation services.

The function WIDGET_autotranslations in private/system/lib-widgets.php builds a list of flag image links that, when clicked, will automatically translate your glFusion site to one of several languages. This translated page is persistent for the browser session, so if you continue to navigate the translated site, each page you visit will continue to be translated, until you close the browser window.

. The languages currently supported by Google include:

Language ISO Code Language ISO Code Language ISO Code Language ISO Code Language ISO Code
Arabic ar English en Italian it Norwegian no Serbian sr
Bulgarian bg Spanish es Hebrew iw Polish pl Swedish sv
Catalan ca Finnish fi Japanese ja Portugese pt Filipino tl
Czech cs French fr Korean ko Romanian rc Ukrainian uk
Danish da Hindi hi Lithuanian lt Russian ru Vietnamese vi
German de Croatian hr Latvian lv Slovak sk Chinese Simplified zh-CN
Greek el Indonesian id Dutch nl Slovenian sl Chinese Traditional zh-TW

The structure of each link is as follows:

<li><a href="http://translate.google.com/translate?hl=XX&sl=YY&tl=XX&u=http://yoursite"><img src="http://yoursite/images/translations/XX.png" alt="XX" /></a></li>

Where XX represents the language to be translated to (see the ISO codes listed above), and YY represents the default language of your site. In the hyperlink, the text hl represents the language the Google header will appear in, sl represents the default language of your site, tl represents the language Google will translate to, and finally u is the URL of the site to be translated.

To call this function in a static page, go to the Static Page admin interface and create a new static page, give it a Title and ID, and make sure Post Mode is set to HTML Formatted. Then enter the following code:

USES_lib_widgets();
echo WIDGET_autotranslations(1);

By setting 1 when calling the function, glFusion will return the text “Click on a flag to automatically translate this site into that country's language” above the list of flags. This text can be edited in the site language file, under the lib-widgets section. By removing the “1” when calling the function, glFusion will return just the list of flag links.

PHP use in static pages is enabled by default. If you turn it off, make sure to re-enable it. If you don't, the static page will not function properly. See the glFusion Documentation to learn how to enable/disable PHP in static pages.

By default, glFusion includes this function already formatted in a nice block that appears on the right side of the homepage.

If you edit that block, you will notice that the code used to create the block is slightly different from the code used above to create the static page. This is because of the additional security in the block system that requires a PHP function called in a block to have the prefix “phpblock_”. Rather than duplicate the entire function and give it a different name, we've decided to wrap the WIDGET_autotranslations function in a phpblock_autotranslations function that lives in public_html/lib-common.php.

/**
 * This block will display a list of flags that link to the Google
 * automatic translation service.
 *
 * Loads the autotranslations widget block from private/system/lib-widgets.php
 */
function phpblock_autotranslations() {
   global $_CONF, $LANG_WIDGETS;
   require_once $_CONF['path'] . 'system/lib-widgets.php';
   return(WIDGET_autotranslations());
}

The flag icons used in this widget came from http://www.famfamfam.com/lab/icons/flags/. These icons are public domain, and as such are free for any use (attribution appreciated but not required). If you find these icons useful, please donate via paypal to mjamesATgmailDOTcom (or click the donate button available at http://www.famfamfam.com/lab/icons/silk)

Note that these flags are originally named using the ISO3166-1 alpha-2 country codes where appropriate. A list of codes can be found at http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2. We have renamed the flags used to match the respective 2 digit language code used by Google for the translation service. These flag icons can be found in public_html/images/translations/.

glfusion/widgets.txt · Last modified: 2016/09/13 19:45 (external edit)