WebAppers » Galleryhttp://www.webappers.com - Hunting the Best Open Source Resources for Web Developers Fri, 19 Mar 2010 07:01:23 +0000 http://wordpress.org/?v=2.8.6 en Presentation Cycle with a Progress Barhttp://www.webappers.com/2010/03/17/presentation-cycle-with-a-progress-bar/ http://www.webappers.com/2010/03/17/presentation-cycle-with-a-progress-bar/#comments Wed, 17 Mar 2010 07:01:33 +0000 Ray Cheung http://www.webappers.com/?p=2620 Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements. Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.

Gaya Design has written a tutorial explain how to implement this on your web page and give you some tips on how to adjust the looks of the cycle elements and progress bar.

presentation-cycle

Requirements: jQuery Framework
Demo: http://www.gayadesign.com/scripts/presentationCycle/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/03/17/presentation-cycle-with-a-progress-bar/feed/ YoxView – A Free jQuery Image Viewer Pluginhttp://www.webappers.com/2010/02/23/yoxview-a-free-jquery-image-viewer-plugin/ http://www.webappers.com/2010/02/23/yoxview-a-free-jquery-image-viewer-plugin/#comments Tue, 23 Feb 2010 07:01:40 +0000 Ray Cheung http://www.webappers.com/?p=2501 YoxView is a free image viewer for websites. It’s written in javascript using jQuery and is available as a jQuery plugin. YoxView is inspired by Lokesh Dhakar’s Lightbox. Like it, YoxView displays images above the website’s content, as a separate layer.

Users always see the whole image, even on small screen resolutions or resized windows. Images smaller than the browser’s window are displayed at their original size, larger images are resized to fit. Images are loaded in the background, to improve the viewer’s performance and shorten wait times for users. Forward caching continues while viewing images.

yox-view

Requirements: jQuery Framework
Demo: http://www.yoxigen.com/yoxview/
License: MIT License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/02/23/yoxview-a-free-jquery-image-viewer-plugin/feed/ Automatic Image Rotator with CSS and jQueryhttp://www.webappers.com/2010/02/15/automatic-image-rotator-with-css-and-jquery/ http://www.webappers.com/2010/02/15/automatic-image-rotator-with-css-and-jquery/#comments Mon, 15 Feb 2010 07:01:23 +0000 Ray Cheung http://www.webappers.com/?p=2447 With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, SohTanaka believes it is wise to build simple widgets like the image slider using HTML / CSS / Javascript, and leave more interactive applications for flash if needed.

Therefore, SohTanaka has built an Automatic Image Slider with CSS and jQuery. This html based image slider will have its benefits with SEO and will also degrade gracefully for those without Javascript enabled.

image-rotator

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/image-slider/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/02/15/automatic-image-rotator-with-css-and-jquery/feed/ jQuery PhotoShoot Plugin Simulates Camera-like Effecthttp://www.webappers.com/2010/02/09/jquery-photoshoot-plugin-simulates-camera-like-effect/ http://www.webappers.com/2010/02/09/jquery-photoshoot-plugin-simulates-camera-like-effect/#comments Tue, 09 Feb 2010 07:01:43 +0000 Ray Cheung http://www.webappers.com/?p=2430 The jQuery PhotoShoot Plugin gives you the ability to convert any div on your web page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.

Each time you click the area, a new shot is added to the slide div with a negative margin to the right. After this an animation starts, which slides it in view and pushes the other shots to the left, hiding the leftmost one. You can freely use the techniques and build upon the code. There are many possible uses especially in navigation systems and promotional sites.

jquery-photoshoot

Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2010/02/photo-shoot…
License: MIT License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2010/02/09/jquery-photoshoot-plugin-simulates-camera-like-effect/feed/ Roundabout jQuery Plugin with 9 Additional Movementshttp://www.webappers.com/2009/12/28/roundabout-jquery-plugin-with-9-additional-movements/ http://www.webappers.com/2009/12/28/roundabout-jquery-plugin-with-9-additional-movements/#comments Mon, 28 Dec 2009 07:01:32 +0000 Ray Cheung http://www.webappers.com/?p=2194 Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.

Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers nine additional movements. Like its Roundabout companion, Roundabout Shpaes is released under the BSD license.

jquery-roundabout

Requirements: jQuery 1.2.3+, 1.3.x or 1.4.x*
Demo: http://fredhq.com/projects/roundabout/
License: BSD License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/12/28/roundabout-jquery-plugin-with-9-additional-movements/feed/ Simple & Easy Interactive Featured Items Widgethttp://www.webappers.com/2009/12/11/simple-easy-interactive-featured-items-widget/ http://www.webappers.com/2009/12/11/simple-easy-interactive-featured-items-widget/#comments Fri, 11 Dec 2009 07:01:55 +0000 Ray Cheung http://www.webappers.com/?p=2119 Feature List is a simple jQuery plugin that enables simple and easy creation of an interactive “Featured Items” widget. The size is less than 2k. And it is reusable on multiple containers and work as a slideshow. Feature List can be styled easily with custom HTML/CSS too.

This plugin is managed to implement quite quickly. The script requires two arrays of items – for tabs and output. When user clicks on one of tab the script finds corresponding output item by index and starts fading.

feature-list-jquery-plugin

Requirements: jQuery Library
Demo: http://jqueryglobe.com/labs/feature_list/
License: MIT License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/12/11/simple-easy-interactive-featured-items-widget/feed/ Floom – Blinds Effect MooTools Slideshowhttp://www.webappers.com/2009/11/16/floom-blinds-effect-mootools-slideshow/ http://www.webappers.com/2009/11/16/floom-blinds-effect-mootools-slideshow/#comments Mon, 16 Nov 2009 07:01:02 +0000 Ray Cheung http://www.webappers.com/?p=1955 Floom is a Blinds-effect MooTools Slideshow. There are two ways of setting Floom up. One is the object way, where you specify the image url and the caption using the key-value notation. The second one is by simply passing a element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection.

mootools-slideshow

Requirements: Mootools Framework
Demo: http://nouincolor.com/floom/1.0/Demos/
License: MIT License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/11/16/floom-blinds-effect-mootools-slideshow/feed/ CU3ER – 3D Transitions Image Slider in Flashhttp://www.webappers.com/2009/10/15/cu3er-3d-transitions-image-slider-in-flash/ http://www.webappers.com/2009/10/15/cu3er-3d-transitions-image-slider-in-flash/#comments Thu, 15 Oct 2009 07:01:54 +0000 Ray Cheung http://www.webappers.com/?p=1801 CU3ER is an image slider initially conceived to create 3D transitions between slides, turned out to be a convenient and multifunction solution that can be applied in a range of website building areas, from content slider to feature slider and image & banner rotator.

If you’d like to experience more creativity in web development, are striving to more visually appealing content, and prefer to have even more unique image transitions on your websites, try the CU3ER. You can use CU3ER free of charge for your personal and/or commercial projects.

3d-rotate-slider

Requirements: Flash Player 9+
Demo: http://www.progressivered.com/cu3er/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/10/15/cu3er-3d-transitions-image-slider-in-flash/feed/ Create Beautiful Thumbnail Hover Effect using Mootoolshttp://www.webappers.com/2009/10/13/create-beautiful-thumbnail-hover-effect-using-mootools/ http://www.webappers.com/2009/10/13/create-beautiful-thumbnail-hover-effect-using-mootools/#comments Tue, 13 Oct 2009 07:01:42 +0000 Ray Cheung http://www.webappers.com/?p=1792 Thumbnails of photos is very common part of any website. We have seen a lot of innovation and beautiful representation of thumbnails. Recently Nitin Hayaran has demonstrated how to create a beautiful hover effect on thumbnails using Mootools.

Beautiful Thumbnail Effect is just a demo of the possibilities. One can use the same technique to show the Title of the Image or RunTime and Title of Video Thumbnail.

mootools-thumbnails

Requirements: Mootools Framework
Demo: http://www.nitinh.com/static/Thumbnails/index.html
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/10/13/create-beautiful-thumbnail-hover-effect-using-mootools/feed/ AnythingSlider – The Functionality of All Kinds of Sliders In Onehttp://www.webappers.com/2009/08/24/anythingslider-the-functionality-of-all-kinds-of-sliders-in-one/ http://www.webappers.com/2009/08/24/anythingslider-the-functionality-of-all-kinds-of-sliders-in-one/#comments Mon, 24 Aug 2009 07:01:15 +0000 Ray Cheung http://www.webappers.com/?p=1673 AnythingSlider is an attempt at bringing together the functionality of “featured content” slider, “start/stop slider“, “moving boxes“ and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is a plugin, which makes implementing it and customizing it much easier.

It supports Auto-playing (start playing or stopped). Pauses autoPlay on hover is optional. Each slide has a hashtag (can link directly to specific slides). Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide).

Anything Slider

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/AnythingSlider/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/08/24/anythingslider-the-functionality-of-all-kinds-of-sliders-in-one/feed/