Ajax Image Galleries & Lightboxes
- Minishowcase
Minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX/JSON that lets you put easily your images in an online gallery, without having to configure databases or changing and customising code (though you may do it if you feel so) allowing to have an up-and-running gallery in a few minutes.
- JonDesign’s SmoothGallery
Unlike other systems out there, JonDesign’s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom css selectors. And even better, this solutions is very lightweight: The javascript file is only 16kb.
- Ajax Photo Gallery
The AJAX version of AgileGallery is a free AJAX photo gallery that rips through the XML output from Picasa (a free download from google) and generates DHTML for the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. Since this photo gallery uses AJAX technology, it eliminates the need for any page refresh as the user pages through the photos.
- Pyxy-gallery
Pyxy-gallery is an AJAX image gallery in PHP and JavaScript, which optionally uses lightbox.js. It is designed to be an ultra-light-weight, “drop-in” image gallery.
- zenphoto
Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. It’s got all the functionality and “features” you need, and nothing you don’t. Where the old guys put in a bunch of modules and junk, we put a lot of thought. We hope you agree with our philosopy: simpler is better.
- Couloir.org: Resizing, Fading Slideshow Demo – AJAX Slideshow
This photo slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. The code is offered as-is — Couloir.org offers no technical support. However, you are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons ‘Attribution-ShareAlike 2.0′ License and the license terms contained in the associated, third-party APIs. - Grey Box
A pop-up window that doesn’t suck. GreyBox can be used to display websites, images and other content in a beautiful way. - Lightbox2
Lightbox JS 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. - 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.
- Multifaceted Lightbox
A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box – this means that while the user looks at this focused part of the screen, they can’t interact with the rest of the screen.
- Slightly ThickerBox 1.7
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. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a “rel” attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.) - TripTracker
The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.
- Slimbox, the ultimate lightweight Lightbox clone
Slimbox is a 7kb 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.
- Suckerfish HoverLightbox
The Suckerfish HoverLightbox is a mashup of three very popular Web design techniques blended together to offer a new way of presenting your image galleries.
- Suckerfish HoverLightbox Redux
The Redux has a number of improvements, mostly visual, but some behavioral changes as well. Before going into detail, it’s important to give due credit to those who helped make the Suckerfish HoverLightbox a possibility. - ThickBox 2.1.1
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.
CSS-Based Image Galleries
- A Photograph Gallery
Just a simple :hover over thumbnail images to give a full size view of each photograph. With all but Opera you can also click the thumbnails to retain the image on the screen. Text can be added at the bottom of each picture. Ideal for photograph albums.
- A simple CSS photo-album
The text numbers and images are held in an unordered list without any extra markup (no ‘ems’ or ’spans’ etc). The CSS just styles the text numbers so that they appears in a box and the images so that they are hidden until your visitor clicks a number square.
- Cross Browser Multi-Page Photograph Gallery
Based on Suckerfish HoverLightbox this one uses my multi-page layout system but includes images instead of text. Unlike the Suckerfish HoverLightbox this version is pure CSS.
- CSS Image Gallery
This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS’s “:hover” pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it’s possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn’t support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.
- CSS: Photo Showcase
This experiment uses CSS and basic markup to create a simple way to display photo thumbnails on your site while offering convenient fast zoom viewing, even for dialup users.
- Hoverbox Image Gallery
Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS.
- Photo scroll gallery
A combination of several of my previous galleries to give a scrolling ‘thumbnail’ image, a medium size image on hover and a full size image on click. The thumbnail, medium size and full size images are all the same image just resized using CSS. The thumbnails are square to make the scrolling area simpler to work with. This does make these images a little distorted but not so much that they look wrong.
- Sliding Photograph Galleries
It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are ‘pre-loaded’.This method can be used either vertically, as shown, or horizontally.
JavaScript + CSS-based Galleries & DHTML-Galleries
- xImgGallery – Javascript Image Gallery & Slideshow
This script implements a Javascript image gallery and slideshow – all in one file.
- easyAlbum
A DOM photo Gallery solution that is browser friendly, keyboard friendly, bandwidth friendly and more.
- ImageGal
imagegal is a simple PHP script that will automagically create a JS/CSS/DHTML powered image gallery for you when dropped into a directory containing images. This simple script was inspired by a Jeremy Keith’s article on aListApart.com. - Highslide JS
Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages: No plugins like Flash or Java required. Popup blockers are no problem. The images expand within the active browser window.
- Satellite
Satellite is an all in one photo gallery website that takes advantage of Yahoo Flickr’s image hosting and management tools. You can upload and manage your images using Flickr and host your portfolio on your own server via Satellite. - Dhonishow
Showing Picture Online with Javascript.
40 Powerful CSS Tools And Generators To Automate Your Workflow
Showcase of 40 useful and powerful CSS tools and generators. These tools can really relieve developers work in many ways – I understand you like always to do everything by yourself but it’s not the best way in the most cases, because it really takes time and such liberty we don’t always have.
This is considered to be really complete list about everything CSS related, as CSS lover myself I really evaluate good automated ways so I can focus on things I enjoy the most – creating elegant, usable and optimized website! I just hope you will find some relief in this list as well! Enjoy your time and test these tools for best results!
1. CSS Layout Generator
Showcase of 40 useful and powerful CSS tools and generators. These tools should really relieve web developers work. This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
2. Simple CSS
Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface.
3. Code Beautifier
Formats and optimizes CSS.
4. Clean CSS
CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.
5. CSS Compressor
Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.
6. CSS Superscrub
This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.
7. CSS Validator
The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server.
8. CSS Sorter
CSS Sorter is a free online tool for sorting CSS files. It organizes CSS rules alphabetically so that it will be easier for you to maintain your CSS files.
9. Browser Support of CSS Properties & Selector
This is a list of CSS properties and selectors with the first browser versions that support them. The list includes most CSS2.1 properties and some of CSS3, more will be added as time permits.
10. Layout Generator
Generating multi-column and grid layouts with CSS 2.0 techniques using %, px, or em.
11. Variable Grid System
The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
12. Blueprint Grid Generator
This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.
13. Grid Builder
The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes. Once you’ve got the page layout the way you want it, all you have to do is press “Show Code” and it generates the HTML for you.
14. CSS Menu Builder
Choose from our 300+ horizontal menus, our 700+ vertical menus combinations and our breadcrumb menus that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.
15. CSS Menu Maker
Here you can exploit gallery of professionally designed CSS menus, customize them and then download the HTML and CSS.
16. Jotform
Web-based WYSIWYG form builder
17. Quick Form Builder
Allows you to easily create CSS forms.
18. CSS Button & Text Field Generator
Generates CSS based buttons and text fields.
19. Rounded Corner Generator
Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or JavaScript.
20. CSS Type Set
CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.
21. Typetester
The Typetester is an online application for comparison of the fonts for the screen. It’s primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.
22. Image Replacement Methods
Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them.
23. CSS Frame Generator
This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure – each selector and all of its properties and values in one line.
24. Postable
“I absolutely hate having to switch all the “< ” and “>” signs in my code to “<” and “>”, respectively. I also hate having to write “&” anytime I want to include an ampersand. This makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” Created by Elliot Swan.
25. Slickmap
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.
26. Text Wrapper
The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.
27. Listamatic
Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.
28. CSS Sprite Generator
CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image
29. Colors Pallete Generator
Welcome to CSS Drive’s Image to Colors Palette Generator! Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration. Generates also Photoshop swatches and CSS styles.
30. CSS Table Wizard
Use this wizard to experiment with table border styles and generate style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page.
31. Em Calculator
Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
32. IE6 CSS Fixer
A tool specifically designed to ease the pain of the IE6 CSS debugger. This tool was conceived to decrease the monkey work when starting an IE6 CSS fix file. It applies a series of basic fixes that are known to conquer many problems and cause as little harm as possible.
33. Mappet
CSS image maps generator
34. Sky CSS Tool
Sky CSS allows you to create CSS classes almost without using manuscript code. JavaScript compatible browser is needed for the proper functioning.
35. ReCSS
This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox.
36. CSS Viewer
A simple CSS property viewer. Firefox addon.
37. The Box Office
The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.
38. CSS Evolve
CSSEvolve lets you play with many properties of a web site, including the site’s color scheme, fonts, borders, and more. CSSEvolve works through a process of simulated evolution in which you select site features that you like and refine them through multiple generations.
39. Wordoff
Wordoff applies the following rules to strip the cruft that is pasted into WYSIWYG editors from Word:
- Attributes are removed for all elements except s
- s and
- Empty elements are removed
- Consecutive line breaks are reduced to two
40. CSS Fly
CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the sceneries of your favourite websites.
