WebDev3000 » Components

Gradually

Codrut Nistor — Thu, 06 May 2010 08:15:25 +0000

These days, online multimedia content seems to grow at a scary rate. As long as we’re talking about original work, I don’t think “scary” should find its place in the previous sentence, but things are quite different, unfortunately, because this growth comes with a proportional growth of plagiarized content. Oh, well, you win some, you lose some, but as long as images are nicely displayed as a slideshow, one may overlook the fact they can be seen on 2345 websites…

Today, I’ll tell you a few words about a Gradually, a rather simple MooTools image slider, one that allows you to display the images using a certain order, as well as to display informative text for each of them. Even better – and exactly as I was expecting – this piece of code is free to use, being available under the terms of the MIT License.

Gradually uses the HTML5 canvas element to create a pretty cool transition effect (nothing out of this world, anyway, but I’ve surely seen a lot of less interesting effects so far), requiring an unordered list of images and employing the alt tag value to display the informative text. To find out more about it… be sure to check the link mentioned earlier!

Compatibility: all major browsers, but IE requires excanvas – at least for now…

Moa

Adrian — Thu, 10 Sep 2009 19:50:39 +0000

If you want to integrate a image gallery into your personal website or a small company website, you can easily use a free image gallery website system. One of the best image gallery website system I have ever seen is Moa.

Moa is written in PHP and uses MySQL for data storage. Moa is not intended for people who want comments or ratings and it doesn’t require registration or login usernames. Moe is for people who want to share on their website their pictures from holidays, pictures wih their family and other personal photos.

With Moa you can create galleries and sub-galleries. Also you can put your photos into galleries based on keyword tags. You don’t need to make the thumbnails because Moa generates them automatically. In the admin panel you can check for corruption and lost or un-tagged images.

Moa allows a hierarchical gallery structure and allows images to appear in more than one gallery without re-uploading. Galleries can be made and will auto-populate with any images that have matching tags. Because Moa was created for users with basic needs, adding, editting and deleting galleries or images is easy.

Moa is released as Open Source under the zlib/libpng license. Download Moa from here. The creator of the script put on his website a Live Demo of Moa, so you can try it before you download it.

Compatibility: MySQL 5.0.1 or higher, Apache 2.0 or higher, PHP 5.2 or higher, PHP extension – gd2, PHP extension – mbstring

AnythingSlider

Codrut Nistor — Wed, 19 Aug 2009 05:31:37 +0000

To be honest, I love image gallery scripts, but when I want to watch various images on the Web, I like keeping things as simple as possible. When I say “as simple as possible,” that means image transitions and Flash- or Java-based image galleries are a no-go, but…

… it all becomes pretty interesting when we look at AnythingSlider, a jQuery plugin created to display not only images, but any kind of HTML content. Before I tell you a few words about the features, just take a look at the demo, all right?

Good… now, here’s what AnythingSlider has to offer, in case you didn’t check the demo properly: dynamically added navigation tabs, next/previous arrows, custom function for formatting navigation text, autoplay, autoplay pause on hover, as well as hashtagged slides with the advantages you get from this (can link to specific slides or have multiple sliders on a page).

Since it’s free to use and looks pretty good, if you think that AnythingSlider can get your job done… go for it!

Compatibility: all major browsers, but only as long as JavaScript is enabled, of course

Plogger

Codrut Nistor — Tue, 18 Aug 2009 11:40:06 +0000

While “Plogger” sounds like a Blogger wannabe, things are completely different. Anyway, since I don’t like to judge things only taking the name and visuals into account, let’s take a closer look at this open source photo gallery known as Plogger, shall we?

With over 50,000 downloads so far, Plogger claims to belong to “the next generation in open-source photo gallery systems” while offering a very straightforward design and succeeding in remaining very easy to setup and use.

Integrating it into a website is nothing more than “inserting three lines of PHP code,” but this 388kb piece of code comes with all the goodies a basic-average photo gallery needs: a template-based theme system, a full XML generator, multilanguage support, image description fields, automatic thumbnail generation, and even more!

Since you don’t have to believe without seeing, here’s the demo gallery. Now, you know all you need to be interested in trying it for yourselves… or not.

Compatibility: all major browsers, at least that’s what it seems after trying the demo in Firefox, Opera, Chrome and IE

dfGallery

Codrut Nistor — Fri, 07 Aug 2009 16:34:00 +0000

One of these days, I will go out and start shooting. No, I am not crazy – I’ll take pictures, I won’t shoot anyone! Anyway, guns are illegal here, so we’ll stick to a bunch of images being displayed in a browser. Obviously, it’s about a free Flash image gallery, as you can see below…

… and its name is dfGallery, currently at version 2.0. Requiring only the Apache rewrite module with PHP 5+, php_json and php_curl extensions to be in place on your server, this free Flash gallery comes with a bunch of features, like customizable layout (custom themes/PNG skins), Flickr/Picasa gallery loading, AJAX & Multiple Image Uploads, background music… and it doesn’t stop here!

I don’t know what else there is to say, since the official page should say it all. By the way, the test image gallery with 3D chicks is awesome, you really need to check it out… and see how dfGallery works, too, in the process.

Compatibility: all major browsers, as long as you have the Adobe Flash Player installed and working properly

AD Gallery

Codrut Nistor — Tue, 04 Aug 2009 09:33:01 +0000

Today it seems we’re flooded with image galleries, and I don’t think this is something bad. After all, the Internet wouldn’t be what it is today without its multimedia component, so I am sure you won’t be angry because I decided to bring AD Gallery into the spotlight!

To make things as clear as possible, I should only say that AD Gallery is a image gallery/showcase plugin for jQuery with a lot of customization possibilities and, as far as I was able to figure out, also freely available to use and tweak to match your needs, since it comes covered by the terms of the MIT and GPL licenses.

Other than the above, you should know that the features list includes keyboard navigation, slide in/fade in effects, image title/description, automatic scale down for the images larger than the container, and so on. Pretty cool, if you ask me… so why not give it a try, huh?

Compatibility: AD Gallery has been tested on Firefox, IE6+7+8, Chrome, Safari and Opera, but I am sure it will also work on browsers like Avant or Flock (in fact I can bet on that, since I tried it on both…)

Monoslideshow

Codrut Nistor — Tue, 04 Aug 2009 07:00:32 +0000

Did I mention the fact that I love slideshows? Probably I did that, but I also hate them, as long as they don’t have pause and zoom features. This time, it’s all about a slideshow/image gallery script that has pause, as well as the ability to display a thumbnails gallery of all images available. Unfortunately, it doesn’t come for free, and it doesn’t have that zoom feature… but at least you can win a license worth 25EUR, if you’re lucky!

WebDev3000 didn’t reach that “givewaway stage,” but we’re working on it. Until that day comes, I think that telling you about the Monoslideshow giveaway currently running on Web Resources Depot can’t hurt… and since you also got that piece of info, let’s take a quick look at this Flash slideshow component, shall we?

With features like professional transitions, Ken Burns effect, and a fully resizeable slideshow window, Monoslideshow is available as an API for both Javscript and Actionscript 3, requiring Flash Player 9 or higher, a text editor, a FTP client, as well as a Website to host it, of course!

Other than the above… I think you should definitely give this piece of code a try, and nothing more.

Compatibility: any major browser, as long as Flash Player is installed and working (just to be sure, you can check the demo)

EOGallery

Codrut Nistor — Thu, 30 Jul 2009 10:02:51 +0000

Ladies and gentlemen, now’s the right time for another image gallery script! What makes me say this? Well, yesterday I messed with some pictures of mine (trying to put some shots together into a HDR image, stuff like that), and that made me think about those thousands people doing the same, and ending up with some shots that need to be nicely shown to the world…

EOGallery is a jQuery-powered image gallery that may not be exactly a product for the masses, polished and nicely documented, but it’s surely one piece of code you should try if you’re looking for something a bit different than the things everybody’s using.

EOGallery takes advantage of Cody Lindley’s Thickbox to display large images, while using the basic jQuery functions for the rest of it all. This piece of code is also XHTML 1.0 strict valid, and “almost” CSS valid…

Unfortunately, this script hasn’t been updated since 2007, so if you think it’s worth using, please spare a few minutes and send a few warm words to the author, maybe he’ll get to it and come up with an improved version.

Compatibility: while it was tested with major browsers like Firefox, Safari, or IE, EOGallery seems to work even with non-JavaScript and/or non-CSS ones, at least according to the official product page…

ColorBox

Codrut Nistor — Fri, 17 Jul 2009 05:13:29 +0000

Considering the fact that we’re in 2009, and not 1995, delivering pictures on your website in a nice outfit is one of those things you shouldn’t miss. After all, with tools like ColorBox around, adding frames or slideshows becomes a real pleasure, so why not go for it?

The idea behind ColorBox is very simple – you have a 9KB worth of JavaScript code jQuery plugin that’s highly customizable and very easy to use, and you allow it to help you add single photos, photo groups, create slideshows, iframed or AJAX content, all by adding a few words to your existing code.

Even more, ColorBox preloads background images to avoid flash of unstyled content when loaded for the first time, while upcoming images in a photo group can also be preloaded.

Released under the terms of the MIT license, ColorBox generates W3C valid XHTML and CSS code, so everything looks more than fine from my point of view. If you see things different, don’t hesitate to drop a comment below, all right? That’s it, folks!

Compatibility: according to the official page, ColorBox has been tested in Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8

MooFlow

Codrut Nistor — Mon, 29 Jun 2009 10:46:36 +0000

Some say that MooTools is the best JavaScript framework in the world, and I can’t disagree with that. On the other hand, I can’t agree with it, either, but it’s surely a pleasure to check so many excellent tools build using it, and today’s piece of MooTools code is a highly customizable image gallery using the notorious coverflow approach…

… namely MooFlow! Coming from Germany, this script allows you to use JSON or HTML with selector-filter as data source when loading images, while its interface can be easily skinned from head to toe using CSS.

MooFlow’s feature list is pretty long, including autoresize on changes of window dimensions, a fullscreen option, mouse wheel or key input scrolling, autoplay presentation loop, JavaScript-powered reflection effect, and even the ability to run multiple instances.

Compatibility: Mooflow works with all major browsers, but requires MooTools, Slider & Asset plugins; to give it a quick try, check the demo… and don’t forget to donate, if you think this piece of code is useful to you!