Category Archives: Other Services

WEBSITE STRIPPING EFFECT WITH JQUERY

Here is nice example of how to use the Sexy Curls jQuery Plugin by Elliott Kember. The idea is to show the original sketch of your website. This is done by dragging the page curl to reveal the sketch image “behind” the original website.

For this showcase we used some free website template and created a scaffold image with the Stamp filter in Photoshop. Of course, this is much nicer if you have a real sketch of your page.

If you have a portfolio, this could be a nice effect to show the design or model concepts behind the finished work.

This example does not have a “peel back” option, but you can refresh the page to repeat the effect.

Enjoy !

MICRO IMAGE GALLERY: A JQUERY PLUGIN

In many blogs and news sites images are mostly included as an addition to the content. Space is often limited and therefore we thought of a slick solution to integrate a miniature image gallery that does not occupy a lot of space.

The following jQuery plugin transforms a set of images into a tiny gallery with several options. The Micro Image Gallery allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only. The navigation bar can be hidden and sliding out when hovering over the gallery, or visible. A total of nine thumbnails are shown in the grid preview. The plugin will automatically resize the image according to the chosen gallery size.

THE PLUGIN PARAMETERS

The plugin has the following configuration:

  • menu: Defines if the menu should be visible (true) or just appear when hovering over the gallery (false). The default value is true.
  • size: The size of the image gallery: “small”, “medium” or “large”
  • mode: The initial mode of the image gallery: “single” or “thumbs”

The three sizes of the image gallery define the following picture sizes (maximal height and width):

  • small: 102 pixels
  • medium: 162 pixels
  • large: 222 pixels

HTML STRUCTURE

All images should be wrapped in a div with class “microGallery”:

<div id="mG1" class="microGallery">
    <img src="gallery/2.jpg"/>
    <img src="gallery/3.jpg"/>
    <img src="gallery/4.jpg"/>
    <img src="gallery/5.jpg"/>
</div>

and you can call the plugin:

$("#mG1").microgallery();

IMPROVED MICRO IMAGE GALLERY: A JQUERY PLUGIN

Here’s an improved version of the Micro Image Gallery Plugin. I have added some features as suggested in the comments, specifically the auto play function, the possibility to add descriptions for each image, and the cycle mode. Note that the auto play function can only be set if the cycle option is also set. To add descriptions for the images, just place your text inside the alt attribute of the image tag, like shown further in the HTML Structure section.

THE PLUGIN PARAMETERS

The plugin has the following configuration:

  • menu: Defines if the menu should be visible (true) or just appear when hovering over the gallery (false). The default value is true.
  • size: The size of the image gallery: “small”, “medium” or “large”
  • mode: The initial mode of the image gallery: “single” or “thumbs”
  • cycle: If set to true, the first image will be displayed again when reaching the end of the gallery
  • autoplay: If set to true, the gallery will jump from image to image automatically
  • autoplayTime: The time in milliseconds that it takes to show the next image

The three sizes of the image gallery define the following picture sizes (maximal height and width):

  • small: 102 pixels
  • medium: 162 pixels
  • large: 222 pixels

HTML STRUCTURE

All images should be wrapped in a div with class “microGallery”:

<div id="mG1" class="microGallery">
    <img src="gallery/2.jpg"/>
    <img src="gallery/3.jpg" alt="description comes here"/>
    <img src="gallery/4.jpg" alt="if you leave it empty then nothing will appear in the description container"/>
    <img src="gallery/5.jpg" alt="...and another description"/>
</div>

and you can call the plugin:

$("#mG1").microgallery();

Please note that in IE no rounded borders or box shadows will be shown.

UI ELEMENTS: COMBO BOX, POP OUT AND HORIZONTAL SLIDE OUT MENU

Today we will show you some useful and neat UI elements that are focused on selecting content. We will be using jQuery and some CSS3 properties for the style to give the elements some edge.

The first element is going to be a select box plugin that let’s you create an auto scrolling combo box. The second element will be a popout menu that reveals its items once it’s clicked, and the third one is going to be a vertical slide out menu.

AUTO SCROLLING COMBOBOX


This plugin will transform a select element into a nice looking combo box. You just need to give an ID to the select box and call the plugin like this:

$(function() {
    $('#ui_element').scrollablecombo();
});

MULTIMEDIA GALLERY FOR IMAGES, VIDEO AND AUDIO

This multimedia gallery for images, video and audio is a progression of our previous galleries. The idea for this new gallery is to integrate video and audio as exhibit pieces along images.

We use an XML file for defining the items in the gallery and a PHP class with an XSL Stylesheet to transform the data. The XML file defines the locations of the items and their thumbnails. For video files, we can add more than one source or define a link to a YouTube video.

The structure of the XML file looks as follows:

<?xml version="1.0"?>
<MultimediaGallery>
    <file type="photo">
        <thumb>media/photos/thumbs/3.jpg</thumb>
        <source>media/photos/3.jpg</source>
        <description>this is a description</description>
    </file>
    <file type="video">
        <thumb>media/videos/thumbs/html5.png</thumb>
        <source>http://www.youtube.com/watch?v=siOHh0uzcuY</source>
        <description>Youtube Video: Introduction to HTML5</description>
    </file>
    <file type="video">
        <thumb>media/videos/thumbs/bbbtrailer.png</thumb>
        <source>media/videos/video1.ogg</source>
        <source>media/videos/video1.m4v</source>
        <description>Video Integration Example: BBB Trailer</description>
    </file>
    <file type="audio">
        <thumb>media/audio/thumbs/audio1.jpg</thumb>
        <source>media/audio/audio1.ogg</source>
        <source>media/audio/audio1.mp3</source>
        <description>Audio Example</description>
    </file>
    ...
</MultimediaGallery>

Once a thumbnail is clicked, we can navigate through the previews and see the descriptions (that can optionally be added to the configuration XML file). Images get resized automatically to the size of the user’s viewport. We also resize the thumbnails to fit into the grid elements.

For displaying video and audio we are using jMediaElement which is an HTML5 audio and video development kit with Flash and VLC Fallback.
Please be aware that for non-embedded videos and audio files to be played in every browser, each necessary format needs to be added.

We hope you enjoy this gallery and find it useful! Stay tuned for updates!