MMap(Moogle Map) 0.2

Marker who does slide while doing two or more images in fadein/fadeout.

スライドするイメージマーカー

複数のイメージをスライド表示するデモ

サンプルコード

このデモのソースコード

(function($){

window.addEvent('domready', function(){

	var map = new google.maps.Map($('gmap'), {
		zoom: 15,
		center: new google.maps.LatLng(35.6666870, 139.731859),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	var marker = new MMap.Marker.Images({
		map: map,
		className: 'marker images imagesPaper',
		position: new google.maps.LatLng(35.6666870, 139.731859),
		images: [{
			title: 'demo1',
			image: 'http://holyshared.github.com/MMap/images/demo/img01.jpg',
			url: 'http://mootools.net'
		}, {
			title: 'demo2',
			image: 'http://holyshared.github.com/MMap/images/demo/img02.jpg',
			url: 'http://mootools.net/core/'
		}, {
			title: 'demo3',
			image: 'http://holyshared.github.com/MMap/images/demo/img03.jpg',
			url: 'http://mootools.net/more/'
		}, {
			title: 'demo4',
			image: 'http://holyshared.github.com/MMap/images/demo/img04.jpg',
			url: 'http://mootools.net/forge/'
		}, {
			title: 'demo5',
			image: 'http://holyshared.github.com/MMap/images/demo/img05.jpg',
			url: 'http://mootools.net/blog/'
		}],
		onClick: function(event){
			var image = this.getCurrentImage();
			window.location.href = image.url;
		}
	});

});

}(document.id));

HTML

マーカーの文書構造

<div class="ovarlayView marker images imagesPaper">
	<ul class="photos">
		<li><a href="http://sharedhat.com" title="demo1"><img
			src="http://holyshared.github.com/MMap/Demos/images/demo/img01.jpg"
			title="demo1"></a></li>
		<li><a href="http://sharedhat.com" title="demo2"><img
			src="http://holyshared.github.com/MMap/Demos/images/demo/img02.jpg"
			title="demo2"></a></li>
		<li><a href="http://sharedhat.com" title="demo3"><img
			src="http://holyshared.github.com/MMap/Demos/images/demo/img03.jpg"
			title="demo3"></a></li>
		<li><a href="http://sharedhat.com" title="demo4"><img
			src="http://holyshared.github.com/MMap/Demos/images/demo/img04.jpg"
			title="demo4"></a></li>
		<li><a href="http://sharedhat.com" title="demo5"><img
			src="http://holyshared.github.com/MMap/Demos/images/demo/img05.jpg"
			title="demo5"></a></li>
	</ul>
</div>