WebAppers » Galleryhttp://www.webappers.com - Hunting the Best Open Source Resources for Web Developers Fri, 20 Nov 2009 07:01:22 +0000 http://wordpress.org/?v=2.8.6 en 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/ How to Create An Elegant jQuery Image Galleryhttp://www.webappers.com/2009/07/02/how-to-create-an-elegant-jquery-image-gallery/ http://www.webappers.com/2009/07/02/how-to-create-an-elegant-jquery-image-gallery/#comments Thu, 02 Jul 2009 07:01:41 +0000 Ray Cheung http://www.webappers.com/?p=1599 DreamCSS has written a tutorial explains how to Create Beautiful jQuery sliders with image description and name. The gallery looks so simple but elegant. The text effect it displays the image title and description is very attractive as well.

jquery slider

Requirements: jQuery Framework
Demo: http://dreamcss.comli.com/jquery sliders/
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/07/02/how-to-create-an-elegant-jquery-image-gallery/feed/ Open Source Pageflip Engine Written in AS3http://www.webappers.com/2009/06/25/open-source-pageflip-engine-written-in-as3/ http://www.webappers.com/2009/06/25/open-source-pageflip-engine-written-in-as3/#comments Thu, 25 Jun 2009 07:01:46 +0000 Ray Cheung http://www.webappers.com/?p=1612 MegaZine 3 is an open source pageflip/flashbook engine, written completely in AS3. It generates an interactive book, which can then be flipped through by the user. MegaZine 3 uses a completely dynamic approach, allowing full configuration through an external XML file. This makes it easy to set up books even if you do not even own the Flash IDE.

MegaZine 3 automatically generates a control bar that allows jumping to every individual page. It also generates thumbnails for the pages, to make it easier for the user to find a page again, or getting a first impression.

pageflip engine

Requirements: Flash Required
Demo: http://megazine.mightypirates.de/demo/index.html
License: LGPL License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/06/25/open-source-pageflip-engine-written-in-as3/feed/ How to Create an Infinite Carousel with jQueryhttp://www.webappers.com/2009/06/16/how-to-create-an-infinite-carousel-with-jquery/ http://www.webappers.com/2009/06/16/how-to-create-an-infinite-carousel-with-jquery/#comments Tue, 16 Jun 2009 07:01:23 +0000 Ray Cheung http://www.webappers.com/?p=1604 jQueryforDesigners has added a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. They have published a tutorial which walk through the fundamentals of scrolling carousel, and how they have created jQuery Infinite Carousel.

The trick is building the DOM with the cloned nodes, because we’ve cloned the start of the list to the end of the list, when we scroll off the last items, it looks like we’ve looped back round. Once the animation completes, we change the scrollLeft position back to the real first items.

This scrollLeft isn’t visible to the user since the overflow is hidden, and so it creates the effect of being infinitely sliding from left or right.

infinite carousel

Requirements: jQuery Framework
Demo: http://jqueryfordesigners.com/demo/infinite-carousel.html
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/06/16/how-to-create-an-infinite-carousel-with-jquery/feed/ PhotoDiary with Yellow Sticky Notes in Flash & PHPhttp://www.webappers.com/2009/06/15/photodiary-with-yellow-sticky-notes-in-flash-php/ http://www.webappers.com/2009/06/15/photodiary-with-yellow-sticky-notes-in-flash-php/#comments Mon, 15 Jun 2009 07:01:30 +0000 Ray Cheung http://www.webappers.com/?p=1601 PhotoDiary is a web application which lets you to easily publish a brand new photo blog on the web. The application frontend is built upon Flash technology and data is managed through a dedicated web control panel, developed in PHP.

The interesting thing about PhotoDiary is that users who are viewing your PhotoDiary are able to add comments by putting yellow sticky notes on the photos.

To run PhotoDiary on your own web server, support for MySQL, PHP and GD Library technologies is required. This software is published according to a GNU GPL3.

photo diary

Requirements: Flash,MySQL, PHP and GD Library
Demo: http://photodiary.webgriffe.com/demo/
License: GPL v3 License

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/06/15/photodiary-with-yellow-sticky-notes-in-flash-php/feed/ How to Build a Dynamic Flash Gallery with Slider Controlhttp://www.webappers.com/2009/05/22/how-to-build-a-dynamic-flash-gallery-with-slider-control/ http://www.webappers.com/2009/05/22/how-to-build-a-dynamic-flash-gallery-with-slider-control/#comments Fri, 22 May 2009 07:01:49 +0000 Ray Cheung http://www.webappers.com/?p=1581 Flashtuts has published: Build a Dynamic Flash Gallery with Slider Control. In the tutorial, you will learn how to create a flash gallery which displays all image files in a given directory, with a slider that is used to browse easily through the images.

The flash gallery is still low on functionality. The loaded images all need to be the same size and do not have a larger preview. You could add a resizing function and an option to view a larger preview of the image when clicked. Furthermore, an option to browse left or right with buttons or with a keyboard event could be added.

Flash Photo Gallery

Requirements: Flash Required
Demo: http://besofresh.com/flashtuts/full.html
License: License Free

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/05/22/how-to-build-a-dynamic-flash-gallery-with-slider-control/feed/ How to Create an Image Rotator with jQuery and CSShttp://www.webappers.com/2009/05/06/how-to-create-an-image-rotator-with-jquery-and-css/ http://www.webappers.com/2009/05/06/how-to-create-an-image-rotator-with-jquery-and-css/#comments Wed, 06 May 2009 07:01:11 +0000 Ray Cheung http://www.webappers.com/?p=1567 An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. DesignMag has published a tutorial teaching us how to Create an Image Rotator with jQuery and CSS. It will help you understand how the image rotator works and helps you create your own from scratch.

Do keep in mind these jQuery driven image rotators do not degrade in the best fashion. When you disable JavaScript, each thumbnail must be clicked on to get the larger image (which opens in the same window).

Image Rotator

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

Related Posts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

]]> http://www.webappers.com/2009/05/06/how-to-create-an-image-rotator-with-jquery-and-css/feed/