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(
    '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 
),
 
'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.

Forcing a specific size to images in rotator

From the glFusion Support Forum - Rotator slider (adjust image size)

Since the slider / rotator is 'responsive' - it will grow or shrink to the size of the container. The best thing to do is to wrap the slider in a container and force the width of the container.

For example, normally we just return the slider widget data from the static page like this:

return WIDGET_slider($sliderData);

So the slider is going to grow / shrink to fit the available space. Let's now wrap it in a div where we specify the width so the slider is now in a smaller container - so our code might look like this:

return '<div class="uk-responsive-width" style="width:500px;margin:0 auto;">' . WIDGET_slider($sliderData) . '</div>';

What we've done is create a wrapper div that is 500px wide. We add the class=“uk-responsive” to ensure the slider will properly shrink on smaller devices. The margin: 0 auto; ensures that our slider is properly centered.

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.

RSS Ticker Widget

To create an RSS ticker 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 (return)- this is located under the Attributes tab of the page editor
 
// pass the full URL to the RSS feed below
 
USES_lib_widgets();
 
$Options = array(
  'speed'     => 50,        // The movement speed in pixels per second
  'moving'    => true,      // Should start in moving state or a paused state
  'startEmpty' => true,     // Should the elements start outside of the visible area
  'hoverpause' => true,     // Pauses the animation if the user hovers over the ticker
  'transition' => 'linear', // Transitions 'linear' or 'ease'
  'height'     => '50px'    // The height of the ticker element. 
);
 
return WIDGET_tickerRSS('https://www.glfusion.org/backend/glfusion.rss', $Options);
Option Default Value Description
speed 50 The movement speed in pixels per second
moving true Defines if the WebTicker should start in moving state or a paused state
startEmpty true Defines whether the elemtents should start outside of the visible area
hoverpause true Pauses the animation if the user hovers over the ticker
transition linear The easing function used throughout for transitions
height 30px The height of the ticker element. The string value needs to include the unit

The transition can be any one of the following:

  • linear
  • ease

Styles that can be added to the custom.css to handle the look and feel include:

styles:
 .ticker-feed > li {
 	font-size:20px !important;
 }
 .ticker-feed > li > a:hover {
    text-decoration:none !important;
 }
 .ticker-feed {
    background:#000 !important;
 }
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

glFusion has retired the old translation widget. It simply does not do as good a job as the Google and Microsoft translators. If you need a translation widget, it recommended that you implement one of the following:

Both services are very simple to use. They will produce a small snippit of code that you can cut / paste into a block on your site and it is that simple!

glfusion/widgets.txt · Last modified: 2016/12/02 09:57 (external edit)

Page Tools