Foundation media components

This namespace contains components for handling different media types using the tools provided by Foundation framework.

Responsive multimedia content

The ResponsiveEmbed component is an implementation of ResponsiveEmbedInterface for embedded media content.

This component implements Foundation Responsive Embed for PHP. ResponsiveEmbed wraps embedded content like videos, maps, and calendars in a responsive embed container to maintain the correct aspect ratio regardless of screen size.

ResponsiveEmbed lets browsers automatically scale most of the iframe based objects in webpages. It is possible to use ResponsiveEmbed to create an intrinsic ratio that will properly scale the media on any device.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Media;
    4.  
    5. use Sphp\Html\Foundation\Sites\Grids\BlockGrid;
    6.  
    7. $blockGrid = (new BlockGrid('small-up-1', 'medium-up-2', 'large-up-3', 'xlarge-up-4'));
    8. $blockGrid->append(ResponsiveEmbed::iframe('http://193.64.245.223/basket/widget/')
    9.                 ->setAspectRatio('square')
    10.                 ->setLazy());
    11. $blockGrid->append(ResponsiveEmbed::vieverJs('manual/snippets/demodoc.pdf')
    12.                 ->setAspectRatio('default')
    13.                 ->setLazy());
    14. $blockGrid->append(ResponsiveEmbed::youtube('6aPhv2J89_s')
    15.                 ->setAspectRatio('widescreen')
    16.                 ->setLazy());
    17. $blockGrid->append(ResponsiveEmbed::dailymotion('x2p4pkp')
    18.                 ->setAspectRatio('panorama')
    19.                 ->setLazy());
    20. $blockGrid->printHtml();
    21.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

Orbit An image and content carousel

Orbit is a Foundation based image and content carousel with animation support and many customizable options. Orbit allows swiping on touch-enabled devices.

  • Red Image Placeholder original size: 750x250
  • Black Image Placeholder original size: 750x250
  • Gray Image Placeholder original size: 750x250
  • Green Image Placeholder original size: 750x250
  • Blue Image Placeholder original size: 750x250
  • Cyan Image Placeholder original size: 750x250
  • Magenta Image Placeholder original size: 750x250
  • Yellow Image Placeholder original size: 750x250
  • White Image Placeholder original size: 750x250
  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Media\Orbit;
    4.  
    5. $orbit = new Orbit();
    6. $captionSuffix = "Image Placeholder <small>original size: 750x250</small>";
    7. $orbit->slides()->appendFigure("https://placehold.it/750x250/f00/fff", "Red $captionSuffix");
    8. $orbit->slides()->appendFigure("https://placehold.it/750x250/000/fff", "Black $captionSuffix");
    9. $orbit->slides()->appendFigure("http://placehold.it/750x250/ccc/fff", "Gray $captionSuffix");
    10. $orbit->slides()->appendFigure("http://placehold.it/750x250/0f0/fff", "Green $captionSuffix");
    11. $orbit->slides()->appendFigure("http://placehold.it/750x250/00f/fff", "Blue $captionSuffix");
    12. $orbit->slides()->appendFigure("http://placehold.it/750x250/0ff/fff", "Cyan $captionSuffix");
    13. $orbit->slides()->appendFigure("http://placehold.it/750x250/f0f/fff", "Magenta $captionSuffix");
    14. $orbit->slides()->appendFigure("http://placehold.it/750x250/ff0/000", "Yellow $captionSuffix");
    15. $orbit->slides()->appendFigure("http://placehold.it/750x250/fff/000", "White $captionSuffix");
    16. $orbit->printHtml();
    17.  
    Highlighted with GeSHi 1.0.9.1
  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Media\Orbit;
    4.  
    5. $orbit = new Orbit();
    6.  
    7. $orbit->slides()->appendYoutubeVideo("CdMs7eqMvNg");
    8. $orbit->slides()->appendDailymotionVideo("x2p4pkp");
    9. $orbit->slides()->appendVimeoVideo("174190102");
    10. foreach ($orbit as $slide) {
    11.   $slide->setAspectRatio('panorama');
    12. }
    13. $orbit->printHtml();
    14. ?>
    15.  
    Highlighted with GeSHi 1.0.9.1

The ProgressBar component

A ProgressBar represents the progress of a task. It is a browser friendly implementation of native HTML 5 progress element. A ProgressBar component can be used in conjunction with JavaScript to display the progress of a task.

  • JavaScript code
    1.  
    2. var foo = {
    3.   bar: function ($barName) {
    4.     var $bar = sphp.Foundation.getProgressBar($barName),
    5.             $button = $('<button class="button">Progress: <span>' + $bar.getProgress() + '</span>%, Click to change!</button>');
    6.     $button.insertAfter($bar);
    7.     $button.click(function () {
    8.       var $progress = $bar.getProgress() + 5;
    9.       foo.setProgress($bar, $progress);
    10.     });
    11.     $bar.on("sphp.progressBar.change", function (event) {
    12.       $theBar = $(event.delegateTarget);
    13.       $button = $theBar.next("button");
    14.       $button.find("span").html($theBar.getProgress());
    15.     });
    16.   },
    17.   setProgress: function ($bar, $progress) {
    18.     if ($progress > 100) {
    19.       $bar.setProgress(0);
    20.     } else {
    21.       $bar.setProgress($progress);
    22.     }
    23.   }
    24. };
    25. foo.bar("foobar1");
    26. foo.bar("foobar2");
    27.  
    28.  
    Highlighted with GeSHi 1.0.9.1
  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Media;
    4.  
    5. use Sphp\Html\PlainContainer;
    6. use Sphp\Html\Scripts\ScriptSrc;
    7.  
    8. $progressBars = new PlainContainer();
    9. $progressBars[] = (new ProgressBar(50))->setColor("alert")->setBarName("foobar1");
    10. $progressBars[] = (new ProgressBar(30))->showProgressText(false)->setColor("success")->setBarName("foobar2");
    11.  
    12. $script = new ScriptSrc("manual/snippets/progressingFooBar.js");
    13. $script->setDefer(true);
    14. $progressBars->printHtml();
    15. $script->printHtml();
    16.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow
    50%