Slideshow, portfolio, gallery applications

building responsive image carousel

if you are planning to build a product carousel like the one featured on our loomdeflorence seat showcase, stick to jquery. Jquery has several plugins that build image carousel, and among them  some are responsive, which means that they will behave not too badly on a touch screen device like smartphones

Jquery accordion stripes sliders

Accordion sliders display all images in a row, the main image being displayed while others are partially cropped, making a visual effect that  we like : 

WordPress plugin : ken burns full screen HTML5

We like the HTML 5 css animations, and the codrops tutorial give a first insight into a bright future for webmasters, via  a technology that involves  almost only css coding / harsh coding though. Anyhow I provide here a plugin for wordpress that will perform two tasks

  • shortcode [wbKenBurnsFullScreen] : displays post images as full screen background with ken burns effect
  • shortcode [wbKenBurnsFullScreenRandom] : displays images selected as 'random' and creates the full screen background effect, taking image parent  post as title and link

For the moment, it is the random code that works best as it automatically selects 4 images from media library, which is the best count of images for the effect I provide, directly inspired from the codrops tutorial.

Technically the plugin also provides additional field for images (screenshot below from erwan-foto.com)

DOWNLOAD : [download id="10"]

 

jquery drag and drop image upload

It's been a long time since we haven't seen a swfupload new version. The famous flash plugin that simplifies file upload for the user is a complex but widely used method of enabling long and multiple file uploads. Another  version of the user friendly file upload that replaces the standard browser upload is the jquery based uploadify, that we're going to test one of these days. And recently, with google mail showing off with the very efficient drag and drop upload system for file attachment, various implementations of drag and drop file upload have occured, the latest one from a jquery perspective , works on HTML5 browsers such as firefox and chrome. Known as the droparea juqery plugin, it is demonstrated on goker cebeci's development website.

Code Igniter opensource projects

w-script is a nice example of how a good development framework like codeigniter can deliver solid applications. W-Script is a simple wall paper script that comes free opensource with many functions, one them is the color indexing that allows searching colors in pictures.

http://www.wallpaperscript.net/

Create, publish, enjoy : this is the  mission line of ionize CMS, built entirely around Code Igniter, looks very promising as it comes with basic features : drag & drop pages tree, media navigator, permissions...

http://ionizecms.com/

Prestashop, how to transfer cart to order manually

Prestashop has a nice feature that allows administrator to view a customer's shopping cart : while the shopping cart is relatively easy to use for novices, the number of steps involved in completing the transaction can discourage some users, who might be tempted to ask you for help. What can you do apart from helpinog the guy to fill in forms ? The technique below illustrates how to simulate a payment using the Cheque payment type, via the creation of a hard coded validation page. Be careul, this is for good PHP coders only as you have to interfere with low level classes from Prestashop.

  1. go to Modules / cheque / validation.php and duplicate the file to validationManual.php
  2. Paste the  code blow under the includes  to instanciante the shopping cart using the ID of the shopping cart you want to transfer to an order, here we have the id 9304
  3. change the currency id to reflect the currency you want to use, you'll find the currency id in the currency module of the prestashop administration interface
  4. call the module/cheque/validationManual.php from the browser, s if it was called after a valid paymen
  5. Go to Prestashop administration interface to check that the order has been created
  6. you might be wise to try to place a new order for testing that the manual process has not disturbed prestashop's database integrity
    // 1 . get currency ID
    $currency = new Currency(1);
    // 2 get cart id
    $cart = new Cart( 9304);
    $total = floatval(number_format($cart->getOrderTotal(true, 3), 2, '.', ''));
    $mailVars =    array(
    '{cheque_name}' => Configuration::get('CHEQUE_NAME'),
    '{cheque_address}' => Configuration::get('CHEQUE_ADDRESS'),
    '{cheque_address_html}' => nl2br(Configuration::get('CHEQUE_ADDRESS')));
    
    $cm = new Cheque();
    $cm->validateOrder($cart->id, _PS_OS_CHEQUE_, $total, $cm->displayName, NULL, $mailVars, $currency->id);
    $order = new Order($cm->currentOrder);

Jquery table to graph

jquery-visualize1

The new jQuery plugin  "visualize" demonstrates usage of a specific technique that renders visual graphs (pie charts, bars, area, lines) from HTML table data. The process uses JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. It  is particularly useful because the data for the visualization already exists in the page in structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology. Also the port to Jquery is particularly simple as it is accessible to HTML generated tables, which is most common. The only drawback for this method would be the CPU power required to render large sets of data. But there is a workaround in the form of data aggregation if the origin is SQL based.

Create sample screen of your apps in minutes

Application developpers like to illustrate the process and layout of the work they are planning. Customers like to have a visual sample of what's coming, and that's exactly the kind of step that clarifies discussions when negociating work and contracts.  Balsamiq mockups is a basic ilsutration application  that you can use to very quickly build a UI mockup. A lot of softwares do that, wbut this one is rellay simple to use and very light to install, the free version is actually browser based ! Mockup below took approximately... 15 minutes !

gestionlocative

Dynamic Maps : Google Maps, MSN Maps or OPENLayers

If you've been working on maps publishing for websites, you might have considered one of these alternatives:

  • buy vector format maps and publish them as images with the azppropriate information. this example on ecolopop.info also implements a hand coded image map : this is a lot of work but produces a unique version of the map that reinforces your web site's graphics.
  • use a free online amp provider such as google Map. Very useful for adress positionning : I use it on ecolopop.info for specific business locations. Google Maps in unbeatble at finding stuff from alphanumeric coordinates : if you happen to have a large database of adresses, Google Map will find them for you on its maps
  • OpenLayers is a JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a (still-developing) JavaScript API for building rich web-based geographic applications, similar to the Google Maps and MSN Virtual Earth APIs, with one important difference -- OpenLayers is Free Software, developed for and by the Open Source software community.
    OpenLayers is a project of the Open Source Geospatial Foundation.

    Furthermore, OpenLayers implements industry-standard methods for geographic data access, such as the OpenGIS Consortium's Web Mapping Service (WMS) and Web Feature Service (WFS) protocols. Under the hood, OpenLayers is written in object-oriented JavaScript, using components from Prototype.js and the Rico library.

Nice unproductive experience : test multiple gallery scripts at once

silverstripegallerylightboxWe are quite proud here that our months old specific jquery gallery script for silverstripe -the best PHP opensource CMS  as of today, just out with a new release- is still, in my opinion, the best we could deliver to customers. In the meanwhile a troup of well intentioned contributors posted their own implementation of gallery for silverstripe cms : one of them is Aaron Carlino who has worked on upload scripts  that are very interesting for the customer experience. On Carl's gallery script, the image upload, ordering and labeling are all administered from the web site front end, which is nice. But also the gallery script he provides comes with 7 variations of the famous lightbox : in the admin you can  just choose between lightbox, shadowbox, thickbox, nyromodal, prettyphoto and fancybox, and once saved and/or published online; the front end will load the chosen lightbox variation. Interesting to try, not very useful for a customer who doesn't care which script is being used once it's properly configured.

Zoom and pan with Flash

flasshopanusing images to display products on e commerce applications can successfully be combined with jabvascript lightbox, itself including a flash zoom and pan application : flashden provides a few examples of commercial applications for a very reasonable price (10$ for this one), among which the XML configuration is an interesting way of configuring various parameters such as position of controls, initial zoom percentage and alignment, Easing value. Equally interesting is the free fla source code provided by  Kirill Edelman on his blog, that will give you a few keys if you want to investigate how everything works from the inside.

jQuery Parallax

diagram_parallax

Another example of useless feature that could become very useful when a critical mass of web geeks start using ti for specific image display : the jquery parallax plugin order images or elements to respond to mouse effects with a 3D effect. Stunning effect for the display of 3d Landscapes, such as displayed on the plugin homepage, or letter 3D movement, as illustrated in this example. The stephband.info author's website demonstrates a powerful implmeentation of this plugin.

Silverstripe : tinymce improvements for image handling

The image button on the tinymce instance of silverstripe html text fields is really nice and well layed out : it gives editors one of the best text / image integration, with a minimum user actions that's both powerful, intuitive, and reactive thanks to AJAX calls to the folder structure.

One small drawback is that it comes with one small feature that can be annoying at times, especially when you're looking for inserting images without resampling them, especially for transparent images or tight image integration / quality that Silverstripe resampling functions (PHP based) cannot match (check out the original image hack).

Image size limit feature

In silverstripe, when you select a big image, width and height are automatically resized to a maximum of 600 pixels. Quick hackers might want to deactivate this feature by commenting the resize algorithm in cms/code/ThumbnailStripField.php (lines 73/80 of 2.3 rc2).

But for those who want the best of both worlds (enjoy limitation AND allow original size), here is a hack that will allow editors to choose between the limited image size (max 600, very useful for huge uploads straight from high definition camera) and the original size (very useful for reasonable image size, like example here of 800). Next trick would be to allow editor to type in width and height with automatic calculation of the image proportion. We're getting closer to photoshop indeed.

Read more

Jquery popeye : galleries, differently

The popularity of javascript lightboxes has spread over the internet and no serious webmaster could think of displaying images without a specific thumbnailer and / or a dynamic slider of popup. The author of jQuery.popeye had  seen enough lightboxes and decided to implement his own box that features the advantage of being integrated like an image, with comments written below and navigation buttons.

Instant image effects from Javascript

We have collected 2 javascript image addons that perform nice enhancements or animations on simple images

  • Instant js is a  javascript library that adds visual effect to any image, just via a style sheet attribute. Wonderful and simple light javascript effect that saves you either photoshop or server processing time. link : http://www.netzgesta.de/instant/
  • For Jquery addicts, here comes another nice effect : we call it  SlideText Gallery and it features a nice  image rollover that displays the alt text. Implemented for Silverstripe CMS experts (download zip for HasManyFileManager module),  inspiration : Kyanmedia.

Ken Burns effect : 3 solutions for smooth image transition

Remember MonoSlideShow ? It's worth its price but is being challenged by 2 javascript alternatives. Mootols and Jquery respectively handles nice image transitions with Ken Burns effect (Zoom-Translation combined movement) ,  via their SlideShow Class (Mootols) and CrossSlide plugin (Jquery). While the latter seems lighter, it offers the nice programmatic syntax to define exactly the level of zoom and time of transition for each image. The former has more options, such as a controller that mimics Monoslideshow's own mimic. The fact that these two alternative to a flash commercial applet might decide you to make a smart choice between them ?