DailyJS

DailyJS

The JavaScript blog.


Tagslideshow
Featured

jquery plugins galleries slideshow sortable

jQuery Roundup: Plugin Registry, imagemax, jQuery Sortable

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery Plugin Registry

jQuery: Write once, do more, then write a weird framework-specific manifest file, learn Git, then share!

The new jQuery Plugin Registry has finally been released. It's based on WordPress, and you can download the source from GitHub: plugins.jquery.com.

To list a plugin on the registry, take a look at the Publishing Your Plugin guide. The workflow is based around Git, and you'll need to write a jquery.json manifest file so the registry can display appropriate metadata. Even though dependencies are listed, there isn't an official automated tool for installing them (a jQuery npm or component equivalent):

If you're looking to just browse and use jQuery plugins in your application or site, not a lot has changed. Plugins each have basic pages that provide a link to the plugin download, as well as past versions, documentation, issue tracker, and source code repository. Download links may serve you a zip file with the plugin assets, or link to the best resource to download the build of the plugin you're looking for.

Given the amount of people writing JavaScript libraries with an optional jQuery support layer, having to add an extra file just to get published on a website seems odd to me. While it means you don't need to create an account on the plugin registry site, people will end up with several json files littering their repositories and getting out of sync. There's probably already a Node tool for automatically generating jQuery, Component/Bower, and npm/Ender json files.

imagemax

imagemax (GitHub: zerostatic / imagemax, License: MIT) by Matt Wallace is a fullscreen slideshow plugin. Images are displayed in the background and scaled to fit the window.

Like other gallery plugins, this one will display a set of images in a container, but it also takes an array of images as an argument:

$('#bg').imagemax({
  imageArray: ['img/bg1.jpg','img/bg2.jpg','img/bg3.jpg']
, autoPlay: 4000
});

jQuery Sortable

jQuery Sortable (GitHub: johnny / jquery-sortable, License: BSD3) by Jonas von Andrian is a drag-and-drop sort library that doesn't require jQuery UI. It supports nested lists, and the demo (with default options) shows a nice "drop" indicator so it's easy to see where an element is being moved to.

The author has demonstrated it being used with Bootstrap, and it works well with Bootstrap's markup and styles. It allows tables to be sorted, but this won't work as well in Konqueror or IE.

Featured

jquery truncation sponsored-content slideshow printing

jQuery Roundup: SliderShock, printThis, readMore

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery SliderShock

SliderShock example

jQuery SliderShock is a responsive slider plugin that can be dropped into WordPress sites. There's full documentation for regular websites and WordPress sites. The WordPress version has some additional features, like built-in support for sliders from external data sources like RSS. The plugin supports various options, including up to 31 transition effects, control over delay time and positioning, and easy styling.

Clicking Build Your Own on the SliderShock homepage displays all of the available options:

SliderShock options

SliderShock can display text captions within slides, and comes bundled with lots of CSS3-based effects. The free version, licensed for use in personal projects, has 10 effects, and the premium version has 31 effects and 39 skins. A license for a single site costs $19, while multiple sites costs $29. There's also a developer license for $99 that allows resale. "Combo" licenses are available if you wish to buy both the WordPress and jQuery versions at once, otherwise you'll have to license them separately.

jquery.printThis

jquery.printThis (License: MIT/GPL) by Jason Day is a fork of permanenttourist / jquery.jqprint, and based on Ben Nadel's Ask Ben: Print Part Of A Web Page With jQuery post -- a combination of several things to solve the problem of printing a given element on a page. Jason's changes can optionally include page styles, import additional stylesheets, and avoids using document.write.

It's interesting to see how this works internally -- the plugin is concise but it takes a bit of iframe manipulation to get the desired results.

jQuery.readMore

Dealing with dynamically truncating content is tricky, and there are many solutions out there. Stephan Ahlf sent in his solution, jQuery.readMore (GitHub: s-a / jQuery.readMore, License: MIT/GPL) which uses a method called $.isOverflowed to add text until there isn't room for any more.

Previously covered related plugins include jQuery.smarttruncation, and jQuery.textFit.

Featured

jquery plugins jquery-ui tabs slideshow

jQuery Roundup: jq-tiles, plusTabs, Kwicks

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jq-tiles

jq-tiles

jq-tiles (GitHub: elclanrs / jq-tiles, License: MIT) is a slideshow plugin that breaks images up into tiles and uses CSS3-based effects. The number of tiles can be changed, and the transition and animation speeds can be configured.

To use the plugin, call $('.slider').tilesSlider(options) on an element that contains a set of images. Events are used to stop and start the slideshow: $('.slider').trigger('start').

plusTabs

plusTabs compared with standard tabs

plusTabs (GitHub: jasonday / plusTabs, License: MIT/GPL) by Jason Day groups jQuery UI tabs under a tab with a menu. Jason's example is scaled to a slim resolution that might be found on a smartphone, showing how jQuery UI tabs become cluttered and messy in such circumstances.

Kwicks

Kwicks (GitHub: jmar777 / kwicks, License: MIT) by Jeremy Martin is a sliding panel plugin. It can display vertical or horizontal panels, and grow or shrink them on hover. It can also be used to create a slideshow.

Kwicks works with nested elements like an unordered list, but it'll actually work with any tag, so <li> isn't hardwired.