WebAppers

/ best free open source web resources /

Graphic Resources

Lightbox_me – A Really Simple Lightboxing for Programmer

Posted · Category: Popup

Have you ever had a DOM element that you wanted lightboxed, but didn’t want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.

Lightbox_me is an essential tool for the jQuery developer’s toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss. Lightbox_me handles overlay resize when the window is resized. It is just over 1000 bytes gzipped & compressed. It has been tested on IE 6+, Firefox 2.5+, Safari, Chrome.

lightbox-me

Requirements: jQuery Framework
Demo: http://buckwilson.me/lightboxme/
License: Apache License

Lightweight jQuery UI Notify Widget in 100% CSS

Posted · Category: GPL License, MIT License, Popup

This is called jQuery UI Notify Widget, that is similar to the Growl-like scripts we mentioned in the past, except most seem to come with an enormous footprint: 10-12k of code, X-number of images, and roughly 1000 options to support every plausible use case.

jQuery UI Notify Widget is built off the jQuery UI widget factory in approx. 100 lines of code and 100% CSS. In typical widget fashion, this implementation supports the most basic uses, but is flexible enough for more advanced cases.

jquery-notify

Requirements: jQuery Framework
Demo: http://www.erichynds.com/examples/jquery-notify
License: MIT, GPL License

jConfirmAction: A jQuery Plugin for Confirmation Box

Posted · Category: GPL License, Popup

jConfirmAction is a jQuery plugin that aims to replace a plain confirmation box with a cute one. This plugin will help you to create a flying bubble confirmation box upside your link. Basically this plugin will create a DIV element that contains confirmation box after your clicked element, then it will appear with fading in and dissappear with fading out.

To create that one you just need to include jConfirmation plugin to your page, create a link, specify a class name, ask jConfirmAction to create a confirmation box and that’s it you have a cute confirmation box.

confirmation-box

Requirements: jQuery Framework
Demo:
http://webstuffshare.com/demo/jConfirmAction/
License: GPL License

jSquares – Image Grid that Pops Up Image & Description

Posted · Category: GPL License, MIT License, Popup

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. There are some parameters can be added when you call jSquares, e.g. caption size, opacity of the images, shuffle speed and etc. It works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

jsquares

Requirements: jQuery Framework
Demo: http://boedesign.com/demos/jsquares/
License: MIT, GPL License

Sliding Content Aside to Reveal Secondary Content Pane

Posted · Category: GPL License, Popup

As web developers, we spend precious time laying out our pages, using every UI concept in the book to conserve space, while trying to maintain a user’s focus on the task at hand. There are many techniques to use Lightbox, Carousel and Tabs to name a few – and recently Scott Robbin has offered up another: jQuery pageSlide.

jQuery pageSlide was inspired by the UI work of Aza Raskin. Aza introduced the idea of sliding content aside to reveal a secondary content pane. This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript.

By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

content-slider

Requirements: jQuery Framework
Demo: http://srobbin.com/blog/jquery-pageslide/
License: GPL License

Meerkat – jQuery Plugin for Splash Pages or Promotions

Posted · Category: MIT License, Popup

Meerkat, named for its pop up like behavior, is a jQuery plugin created by Jarod Taylor. Meerkat, depending on the options you have set, will slide or fade in from the top or bottom of the browser window and remain in its fixed position while the rest of the page will scroll normally.

You have a choice of providing a close option which will simply close Meerkat until the page has been reloaded, or a dontShow option, which will close Meerkat until the browser session has ended, or for a set amount of days, depending on the options you have defined.

Whether it’s used as a simple promotional tool, a roost for advertisements, or even as an alternative to a splash or entry page; Meerkat is unobtrusive, cross-browser compatible, and degrades gracefully if Javascript has been disabled.

meerkat

Requirements: jQuery Framework
Demo: http://jarodtaylor.com/meerkat/demos/
License: MIT License

Fancy Javascript Popup Library with jQuery UI

Posted · Category: CC License, Popup

TopUp is another easy to use Javascript library for unobtrusively displaying images and webpages in popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness.

TopUp is absolutely free, also for commercial use. The installation of TopUp consists of including only one file (no images or stylesheets), the look-and-feel is Apple-like, the animations and transitions look fancy, you can still use Prototype, it is so easy to specify options and last but not least: you can stay updated with the latest version without changing any code.

popup-windows

Requirements: jQuery Framework
Demo: http://gettopup.com/
License: Creative Commons License

SimpleModal – A jQuery Modal Dialog Framework

Posted · Category: MIT License, Popup

SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

Styles can be applied through external CSS, the options object, or both. The CSS options for the modal overlay, container, and data elements are: overlayCss, containerCss and dataCss, all which take a key/value object of properties.

jquery-modal

Requirements: jQuery Framework
Demo: http://www.ericmmartin.com/projects/simplemodal-demos/
License: MIT License

Keep Demos Inside the Page with inFrame

Posted · Category: License Free, Popup

Say I had some CSS or JavaScript techniques/effects I wanted to show in a blog post. Obviously it would have been uncomfortable for us to actually include the thing in the post (CSS needs to be in the head, JavaScript may conflict with other JavaScript, etc), so the best option would have been to just link to the file demonstrating the effect.

Using inFrame, we can keep demos indisde the page. So that, the reader doesn’t have to go away from the blog post to view demo files. Simply just add a class of inframe to each these links.

inFrame Demo

Requirements: jQuery Framework
Demo: http://www.vileworks.com/inframe-keep-the-demos-inside…
License: License Free

How to Create a Non-Javascript Lightbox with CSS

Posted · Category: License Free, Popup

We have seen lots of Javascript Lightbox plugins. It is good to see someone who has created a valid markup Lightbox purely with XHTML and CSS for us.

ThinkVitamin has published a detailed tutorial of How to Create a Valid Non-Javascript Lightbox. Please note that this article assumes you have a basic understanding of (X)HTML and CSS.

CSS Lightbox

Requirements: FF, Safari, Chrome, IE6, IE7 and IE8
Demo: http://www.growldesign.co.uk/projects/lb/
License: License Free

Page 4 of 7«1234567»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons