Home

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 (0) 20.07.2008. 14:15

Online Javascript compressor

Compress and obfuscate Javascript code online completely free using this compressor

http://javascriptcompressor.com/

CreativystÂ® CSS & JavaScript Compressor

http://www.creativyst.com/Prod/3/

Compress Your JavaScript

I have been doing some web applications lately, and wanted to compress my JavaScript files so that page loads are quicker. I looked around for applications to do this, and ended up building my own based off of JSMin. I am releasing it to the public for free usage as well.

http://www.codeandcoffee.com/2006/10/02/compress-your-javascript/

Comments (0) 19.07.2008. 06:48

web design resources -Colors, Graphics, and Icons

COLOURlovers

– COLOURlovers™ is a resource that monitors and influences color
trends. COLOURlovers gives the people who use color - whether for
ad campaigns, product design, or in architectural specification -
a place to check out a world of color, compare color palettes, submit
news and comments, and read color related articles and interviews.

ColorBlender

Welcome to ColorBlender Ã¢â‚¬â€œ your free online tool for color matching and palette design!

To get started, choose a preferred color using the color picker below, and a 6-color matching palette (a "blend") will be automatically calculated.

kuler

AdobeÃ‚Â® kuler is a web-hosted application from Adobe Labs for generating color themes that can inspire any project. Whether youÃ¢â‚¬â„¢re creating websites, interior designs, scrapbooks, fabric patterns, graphic identities, or any visual, you can experiment quickly with color variations and browse thousands of themes from the kuler community.

Colorcombos

Welcome to the world of colors where you're sure to find the perfect color combination for your project. This site was built to help web developers quickly select and test website color combinations.

The heart of the site is the Combo Tester, which allows web developers to see how different color combinations work together on the screen.

Aviva Directory – The Canonical List of Online Color Resources for Designers (updated periodically with neat stuff) Tons of great color tools and resources.

Free Stock Images – All photos on this web site are public domain. You may use these images for any purpose, including commercial. But if some photo contains logos and products you need to be careful. Using someone else's trademark commercially can get you sued.

Photoshop Brushes – Photoshop Brushes, We offer over 500 photoshop brushes all for free, with those kind of numbers why would you search for photoshop brushes anywhere else?

Dry Icons – All icon sets at DryIcons.com are carefully designed and developed by our team of professional web and graphic designers. We designed the DryIcons website to bring your applications the best professional appearance, because we believe that your applications deserve more than just great coding.

Silk Icons – “Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you're sure to find something that tickles your fancy. And all for a low low price of $0.00. You can't say fairer than that.

Mini Icons – “Mini” is a set of 144 GIF icons available for free use for any purpose.

Vector Icons – A collection of 825 vector icons in varying colors.

IconBase – Here you´ll find the best icons from the best artists in the world. The icons here listed belong to the individual authors and companies. They are free for personal and non commercial use. If you are an icon artist and desire to share your work with the world, this is your place.

Perfect Multi–column CSS – Perfect multi-column CSS liquid layouts – iPhone compatible.

Comments (0) 19.07.2008. 06:39

Javascript Library - Rico

Rico is a JavaScript library for creating rich internet applications. Based on Prototype, it includes grids, calendar & tree controls, drag & drop, and cinematic effects. Its object-oriented framework makes it easy to add richness to your web application

http://sourceforge.net/projects/openrico/

Comments (0) 18.07.2008. 07:46

<< First < Previous [1 / 66] 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.