Plugins

User Interface


Rounded corners, gradients, stylistic changes.

(mb) miniAudioPlayer

An HTML5 audio player for your music!

If you need an audio player for your music or for your podcast, this is what you where looking for.
This full featured small player makes advantage of the new HTML5 AUDIO tag with a flash fallback for browsers that doesn't support it. It is a GUI implementation of the jPlayer plugin realized by Happyworm.

(mb) valueSlider

jquery.mb.valueSlider let you set a range between two numbers (positive or negative) and catch a value by dragging a cursor.

(mb) bgndGallery

With this jQuery plugin you can make suggestive slide show of images as background of your page; the images will adapt their size to the window size fitting always at the best.
You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.

(mb) verticalSlider A good way to manage long list in short space!

A good way to manage long list in short space!

jquery.mb.verticalSlider let you show long list of elements managing pagination, it can work with elements already in the DOM of your page or loading them via ajax when needed. And it works with mouse wheel of course.

view a demo: http://pupunzi.com/mb.components/mb.verticalSlider/demo/demo.html

project page: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-verticalslider/

(mb)YTPlayer, play a Youtube video as background or in a customizable player!

Use this chromeless player to show your favourite Youtube movies on your page!
Or easily transform your Youtube movie into a HTML background!

This jquery component let you have a chromeless, customizable player for your favorite YT movies. It can be used as background of your HTML page.

(mb)scrollable, scroll your content!

Need to show many elements in constricted space?

1, 2, 3, 15...slide how many box you want with a simple and configurable navigation toolbar.

here is the js call:

$("#myScroll").mbScrollable({
   width:700,
   elementsInPage:1,
   elementMargin:2,
   shadow:"#999 2px 2px 2px",
   height:"auto",
   controls:"#controls",
   slideTimer:600,
   autoscroll:true,
   scrollTimer:4000
});

here is the code for the dom elements:

  <div id="myScroll">
    <div class="scrollEl" style="background-color:#9999ff">1</div>
    <div class="scrollEl" style="background-color:#cc9900">2</div>
    <div class="scrollEl" style="background-color:#660066">3</div>
  </div>

  <div id="controls">
    <div class="first">first</div><div class="prev">prev</div>
    <div class="next">next</div><div class="last">last</div>
    <div class="pageIndex"></div>
    <div class="start">start</div><div class="stop">stop</div>
  </div>

(KFSOFT) My Image Box

My Image Box

This plugin create an enlargeable image box for your thumbnail. User can click on the thumbnail, and an full size image can be displayed. It also give a rotate option for users. It is good for user generated contents, as users often do not edit pictures before upload. One example is pictures taken by mobile phone. Sometimes it is very difficult to determine the orientation of the image as we can rotate the phone easily. We usually find it out after we uploaded the pictures.

FEATURES

  • Allow user to zoom the image in and out
  • Allow user to view the picture in different orientations
  • It is a CSS solution, and no need to maintain multiple images in server
  • cross browser (work in IE / FF / chrome / Safari / opera)

DEMO

http://www.kfsoft.info/MyImageBox/demo.php

(jqxDateTimeInput) - jQuery DateTimeInput Widget

jqxDateTimeInput represents a jQuery widget that enables the user to select a date using an intuitive keyboard input or a popup monthly calendar display. It is platform independent, cross-browser compatible and works on PC and mobile devices.

Features

- Intuitive Keyboard Input and Keyboard Navigation.
- Show/Hide Other month days.
- Customizable Cell Styles. You can customize the weekends, other month and today cells.
- Dates and Strings Localization.
- Special Dates. You can add any special date to the jqxCalendar such as birthday, vacation, etc. The special date's style can be customized and you have also an option to display a custom tooltip with description.
- Restrict Calendar Navigation.
- Configurable First Day of week and Navigation Title Format.
- Configurable Calendar Day Names Format.
- Show/Hide the Week of the Year header.
- Built-in Validation.
- Custom DateTime Format Strings.

HTML

LiimeBar: An improved scroll bar for your website

LiimeBar is a jQuery plugin which removes the default browser scroll bar and replaces it with a sleek, modern one which will really impress your visitors and enhance your website.

The scroll bar is pure CSS which makes it very customizable and you will have it up and running in no time at all (approx. 2 minutes).

searchOnSelect

This plugin hides or shows the options of 1 or more select element(s) depending if they match or not what is typed in an input field. It will also work nicely with optgroup by searching the options concatenated with their optgroup labels.

For more informations, visit the homepage or the demo below.