Home · AJAX

ajax - list of light boxes,thick boxes,pop ups and modal windows

Awesome Box

Awesome Box is a very simple and unobtrusive Javascript that loads images in the same window, overlaid over the page's content.

Awesome Box

---------------

Control.Window

Control.Window is a fully programmable, multi purpose windowing toolkit for Prototype. It covers a wide variety of use cases and allows for a high degree of customization. It can attach to links to open the targets as windows, or can be filled with dynamic content. It includes support for stackable, draggable and resizable windows. Subclasses to handle Modal windows, LightBoxes and Tooltips are included.

Control.Window

---------------

EnlargeIt! v1.00

EnlargeIt! is a little Javascript you can use in your website. It enlarges thumb images beautifully with a mouse click. You can use different animations (fade in/out, several glide modes) if you like. You can add AJAX content to your images.

EnlargeIt! v1.00

---------------

Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.
It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

Facebox

---------------

FancyZoom

This much-requested chunk of Javascript to zoom images inline, originally written for this blog but later rolled out to the Panic website and used for screenshots, is now polished up, bug-fixed, available for you to use on your website!

FancyZoom

---------------

FancyBox

Automatically scales large images to fit in window
Adds a nice drop shadow under the zoomed item
Groups related items and adds navigation through them (uses preloading)
Can display images, inline and iframed content
Customizable through settings and CSS

FancyBox

---------------

Floatbox

Floatbox is tool for displaying images and html content in a styled "lightbox" that floats overtop of an existing web page.
It is client-side javascript that works by attaching behaviours to html anchor elements.
Floatbox was originally derived from Lytebox which in turn was derived from Lightbox JS.

Floatbox

---------------

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.

GreyBox

---------------

Highslide JS

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages.

Highslide JS

---------------

iBox

iBox is a lightweight script that lets you overlay images and documents in a small dialog without a page reload. It's built to be easy to install and use, while offering great flexibility.

Highslide JS

---------------

Query lightBox plugin

---------------

Imagebox

---------------

Query lightBox plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQueryÃ‚Â´s selector.

Query lightBox plugin

---------------

Leightbox

Changed ParticleTree's lightbox functionality to allow the use of inline div's instead of AJAX calls

Leightbox

---------------

Lightbox Gone Wild!

a bit more flexible for extending a web siteÃ¢â‚¬â„¢s interface. In this tutorial, weÃ¢â‚¬â„¢ll take a look at how to create a modal window using some nifty JavaScript and CSS.

Lightbox Gone Wild!

---------------

Lightbox JS

Lightbox JS is very cool and useful script to display an image on the page.

Lightbox JS

---------------

Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

Lightbox 2

---------------

LightWindow v2.0

---------------

Lightview

Lightview was built to change the way you overlay content on a website.

Clean: Designed to compliment your content.
Fast: Smart image preloading.
Easy to customize: You don't even have to know CSS.
Rounded: Adjustable rounded corners, without PNGs.
Smart resizing: Content will always fit on your screen.
Custom events: Using Prototype 1.6
Slideshow: One button slideshow.
Effects: Using Scriptaculous.
Works on all modern browsers.

Lightview

---------------

Litebox

Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.

Litebox

---------------

Lytebox

Lytebox was written from the Lightbox class that Lokesh Dhakar (http://www.huddletogether.com) originally wrote. The purpose was to write a self-contained object that eliminated the dependency of prototype.js, effects.js, and scriptaculous.js.

Lytebox

---------------

Milkbox - Lightbox for Mootools 1.2

just another lightbox clone, but this time is written for Mootools 1.2. I needed it, so I decided to write my own, and since someone else could need it, I think it's time to share it.

Milkbox - Lightbox for Mootools 1.2

---------------

ModalBox

ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. ItÃ¢â‚¬â„¢s inspired by Mac OS X modal dialogs. And yes, it may also be useful for showing larger versions of images. :)

ModalBox

---------------

multibox

lightbox that supports images, flash, video, mp3s, html.

multibox

---------------

MOOdalBox - an HTML Lightbox

A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework.
It can be used to display some help document, an extra options page, a registration form, etc. It eliminates the need of classic popup windows, that may get blocked by popup blockers.

moodalbox

---------------

NyroModal :: jQuery Plugin

---------------

prettyPhoto a jQuery lightbox clone

---------------

prettyPhoto a jQuery lightbox clone

---------------

Prototype Window

This javascript class allows you to add window in a HTML page.
This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it's not mandatory.
It has been tested on Safari, Camino, Firefox and IE6, Opera looks fine.

Prototype Window

---------------

Roebox

Roebox.0.9 is a combination of both Lightbox 2.02 and Slimbox 1.03.

Roebox

---------------

Slightly ThickerBox

Slightly ThickerBox is a modification of Cody Lindley's Thickbox script. I modified it for use on my Jason's Toolbox Redesign. The modifications allow the script to generate "Previous Image" and "Next Image" links.

Slightly ThickerBox

---------------

Slimbox, the ultimate lightweight Lightbox clone

Slimbox is a 4kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2

Slimbox, the ultimate lightweight Lightbox clone

---------------

Smoothbox, Thickbox for mootools

Smoothbox is the Mootools conversion of Thickbox, a script running on JQuery.
For the description and the features, you can go to ThickboxÃ¢â‚¬â„¢s website, as they are basically the same.
Slimbox, the ultimate lightweight Lightbox clone

---------------

subModal

---------------

Suckerfish HoverLightbox Redux

---------------

SWFbox v1.2

SWFbox is a lightweight JavaScript file to present flash files as pop-ups on a page, pretty much like Lightbox does for images. Each SWFbox is dependent only by the id of the parent div (the swfName variable). That way you can have more than one SWFboxes in any page.

SWFbox v1.2

---------------

ThickBox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

ThickBox

---------------

TinyBox

TinyBox is an easy to use lightweight JavaScript library for creating modal windows/dialogs in an elegant manner, without using traditional pop-up windows. It can be used to overlay content on the current page (i.e. you can load a page and display it in a box above the current one).

TinyBox

---------------

YUI Based Lightbox - Revisited

---------------

Comments (0) 01.08.2008. 07:01

ajax,javascript and dhtml sliders list

phatfusion - slider

* Horizontal or Vertical options
* snap to steps
* apply transitions to the slide

http://www.phatfusion.net/slider/

Simple images slider to create Flickr-like slideshows

a simple way to implement a Flickr-like slideshow ("image carousel") and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.

http://woork.blogspot.com/2008/03/simple-images-slider-to-create-flickr.html

Unobtrusive Slider Control Revisited

The slider is created using DIV elements, which means that only browsers that support the extending of DOM elements with a tabIndex (for the purposes of making them keyboard accessible) will be able to catch both the focus & blur events on the DIVs in question (currently Internet Explorer and Firefox/Mozilla).

http://www.frequency-decoder.com/2007/09/10/unobtrusive-slider-control-revisited

Photo Slider Tutorial

Requirements

jquery
photoslider.js
photoslider.css
Very basic knowledge of html & javascript

http://opiefoto.com/articles/photoslider

Accessible News Slider

Accessible News Slider is a JavaScript plugin built for the jQuery library.

http://www.reindel.com/accessible_news_slider/

Yahoo! UI Library: Slider

The Slider component is a UI control that enables the user to adjust values in a finite range along one or two axes. Typically, the Slider control is used in a web application as a rich, visual replacement for an input box that takes a number as input. The Slider control can also easily accommodate a second dimension, providing x,y output for a selection point chosen from a rectangular region.

http://developer.yahoo.com/yui/slider/index.html

Fireworks.js

Fireworks.js is a bit of Javascript that creates starburst-type explosions in a web document; in short, it's a fireworks effect someone could theoretically use on their site. And come on, who doesn't want something like that? As far as appropriateness is concerned, this effect could be compared to the dripping-blood-line, skull and fireball animated .GIF images so popular on the web in 1997. Exploding firework animations are hot, the new black, the script equivalent of the blink tag. Mmm, blink tag.

http://www.schillmania.com/projects/fireworks/

Slider Gallery

This 'product slider' is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.

jQuery already has the plugins to create these effects so we don't have to go about creating them ourselves from scratch.

http://jqueryfordesigners.com/slider-gallery/

2J News Slider - Joomla Ajax Slider

This extension it's very flexible and useful tool for every joomla website, which make you able to build animated front end section (with 2JNewsSlider module, plugin/mambot and component).
2JNewsSlider component reading content articles from Joomla category and showing them at front end 2JNewsSlider module, inside Joomla content article (with 2JNewsSlider mambot/plugin) or using direct link to 2JNewsSlider component. 2JNewsSlider building slides from the intro text of articles (with headline and images).

http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,4415/Itemid,35/

DHTML Widget : Inline Range Slider

Test with

IE 5.5
IE 6
Firefox 1.5
Opera 9
Opera 8.51
Safari 2.0 (buggy, fix it if I have spare time)

http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,4415/Itemid,35/

Ajax Image Sliders Part 2: Intervals with On Demand

The Interval Method
This method requests a series of images from the server, at a set interval along the entire slider. These images are requested as the page is loading, new requests are made when the slider has finished moving. The pre-loaded images are stored in their own image tags, hidden and shown when needed. This is along the same lines as many image pre-load scripts that were used for rollovers, many years ago.

http://www.atalasoft.com/

MooTools - Mootools Slider

The Slider-Plugin allows you to drag&drop a knob inside an element to set a value within a certain range.

http://demos.mootools.net/Slider

Slider Using PHP, Ajax And Javascript

Have you been searching for the slider script and implementing it in Ajax with PHP then you are in the right place buddy.Here is the post for you in which I’ve implemented javascript slider to work in Ajax using PHP. Ok let’s Begin it by creating the following tables in the database. Here is the mysql code to create the table named “tbl_slider” in database.

http://roshanbh.com.np/2008/01/slider-using-php-ajax-and-javascript.html

A quick update to Coda-Slider: unique classes for navigation tabs

Now you can target individual tabs and give each one a different look. In the new demo, you’ll see that I just used different background colors to illustrate this feature, but of course you can use images if you like.

http://www.ndoherty.com/blog/category/coda-slider

jQuery Multimedia Portfolio

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html?lang=en

Ultimate JavaScript Slider and Scroller

This versatile and lightweight JavaScript clocks in at less than 3.5kb unpacked. The above example is one of four scenarios I have demonstrated on the demo page.

http://www.leigeber.com/2008/05/ultimate-javascript-scroller-and-slider/

Aug df Javascript Smooth Scroll

We are again back with another interesting miniature javascript called the “df Smooth Scroll“. This script is also one of the smallest Smooth Scrolling Javascripts after our Simple Accordions.

http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/

jQuery.SerialScroll

This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, also combined.

http://flesler.blogspot.com/2008/02/jqueryserialscroll.html

jQuery.SerialScroll

Smooth Scroll by Dezinerfolio

http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html

Easy Scroll: Accessible Content Scroller

Easy Scroll is capable of scrolling any type of content by using unobtrusive JavaScript. It has up and down scroll options and reset button that places your content in the default position.
It also features double speed. When buttons are rolled over, slow scrolling starts. When buttons are pressed, speed increases.

http://cssglobe.com/post/1495/easy-scroll-accessible-content-scroller

Scrolling Div Content with Graphical Scrollbars

DYN-WEB's scrolling code (formerly called scrolling layers) has been around for several years. This freshly updated code (version date: April 2008) has been streamlined and new features have been added, such as mousewheel support, unobtrusive event handling, accessibility features, and dynamic update capability.

http://www.dyn-web.com/code/scroll/

Scrollable content II

We derived our idea for this script from MrShowBiz (now retired), which used a similar setup on its front page to display news headlines. Display content in a confined area. Users can then view the entire content via the automatic scroll up/down functionality. Compatible with all DHTML browsers (IE4+, NS4, NS6), this is a great script to compact and add a touch of interactivity to portions of your page.

http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

Pamoorama

Pamoorama is a simple script that aims at spicing up your panoramic image a little bit. It quite small in size (5kb) and requires MooTools (required MooTools module will be listed below). No CSS file, barely any html..

Basically what it does is to show only a part of your fullsize image. The image can then be scrolled by moving the mouse over it. Pamoorama will also display a small thumbnail of your panorama with a small window/frame so you can see which part of the image is visible right now. Dragging this little window is also possible!

http://www.silverscripting.com/pamoorama/index.php

Mootools CSS Styled Scrollbar

This is an example how to make your own styled scrollbar using Mootools

http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/

jsScrollbar

jsScroller is an instance of jsScroller.js, scrollbarContainer is the element that contains all the components for the scrollbar, auto is a boolean value that when set to true makes the whole scrollbar disappear when the content doesn't fill up the whole area and when set to false makes just the handle disappear, and eventHandler is a function that can change the look fo the scrollbar components when they are clicked on and such. This will be discussed a little later in the tutorial.

http://www.n-son.com/scripts/jsScrolling/jsScrollbar.html

Comments (1) 20.07.2008. 14:15

jQuery Interactive Date Range Picker with Shortcuts

jQuery UI's Datepicker, created and maintained by jQuery UI contributor Marc Grabanski. Our version is optimized for quickly selecting a date from a list of preset dates/ranges, and smooth transitions when additional options are revealed.

ur modifications to the original date picker include:

shortcut links to preset date ranges, for example, "Past 30 days" or "Current YTD,"
links to "All dates before..." and "All dates after..." to simplify selecting a range of values where the data set is very large or the high or low end value is an unknown, and
only showing the number of calendars needed for choosing a particular range (i.e., you only need one calendar to choose "All dates before...", but you'll need two to select a custom range).

http://www.filamentgroup.com/lab/jquery_interactive_date_range_picker_with_shortcuts

Comments (0) 17.06.2008. 21:27

Vista-like Ajax Calendar version 2

The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by using the mootools javascript framework, AJAX, XHTML, CSS and PHP.

This Vista-like Ajax Calendar script is licensed under the Creative Commons Attribution- NonCommercial 3.0 License. You can use these files however you want.

http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html

Comments (0) 16.06.2008. 18:24

The ultimate password strength meter

What makes a strong password? This quick and dirty password strength meter is meant to help users learn how to create stronger passwords. Because it's written in Javascript the password is never sent over the network. Feel free to audit the code and recommend some better regular expressions, weightings, or bug fixes by submitting a comment.

http://ajaxorized.com/the-ultimate-password-strength-meter/

Comments (0) 04.06.2008. 11:57

<< First < Previous [1 / 13] Next > Last >>

Spread the word!

	Subscribe to this site




Subscribe via EMAIL We respects your privacy. We never sell, rent, or trade your email address to other companies.

Why This Site?

Web-developers have written many articles about php,ajax,css,javascript,dhtml and DOM, and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time.Here in this site you will find a list of techniques we , as web-architects, really could not live without. They are essential and they indeed make our life easier. Let's take a look at all category techniques you should always have ready to hand if you develop web-sites.