• Advertising alongside local bussines search result using the GoogleBar that requires your Adsense account be enabled for Adsense for Search
• Advertising based on map viewport using the Maps Ad Unit that requires your AdSense account be enabled for Adsense for Content.

Advertising using the GoogleBar

Adsense using the GoogleBar

var map;
if (GBrowserIsCompatible()) {
    var mapOptions = {
         googleBarOptions : {
                 style : 'new',
                 adsOptions: {
                      client: 'your-publisher-id',
                      channel: 'your-ads-channel-id',
                      adsafe: 'high',
                      language: 'en'
                 }
         }
    }

    map = new GMap2(document.getElementById('map'), mapOptions);
    map.setCenter(new GLatLng(27.6648274, -81.5157535), 12);
    map.setUIToDefault();
    map.enableGoogleBar();
}

Line 06: adsense options:
Line 07: your adsense publisher ID
Line 08: your adsense for search channel (optional)
Line 09: ad safety level (optional)
Line 10: language in which to display results

Advertising using the Maps Ad Unit

Adsense using Maps Ad Unit

var adsManagerOptions = {
  maxAdsOnMap : 2,
  style: 'your-ads-unit',
  channel: 'your-ads-channel-id'
};

var publisherID = 'your-publisher-ID';

adsManager = new GAdsManager(map, publisherID, adsManagerOptions);
adsManager.enable();

Line 01: specify ads options
Line 02: maximum number of ads
Line 03: your ads unit
Line 04: your ads channel id
Line 07: specify your publisher id
Line 09: construct the  GAdsManager object
Line 10: enable ads

Overlay Video

How to Setup

Flowplayer

Follow the instructions in my previous tutorial to setup Flowplayer

JQuery Tools

• Download Overlay component from Jquery Tools download’s page and save it as jquery.tools.min.js. You can download it with jQuery (v1.3.2) as a single file (20.82 kb) or as a separated file (1.59 kb) if you already have jQuery.


Download Overlay Component

• Include the jquery.tools.min.js with in the HEAD section of your HTML

<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>
<script src="scripts/flowplayer-3.1.4.js" type="text/javascript"></script>

or

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>
<script src="scripts/flowplayer-3.1.4.js" type="text/javascript"></script>

How to Use

To overlay a video,   use two div containers, one is for displaying video information (title and duration) and a splash image  as a video’s thumbnail and the second is for overlaying the video. To get thumbnail and duration of a video, you can use mplayer tool as explained here.

Overlay Single Video Player

View Demo

HTML

<div class="video" style="background-image:url(images/splash_01.jpg)">
        <a href="#" rel="#orel">
            <img src="images/play.png" alt="play" title="play" border="0">
        </a>
        <div class="info">
            PMDG Virtual Cockpit
            <span>00:27</span>
        </div>
</div>

<div id="orel" class="overlay"><a href="video/video01.flv" id="player"></a></div>

line 01: container for video information, splash image, play button, and video title and duration.
line 02: trigger button (play button), the button image is inside the a tag that has rel tag (orel) that match with the video overlay container’s id (line 11)
line 11: container for video overlay

CSS

div.overlay {
	z-index:9999;
	padding:40px;
	width:476px;
	display:none;
	background-image:url(../images/gray.png);
}
div.overlay div.close {
	background:url(../images/close.png) no-repeat;
	position:absolute;
	top:2px;
	right:5px;
	width:35px;
	height:35px;
	cursor:pointer;
}
div.overlay a {
	height:370px;
	display:block;
}
div.video {
	height:150px;
	width:200px;
	border:2px solid #fff;
	outline:1px solid #ccc;
	-moz-outline-radius:4px;
	cursor:pointer;
	text-align:center;
	float:left;
	margin:5px;
}
div.video img {
	margin-top:50px;
}
div.video div.info {
	height:40px;
	background:#000 url(../images/h80.png) repeat-x;
	opacity:0.7;
	color:#fff;
	margin-top:2px;
	text-align:left;
	padding:5px 5px;
	font-family:"bitstream vera sans","trebuchet ms";
	font-size:11px;
	border-top:1px solid #ccc;

}
div.video div.info span {
	color:#99FF99;
	display:block;
}

The CSS style definition for vide overlay

JavaScript

$(function() {
      var player = $f("player", "swf/flowplayer-3.1.5.swf");

      $('a[rel]').overlay({
            expose: '#111',
            effect: 'apple',

            onLoad: function() {
                 player.load();
            },

            onClose: function() {
                player.unload();
            }
       });
});

line 02: install flowplayer into it’s container
line 04: the overlay function, fired when user clicks on play button
line 05: expose color
line 06: overlay effect
line 08: load the player
line 12: unload the player when user clicks on close button

Overlay Multiple Player

View Demo

<div style="float:left">
   <div class="video" style="background-image:url(images/splash_01.jpg)">
      <a href="#" rel="#orel1">
         <img src="images/play.png" alt="play" title="play" border="0">
      </a>
      <div class="info">
          PMDG Virtual Cockpit
          <span>00:27</span>
       </div>
   </div>

   <div id="orel1" class="overlay"><a href="video/video01.flv" class="player"></a></div>
</div>

<div style="float:left">
   <div class="video" style="background-image:url(images/splash_02.jpg)">
       <a href="#" rel="#orel2">
          <img src="images/play.png" alt="play" title="play" border="0">
       </a>
       <div class="info">
            PMDG Virtual Cockpit - Dark
            <span>02:38</span>
       </div>
    </div>

    <div id="orel2" class="overlay"><a href="video/video02.flv" class="player"></a></div>
</div>

line 01: container for video 1
line 03: rel tag must have a unique value for each video (orel1 & orel2 for the two videos)
line 12: overlay container, it’s id must match the rel tag in line 03
line 15: container for video 2

CSS

Look at example 1

JavaScript

$(function() {
    $("a[rel]").overlay ({
         effect: 'apple',
	 expose: '#111',

         onLoad: function(content) {
             this.getOverlay().find("a.player").flowplayer(0).load();
         },

         onClose: function(content) {
              $f().unload();
         }
     });

     $("a.player").flowplayer("swf/flowplayer-3.1.5.swf");
});

line 07: load video, overlay function looks for a element with player class name within it’s container to load the video
line 11: unload video
line 15: install flowplayer

Flowplayer

Flowplayer is released in two versions:

• Open source (free) version (released under the GPL license).  In this version, the Flowplayer branding (logo) is always visible on the player, you can’t remove the logo.
• Commercial version. In this version  you can remove the Flowplayer logo and place your own logo on the video.

Current version of the time of this writting is version 3.1.5 which can be downloaded here.

Browser Compatibility
Flowplayer API and JavaScript plugins are dependent on JavaScript 1.5 which is supported by following browsers:

• Internet Explorer 6.0+
• Firefox FF 2+
• Safari 2.0+
• Opera 2.0+

Supported Flash Player: 9.0+

Supported video formats
Currently Flowplayer support three video formats:

• Flv
• H.264
• Mp4

Using Flowplayer

Download and install Flowplayer

• Download the free version of Flowplayer (flowplayer-3.5.1.zip (161.2 kB))
• Extract and copy flowplayer-3.1.5.swf and flowplayer-3.1.4.min.js into your web application directory
• Include the flowplayer-3.1.4.min.js in the HEAD section of your HTML file

<script src="scripts/flowplayer-3.1.4-min.js" type="text/javascript"></script>

Setup Video Container

To use Flowplayer, you have to setup a HTML element as a video container on your page. The element can be any HTML tag, but the most commonly used tags are anchor (A) and DIV.

<a  href="videos/video01.flv" style="display:block;width="400px"; height="300px" id="player">

Install Flowplayer

<script language="javascript>
	flowplayer("player", "swf/flowplayer-3.1.5.swf");
</script>

To install Flowplayer, we call the JavaSript function ‘flowplayer‘ that has two arguments. The first argument ‘player‘ is the id of HTML element that used as video container and the second argument is the path to Flowplayer (swf file).

Syntax:

flowplayer(’elemntId’, ‘pathtoswf”, config)

where:
elementId is the id of video container
pathtoswf is the path to Flowplayer
config is player configuration

more information about ‘flowplayer’ function can be read here

Examples

1. Single Player

<a href="video/video01.flv" style="display:block; width:400px; height:300px;" id="player">
<script language='javascript'>
        flowplayer("player", "swf/flowplayer-3.1.5.swf");
</script>

View live demo

2. Multiple Player

<a class="player" href="video/video01.flv" style="display:block; width:400px; height:300px">
<a class="player" href="video/video02.flv" style="display:block; width:400px; height:300px">

<script language="javascript">
       flowplayer("a.player", "swf/flowplayer-3.1.5.swf");
<script>

On the example above, we use two video player on the same  page, each A tag is assigned ‘player’ CSS class name, which is defined in CSS section below.  The first argument of ‘flowplayer’ function is ‘a.player’ that takes  format tagName.className which means that all A tagsthat have ‘player‘ class name will be used as video container.

.player {
      display:block;
      width: 400px;
      height: 300px;
      float: left;
      margin-left: 10px;
}

View live demo

3. Using Splash Image

Splash image can be used as a preview of video content and also allow us to setup the Flowplayer instance so it is not activated until the user clicks on the image.

<a href="video/video01.flv"  style="display:block;width:400px;height:300px" id="player">
   <img src="images/splash_01.jpg" alt="PMDG MD11 Cockpit">
</a>

<script language="javascript">
      flowplayer("player", "swf/flowplayer-3.1.5.swf");
</script>

View live demo

4. Using Clips

Clips represent movies to play in Flowplayer. Clips can also be provided as a Playlist with a series of clips that will be played in sequence. Clip and Playlist are objects of Player.

<div style="display:block; width:400px; height:300px" id="player"></div>

<script language="javascript">
        flowplayer("player", "swf/flowplayer-3.1.5.swf", {
            clip: { url: 'video/video01.flv',
                    autoPlay: false
            }
        });
</script>

On the example above, we use DIV tag as video container. By using DIV, we can’t define the video url using href like in our previous examples that using A tag. The video url is defined within Clip object and we also set the autoPlay to false that indicating the player should not start playback immediately upon loading.

View live demo

Figure below shows a scrollable image slider featuring four thumbnails per slide. To display thumbnails from another slide, simply by clicking the navigation buttons located on the right and left slide. Slides can also be scrolled automatically by using the  left and right arrow keyboard or using  the mouse wheel.

Scrollable image slider

In this tutorial, i’ll use Scrollable component from jQuery Tools user interface (UI) library which is based on popular jQuery javascript framework. Current version of jQuery Tools at the time of this writing is version 1.1.2, which can be downloaded here. The library itself consists of six user interface components that can be easily combined:  Tabs, Tooltip, Overlay, Scrollable, Expose, and Flashembed.

How to Setup

• Download Scrollable component from download page and save it as jquery.tools.min.js. You can download it with jQuery (v1.3.2)  as a single file (21.75 kb) or as a separated file (3.37 kb) if you already have jQuery.



• Include the jquery.tools.min.js in the HEAD section of your HTML file

<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>

or

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>

Using Scrollable UI library

HTML Code

<a class="prevPage left"></a>
<div class="scrollable">
    <div class="items">
        <!-- 1-4 -->
        <img src="http://londatiga.net/tutorials/scrollable/images/img1.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img2.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img3.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img4.jpg" />

        <!-- 5-8 -->
        <img src="http://londatiga.net/tutorials/scrollable/images/img5.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img6.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img7.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img8.jpg" />

        <!-- 10-12 -->
        <img src="http://londatiga.net/tutorials/scrollable/images/img9.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img10.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img11.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img12.jpg" />
    </div>
</div>

<a class="nextPage right"></a>

line 01:  element for left/prev  button.

line 02: root element (div) for the scrollable.

line 03: wrapper element.

line 04-20: scrollable images (will be displayed  four images per slide).

line 24: element for right/next button.

CSS Code

Scrollable

.scrollable {
	background: #ccc;
	position: relative;
	overflow: hidden;
	width: 690px;
	height:145px;
	border:1px solid #ccc;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.scrollable .items {
	width: 20000em;
	position: absolute;
	clear: both;
}

.scrollable img {
    opacity: 0.6;
	float:left;
	margin:15px 5px 15px 15px;
	background-color:#fff;
	cursor:pointer;
	width:150px;
	height:113px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.scrollable .active {
    opacity:1;
	border:2px solid #000;
	z-index:9999;
	position:relative;
}

line 01, style for  container element, the length and width depends on image size and how many images you want displayed per slide.

line 12, style for wrapper element.

line 18,  style for images in a slide.

line 30, style for selected image.

Navigation button (prev & next)

.scrollable { float:left; }

a.left, a.right {
	display: block;
	width: 18px;
	height: 18px;
	float: left;
	margin: 60px 10px;
	cursor: pointer;
}

a.right { background: url(scrollable/arrow/right.png) no-repeat;  clear:right; margin-right: 0px;}
a.right:hover  { background-position:0px -18px; }
a.right:active 	{ background-position:0px 0px; }

a.left	{ background: url(scrollable/arrow/left.png) no-repeat;  margin-left: 0px; }
a.left:hover  { background-position:0px -18px; }
a.left:active  { background-position:-0px 0px; }

a.disabled { visibility:hidden !important; }

line 01, allow next and  prev buttons placed on each side of the slide.

line 12,  set size and position of prev and next buttons.

line 16,  set background image for prev and next buttons.

Javascript Code

<script>
	$(function()  { $("div.scrollable").scrollable({size: 4}); });
</script>

$(”div.scrollable”) is a jQuery selector for scrollabe container. On example above, we set four images for each slide using configuration parameter ‘size‘. Default value of ’size‘ parameter is 5. You can learn more about the API of the Scrollable component on this page.

Dynarch Calendar

How to Setup

1. Download and extract the latest JSCal2 library (JSCal2-1.7.zip)
2. Copy css and js directory from src directory into your web application directory.
3. Include jscal2.js, en.js (your prefered language), jscal2.css, border-radius.css and your prefered theme css file (eg: win2k.css) in the HEAD section of your HTML file.

<script src="js/jscal2.js" type="text/javascript"></script>
<script src="js/lang/en.js" type="text/javascript"></script>
<link type="text/css" media="screen" rel="stylesheet" href="css/jscal2.css"/>
<link type="text/css" media="screen" rel="stylesheet" href="css/border-radius.css"/>
<link type="text/css" media="screen" rel="stylesheet" href="css/win2k/win2k.css"/>

How to Use

Inline Calendar

<div id="calcontainer"></div>
<input type="text" name="calinfo" id="calinfo" size="25">
<Script Language="JavaScript">
<!--
Calendar.setup
( {
     cont: 'calcontainer',
     showTime: true,
     onSelect: function() {
           var date = this.selection.get();
           date      = Calendar.intToDate(date);
           date      = Calendar.printDate(date,"%Y-%m-%d");

           document.getElementById('calinfo').value = date;
      }
})
//-->
</Script>

Live demo

Line 01: Container to display calendar.

Line 02: Text field to display selection date.

Line 07: The container id.

Line 08: Will display time selector if set to true and vice versa. Default value is false.

Line 09: Callback function that will be called when selection changes.

Popup Calendar

<input type="text" name="calinfo" id="calinfo" size="25">
<button id="caltrigger">...</button>
<Script Language="JavaScript">
<!--
Calendar.setup({
     trigger    : "caltrigger",
     inputField : "calinfo",
     dateFormat: "%Y/%m/%d"
});
//-->
</Script>

Live demo

Line 01: Text field to display selection date.

Line 02: Trigger button to display popup calendar.

Line 06: Trigger button id.

Line 07: Text field id.

Line 08: Date format (view api documentation)

Disabling Dates

There are two simple ways to disable dates, by using min and max arguments in the constructor or by using disabled() callback function.

Calendar.setup ({
    cont: 'calinfo',
    min: 20100110,
    max: 20100125
});

Live demo

Line 3: The minimum (oldest) date that the calendar allows for selection.

Line 4: The maximum date

var disabledDates = { 20100111: true, 20100112: true };
Calendar.setup({
    cont     : 'calinfo',
    disabled : function(date) {
        date = Calendar.dateToInt(date);
        return date in disabledDates;
    }
});

Line 1: Disabled dates definition.

Line 4: Callback function to disable dates.

Highliting Dates & Tooltip

var dateInfo = {
     20100114: { klass: "highlight", tooltip: "Hellow World!" },
     20100115: { klass: "highlight", tooltip: "Hola Mundo!" }
};

var cal = Calendar.setup ({
     cont     : 'calcontainer',
     dateInfo : function (date, wantsClassName) {
         var as_number = Calendar.dateToInt(date);

         return DATE_INFO[as_number];
     }
});

Live demo

Line 01-04: Highlighted date and tooltip definitions. set highlight CSS class in klass parameter and tooltip message in tooltip parameter.

Line 08: Callback function to display highlighted dates and tooltip.

CSS definition

.highlight { font-weight:bold; color:#ff0000; }

You can read the complete api documentation here

Image Cropping

Image cropping process can be separated into two separated process. The first process is for acquaring coordinates and dimensions of selected area of an image, which will be done in client side using JavaScript. The next is process for creating a new image based on coordinates and dimensions from previously cropping process using PHP on server side. In this tutorial, i’ll use JavaScript Image Cropper library by David Spurr and PHP GD image processing functions.

Client Side

Image Cropper is an excellent JavaScript library written by David Spurr that makes image cropping easier. It allows us to crop an image using an interface with the same features and styling as found in commercial image editing software. It is based on Prototype JavaScript Framework and Scriptaculous.

How to Setup

1. Download the required library files

- Prototype Javascript Framework

- Scriptaculous (scriptaculous-js-1.8.3.zip)

- Image Cropper (jsCropperUI-1.2.1.zip)

2. Extract scriptaculous-js-1.8.3.zip and copy scriptaculous.js, builder.js, effect.js and dragdrop.js from the extracted files into your web application directory.
3. Extract jsCropperUI-1.2.1.zip and copy cropper.js, marqueeHoriz.gif, marqueeVert.gif, cropper.css from the extracted files into your web application directory ( must reside in the same directory).
4. Include Prototype.js, scriptaculous.js and cropper.js in the HEAD section of your HTML file.

   <script src="scripts/prototype.js" type="text/javascript"></script>
   <script src="scripts/scriptaculous.js?load=effects,builder,dragdrop" type="text/javascript"></script>
   <script src="scripts/cropper.js" type="text/javascript"></script>
   

Using Image Cropper Library

With Dynamic Crop Preview

<script type="text/javascript" charset="utf-8">
Event.observe (
	window,
	'load',
	function() {
		new Cropper.ImgWithPreview(
			't3soeta',
			{
				minWidth: 200,
				minHeight: 100,
                ratioDim: { x: 200, y: 100 },
				displayOnInit: true,
				onEndCrop: saveCoords,
                onloadCoords: { x1: 0, y1: 0, x2: 200, y2: 100 },
                previewWrap: 'preview'
			}
		)
	}
);

function saveCoords (coords, dimensions)
{
	$( 'x1' ).value = coords.x1;
	$( 'y1' ).value = coords.y1;
	$( 'width' ).value = dimensions.width;
	$( 'height' ).value = dimensions.height;
}
</script>

<form action="saveCrop.php" method="post">
<div style="width:750px">
    <div style="float:left">
        <img src="images/t3soeta.jpg" id="t3soeta" width="500" height="375" />
    </div>
    <div id="preview" style="float:right;"></div>
    <div style="clear:both"></div>
    <input type="hidden" name="x1" id="x1" value="">
    <input type="hidden" name="y1" id="y1" value="">
    <input type="hidden" name="width" id="width" value="">
    <input type="hidden" name="height" id="height" value="">
</div>
<input type="submit" name="Done" value=" Done ">
</form>

Line 06: Instantiate Image Cropper class.

Line 07: Image Id.

Line 09: minWidth, is the minimum width for selected area in pixels.

Line 10: minHeight, is the minimum height for selected area in pixels.

Line 11: ratioDim, is the pixel dimensions to apply as a restrictive ratio, with properties x & y.

Line 12: displayOnInit, whether display the selected area on initialisation. If set to true, minWidth and minHeight or ratioDim must be provided.

Line 13: onEndCrop, a callback function which will be called when user finished a crop movement. The function takes two arguments:

• coords, is the coordinates of selected area with properties x1, y1, x2, y2.
• dimensions , is the dimensions of selected area with properties width and height.

On example above (Line 21), coordinates and dimensions are stored in hidden elements and will be sent to server side script (saveCrop.php) using HTTP POST method for later processing .

Line 14: onloadCoords, is the coordinates of the selected area to display onload

Line 15: previewWrap, is the id of container for image crop preview.

Line 21: callback function, as set on onEndCrop option (Line 13).

Line 33: image to be cropped, it’s id must match the id set on Line 07.

Line 35: div container for image crop preview.

Line 37-40: Hidden elements to store coordinates and dimensions of selected area.

View live demo here

Without Dynamic Crop Preview

For using Image Cropper without dynamic preview, change the class from Cropper.ImgWithPreview to Cropper.Img and remove the previewWrap option.

Event.observe (
	window,
	'load',
	function() {
		new Cropper.Img (
			't3soeta',
			{
				minWidth: 200,
				minHeight: 100,
                ratioDim: { x: 200, y: 100 },
				displayOnInit: true,
				onEndCrop: saveCoords,
                onloadCoords: { x1: 0, y1: 0, x2: 200, y2: 100 },
			}
		)
	}
);

View live demo here

Server Side

On server side, image is processed using PHP GD image functions, which required GD library installed.

<?php
$x1      = $_POST['x1'];
$y1      = $_POST['y1'];
$width   = $_POST['width'];
$height  = $_POST['height'];

$srcImg  = imagecreatefromjpeg('images/t3soeta.jpg');
$newImg  = imagecreatetruecolor($width, $height);

imagecopyresampled($newImg, $srcImg, 0, 0, $x1, $y1, $width, $height, $width, $height);

imagejpeg($newImg, 'images/cropped_t3soeta.jpg');
?>

Line 02-05: get coordinates and dimensions sent from client.

Line 07: create source image

Line 08: create a new true color image for cropped image

Line 10: copy selected area from source image into new image using coordinates and dimensions sent from client.

Line 12: Output the new cropped image into a file.

Image Overlay Using Javascript Lightbox

A.  How to Setup

• Include the three javascript libraries (prototype.js, scriptaculous.js and lightbox.js) inside the HEAD section on your html page.

<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript" src="script/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="script/lightbox.js"></script>

• Include the Lightbox CSS file

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

• Make sure you have set the correct path to the following image files: prevlabel.gif, nextlabel.gif, loading.gif, and closelabel.gif on the CSS file.

B. How to Apply

On Single Image

If you want to make overlay image on a single image, add rel="lightbox" attribute to the link tag to activate the lightbox

<a href="images/mandala1.jpg" rel="lightbox" title="Approaching Juanda">
<img src="images/mandala-small1.jpg" border="0" class="image">
</a>

To show image description on the overlay image, add title tag to the link tag.

On Group of Images

To make overlay on a set of related images in a group,  append the group name in a square bracket after the rel attribute , rel=”lightbox[groupname]“.

<a href="images/mandala1.jpg" rel="lightbox[mandala]" title="Approaching Juanda">
<img src="images/mandala-small1.jpg" border="0" class="image">
</a>

<a href="images/mandala2.jpg" rel="lightbox[mandala]" title="Banking Right, intercept ILS RWY10">
<img src="images/mandala-small2.jpg" border="0" class="image">
</a>

<a href="images/mandala3.jpg" rel="lightbox[mandala]" title="Ready to Land">
<img src="images/mandala-small3.jpg" border="0" class="image">
</a>

<a href="images/mandala4.jpg" rel="lightbox[mandala]" title="Touchdown, spoilers deployed">
<img src="images/mandala-small4.jpg" border="0" class="image">
</a>

View live demo here

Another way for displaying image slideshow  is by using Javascript which is more simple and easier to apply.  In this tutorial, i will use Ultimate Fade-In Slideshow Javascript library from  Dynamic Drive which can be downloaded here. It needs JQuery library that can be downloaded here.

To use Ultimate Fade-In Slideshow, simply include the two library files (jquery-1.3.2.min.js and fadeinslideshow.js) inside the HEAD section of the page and the code for displaying image slideshow itself.   Below is the html template that used for entire examples in this tutorial. Replace the <!– insert example script below here //–> section with the code on each example.

Example HTML Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>Image Slideshow With JavaScript</title>
    <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="scripts/fadeinslideshow.js"></script>

    <!-- insert example script below here //-->
</head>
<body>
    <h2>Image Slideshow Without Description and Hyperlinking</h2>
    <div id="slideshow"></div>
</body>
</html>

Example 1. Auto playing slideshow without description and hyperlinking.

<script type="text/javascript">
    var gallery1 = new fadeSlideShow ({
        wrapperid: 'slideshow',
        dimensions: [300, 225],
        imagearray: [
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img01.png"],
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img02.png"],
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img03.png"]
        ],
        displaymode: {type: 'auto', pause: 2500, cycles:0, wraparound: true},
        persist: false,
        fadeduration: 2500,
        descreveal: 'ondemand',
        togglerid: ''
    })
    </script>

View live demo

line 2:  create an instance of fadeSlideShow class with the following options:

line 3: wrapperid, the id of an empty div container on your page that will show the fade in slideshow images.

line 4:  dimensions, dimension of the slideshow in the format [width, height] with pixels unit.

line 5: imagearray, an array containing the images you wish to show. The syntax is:

["path_to_image", "optional_url", "optional_linktarget", "optional_description"]

The path_to_image option is the path or url to your  image,

The optional_url option is the url for hyperlinking,

The optional_linktarget option is the link target (open in the same window or new window),

The optional_description option is the  description of your image

For image without hyperlinking and description, just define the path_to_image option and eliminate the other options

line 10: displaymode, the primary attributes of your slideshow. The syntax is:

{type:’auto|manual’, pause:milliseconds, cycles:0|integer, wraparound:true|false, randomize:true|false}

The type option is for auto slideshow or manual slideshow. If manual, you must define your own prev and next controls to let the user control the slideshow. See togglerid option below for more info.

The pause option when set to 0 will cause the slideshow to rotate perpetually in automatic mode, while any number larger than 0 means it will stop after x cycles.

The warparound option when set to false will disable the user’s ability in manual mode to go past the very first and last slide when clicking on the navigation links to manually view the slides.

The  randomize option when set to true will shuffle the display order of the images, so they appear in a different order each time the page is loaded.

In the example above, the slideshow will auto run and pause 2500 miliseconds between slides. The images will appear in a different order every time the page is loaded.

line 11: persists, is a boolean variable that decides whether the slideshow should remember and recall the last viewed slide within a browser session when the page is reloaded.

line 12: fadeduration, the duration in miliseconds of the fade effect when transitioning from one image to the next.

line 13: descreveal, is the option for displaying image description if you define it. If  set always, the description will be displayed persistently at the bottom of the image, and ondemand will display the description when user mouses over the image.

line 14: togglerid,  is the option you used if you wish to create navigational controls that allow the user to explicitly move back and forth between slides.

Example2. Auto playing slideshow with all slides hyperlinked.

<script type="text/javascript">
    var gallery1 = new fadeSlideShow ({
        wrapperid: 'slideshow',
        dimensions: [300, 225],
        imagearray: [
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img01.png", "http://www.panoramio.com/photo/25232721", "_new"],
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img02.png", "http://www.panoramio.com/photo/25232985", "_new"],
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img03.png", "http://www.panoramio.com/photo/25232048", "_new"]
        ],
        displaymode: {type: 'auto', pause: 2500, cycles:0, wraparound: true },
        persist: false,
        fadeduration: 2500,
        descreveal: 'ondemand',
        togglerid: ''
    })
    </script>

On imagearray option, we define the the url for each image on the second option, and set _new value on the third option to open the url in new window.

View live demo

Example 3. Auto playing slideshow with all slides showing a persistence description.

<script type="text/javascript">
    var gallery1 = new fadeSlideShow ({
        wrapperid: 'slideshow',
        dimensions: [300, 225],
        imagearray: [
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img01.png", "", "", "Gas Station, Ende Flores"],
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img02.png", "", "", "St. Michael Church"],
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img03.png", "", "", "IPI Beach"]
        ],
        displaymode: {type: 'auto', pause: 2500, cycles:0, wraparound: true },
        persist: false,
        fadeduration: 2500,
        descreveal: 'always',
        togglerid: ''
    })
    </script>

View live demo

On imagearray option, we define the description for each image on the fourth option, left the second and third option empty.

Example 4. Auto playing slideshow with all slides showing description when user mouses over it.

<script type="text/javascript">
    var gallery1 = new fadeSlideShow ({
        wrapperid: 'slideshow',
        dimensions: [300, 225],
        imagearray: [
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img01.png", "", "", "Gas Station, Ende Flores"],
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img02.png", "", "", "St. Michael Church"],
            ["http://londatiga.net/tutorials/fadeinslideshow/images/img03.png", "", "", "IPI Beach"]
        ],
        displaymode: {type: 'auto', pause: 2500, cycles:0, wraparound: true },
        persist: false,
        fadeduration: 2500,
        descreveal: 'ondemand',
        togglerid: ''
    })
    </script>

View live demo

Option descreveal is set to ‘ondemand‘ to display image description when the user mouse over it.

There are some javascript frameworks available over internet that help us to build web application easier using ajax like Prototype,  Jquery,  Dojo, etc.  For me, i prefer to use prototype because of  it’s functionality and easy to use. I’ve been using Prototype for over one year and feel comfort with it.

In ajax programming, we often use ajax to update parts within HTML page with the data retrived from server where in prototype i use Ajax.Request function to handle it.  But in some cases,  if  our ajax response data  contains other java script code,  and we want the script to work after the response, it won’t work.  It happens because the browser’s DOM is not updated with the newly retrieved script from ajax response. To overcome this problem, we can use Ajax.Updater function that’s a spesialization of Ajax.Request function.

The function:

new Ajax.Updater(container, url[, options])

where container is the HTML part to be updated and url is url to server side script.

Options:

Example:

var url = 'ajax.php';

var myAjax = new Ajax.Updater('datadiv', url, {
      method: 'get',
      evalScripts: true,

      onSuccess: function(transport) {},

      onFailure: function(transport) {
           alert('Transport error!');
       }
 });