holderbaum · April 4, 2011 08:25
diff --git a/smooth-2.html b/smooth-2.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html>
 <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>FL0A7</title>>
        <script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
        <style type="text/css" media="screen">
                body{
                        background-color: black;
                }
                .slides {
                        width: 400px;
                        height: 300px;
                        font-size: 10px;
                        position:relative;
                        overflow:hidden;
                        clear:both;
                }
                .slides img.background {
                        position: absolute;
                        width: 100%;
                        z-index: 0;
                }
                /* items is needed for flowcharts */
                .slides .items {
                        width:20000em;
                        position:absolute;
                        clear:both;
                        margin-left:1.5em;
                        padding:0;
                }

                div.slide {
                    float:left;
                    display:block;
                    width: 400px;
                    z-index: 9999;
                }

                div.slide h1 {
                        font-size: 2em;
                }
                div.slide p {
                        font-size: 1em;
                }
        </style>
 </head>
 <body>
        <script type="text/javascript" charset="utf-8">
                //<![CDATA[
                $(function() {
                        var slides = $(".slides").scrollable({ circular: false });

                        var resize = function(){
                                var w = $(window)
                                var slides = $('.slides');
                                var scroll = slides.data('scrollable')
                                var slide = $('.slide');

                                var window_width = w.width();
                                var window_height = w.height();

                                var slide_width = window_width * 0.6;
                                //var slide_height = slide_width * 0.75; // 4:3
                                var slide_height = slide_width * 0.5625; // 16:9

                                var margin_left = (window_width - slide_width) / 2;
                                var margin_top = (window_height - slide_height) / 2;

                                var font_size = slide_width/40;

                                slides.css('width',        slide_width+'px');
                                slides.css('height',       slide_height+'px');

                                slide.css('width',        slide_width+'px');
                                slide.css('height',       slide_height+'px');

                                slides.css('margin-left',  margin_left+'px');
                                slides.css('margin-top',   margin_top+'px');

                                slides.css('font-size',    font_size+'px');

                                scroll.seekTo(scroll.getIndex(), 0);
                        };
                        $(window).bind("resize", resize);
                        resize();
                }); 
                //]]>
        </script>

        <div class="slides">
                <img class="background" src="bg.png"></img>
                <div class="items">
                        <div class="slide">
                                <h1>Title</h1>
                                <p>
                                        This is a text!
                                </p>
                        </div>
                        <div class="slide">
                                <h1>Title 2</h1>
                                <p>
                                        This is second a text!
                                </p>
                        </div>
                </div>
        </div>

 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>FL0A7</title>>
	<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
	<style type="text/css" media="screen">
	body{
	background-color: black;
	}
	.slides {
	width: 400px;
	height: 300px;
	font-size: 10px;
	position:relative;
	overflow:hidden;
	clear:both;
	}
	.slides img.background {
	position: absolute;
	width: 100%;
	z-index: 0;
	}
	/* items is needed for flowcharts */
	.slides .items {
	width:20000em;
	position:absolute;
	clear:both;
	margin-left:1.5em;
	padding:0;
	}

	div.slide {
	float:left;
	display:block;
	width: 400px;
	z-index: 9999;
	}

	div.slide h1 {
	font-size: 2em;
	}
	div.slide p {
	font-size: 1em;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript" charset="utf-8">
	//<![CDATA[
	$(function() {
	var slides = $(".slides").scrollable({ circular: false });

	var resize = function(){
	var w = $(window)
	var slides = $('.slides');
	var scroll = slides.data('scrollable')
	var slide = $('.slide');

	var window_width = w.width();
	var window_height = w.height();

	var slide_width = window_width * 0.6;
	//var slide_height = slide_width * 0.75; // 4:3
	var slide_height = slide_width * 0.5625; // 16:9

	var margin_left = (window_width - slide_width) / 2;
	var margin_top = (window_height - slide_height) / 2;

	var font_size = slide_width/40;

	slides.css('width', slide_width+'px');
	slides.css('height', slide_height+'px');

	slide.css('width', slide_width+'px');
	slide.css('height', slide_height+'px');

	slides.css('margin-left', margin_left+'px');
	slides.css('margin-top', margin_top+'px');

	slides.css('font-size', font_size+'px');

	scroll.seekTo(scroll.getIndex(), 0);
	};
	$(window).bind("resize", resize);
	resize();
	});
	//]]>
	</script>

	<div class="slides">
	<img class="background" src="bg.png"></img>
	<div class="items">
	<div class="slide">
	<h1>Title</h1>
	<p>
	This is a text!
	</p>
	</div>
	<div class="slide">
	<h1>Title 2</h1>
	<p>
	This is second a text!
	</p>
	</div>
	</div>
	</div>

	</body>
	</html>