style2col.css

codice:
* {    margin: 0;
    padding: 0;
    }
div {
    vertical-align: top;
    }
#telaio {
    display:block;
    width: 100%;
    height: 100%;
    background-color: #000;
    }
#banner {
    width: 100%;
    display: block;
    }
#logo {
    display: inline-block;
    width: 20%;
    background-color: red;
    }
#logo img, #banner img, #skin img, #slide img {
    display: block;
    width: 100%;
    background-color: red;
    }
#slide img {          
    border-radius: 20px;
    border: 1px solid #000;
    box-shadow: 5px 5px 10px 2px #333333;
    -webkit-box-shadow: 5px 5px 10px 2px #333333;
    -moz-box-shadow: 5px 5px 10px 2px #333333;
    }
#menu_ph img {
    width: 500px;
    max-width: 90%;
    margin: 10px;
    border-radius: 20px;
    border: 1px solid #000;
    box-shadow: 5px 5px 10px 2px #333333;
    -webkit-box-shadow: 5px 5px 10px 2px #333333;
    -moz-box-shadow: 5px 5px 10px 2px #333333;
    }
#menu_s {
    display: inline-block;
    width: 80%;
    background-color: cyan;
    }
#menu_ph {
    width:100%;
    text-align: center;
    }
#skin {
    width: 100%;
    }
#telaio2 {
    display: block;
    width: 100%;
    background-color: #fff;
    }
#content {
    width: 100%;
    text-align: center;
    }
#testo {
    display: inline-block;
    width: 500px;
    max-width: 90%;
    padding: 20px;
    }
#slide {
    display: inline-block;
    width: 500px;
    max-width: 90%;
    padding: 20px;
    text-align: center;
    overflow: hidden;
    }
#video {
    width: 480px;
    max-width: 90%;
    margin-top: 40px;
    text-align: center;
    }
#menu_m {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    }
#menu_m ul {
    list-style: none;
    padding: 20px;
    }
#menu_m li {
    min-width: 100px;
    min-height: 20px;
    margin: 5px;
    }
#menu_m a {
    text-decoration: none;
    color: #808080;
    font-size: 1.1em;
    line-height: 1.5em;
    }
#menu_m a:hover {
    text-decoration: none;
    color: #800517;
    font-size: 1.5em;
    line-height: 1.5em;
    }
#social {
    display: block;
    background-color: gray;
    }
#footer {
    background-color: orange;
    }
#testo h1, #testo h2, #testo p  {
    margin: 5px;
    }
#testo p {
    text-align: justify;
    }
slideshow.js

codice:
$ 
    function () {
        $( "#slide" ).imageFading({caption: true});    /* cambiare slide con il nome del div*/
    }
);
jquery.imageFading.js

codice:
/*configuration:
    $( "#div" ).imageFading( {options} )
    
options:    showtime (milliseconds) - image showing time - default 3000 (3 seconds)
        loading (string) - text on preloading images
        fadetime (milliseconds) - fading time - default 3000 (3 seconds)
        caption (boolean) - show caption - default false
        captioncss (object) - css for caption
        - height, color, font, background, marginTop, opacity, padding, align
        default: captioncss: { height: 20, color: '#fff', font: '10px Helvetica', marginTop: *dynamic at botom*, background: '#000', opacity: 0.7, padding: 5, align: 'left' }
        over: (boolean) - activate event on mouse over - default true                            
*/


( function( $ ) {
    $.fn.imageFading = function ( options ) {
        return this.each( function() {
            var $this = $( this );
            var over = false;
            
            // set parameters
            var opt = $.extend( 
                { 
                      showtime: 3000
                    , loading: "Caricamento immagini..." 
                    , fadetime: 3000
                    , caption: false
                    , captioncss: {}
                    , over: true
                }
                , options || {}
            );
            
            // mouse over event
            if ( opt.over ) {
                $this.hover(
                      function () { over = true; }
                    , function () { over = false; }
                );
            }
            
            // set container css
            if ( $this.css( "overflow" ) != "hidden" ) {
                $this.css({ "overflow": "hidden" });
            }
            
            // hide all images
            $this.children().css({
                position: "absolute"
                , "z-index": "1"
                , "margin-top": "0px"
                , "margin-left": "0px"
                , "max-height": $this.height() + "px"
                , "max-width": $this.width() + "px"
            }).hide();
            
            // print loading
            $this.append(
                "<div style='clear:both; padding: 0px; margin: 0px;' id='loading'>" + opt.loading + "</div>"
            );
            
            // preload images
            var loadImgs = 0;
            $( "img" , $this ).each(
                function () {
                    var img = new Image();
                    var soc = $( this ).attr( 'src' );
                    
                    $( img ).load(
                        function () {
                            loadImgs++;
                        }
                    ).attr( "src" , soc );
                }
            );
            
            var ie7 = navigator.userAgent.match(/MSIE 7/i);
            
            var totImgs = $( "img" , $this ).length;
            var intVal = window.setInterval(
                function () {
                    if ( loadImgs == totImgs ) {
                        window.clearInterval( intVal );
                        $( "#loading" ).remove();
                        
                        if ( opt.caption ) {
                            $this.append( "<div id='caption'></div>" );
                            var ht = parseInt ( opt.captioncss.height || 20 );
                            var pg = parseInt ( opt.captioncss.padding || 5 );
                            
                            $( "#caption" ).css({
                                  "position":     ( ie7 ? "relative" : "absolute" )
                                , "z-index":     parseInt ( $this.css( "z-index" ) ) + 5 || 10
                                , "width":         ( $this.width() - ( pg * 2 ) ) + "px"
                                , "height":     ( opt.captioncss.height || ( ht - ( pg * 2 ) ) ) + "px"
                                , "color":         opt.captioncss.color || "#fff"
                                , "font":         opt.captioncss.font || "40px Helvetica"
                                , "background": opt.captioncss.background || "#000"
                                , "margin-top": ( opt.captioncss.marginTop || ( $this.height() - ht ) ) + "px"
                                , "padding":     pg + "px"
                                , "opacity":     opt.captioncss.opacity || 0.7
                                , "text-align": opt.captioncss.align || "center"
                                , "display":     "none"
                            });
                        }
                        
                        $this.children( ":eq(0)" )
                            .css({
                                "margin-top": ( ( $this.height() - $this.children( ":eq(0)" ).height() ) / 2 ) + "px"
                                , "margin-left": ( ( $this.width() - $this.children( ":eq(0)" ).width() ) / 2 ) + "px"
                            })
                            .fadeIn( parseInt ( opt.fadetime ) );
                        $( "#caption" ).html( $this.children( ":eq(0)" ).attr( "title" ) ).fadeIn( parseInt ( opt.fadetime ) );
                        
                        if ( totImgs > 1 ) { fadeStart( $this , opt , totImgs ); }
                    }
                }
                , 100
            );
            
            function fadeStart ( $this , opt , totImgs ) {
                var cnt = 0;
                var intVal = window.setInterval(
                    function () {
                        if ( ! over ) {
                            $( $this ).children( ":eq(" + cnt + ")" ).fadeOut( parseInt ( opt.fadetime ) );
                            setTimeout( function () { $( "#caption" ).html( "" ) } , parseInt ( opt.fadetime / 4 ) );
                            
                            if ( ( cnt + 1 ) == totImgs ) {
                                cnt = 0;
                            } else {
                                cnt++;
                            }
                            
                            $( $this ).children( ":eq(" + cnt + ")" )
                                .css({
                                    "margin-top": ( ( $this.height() - $this.children( ":eq(" + cnt + ")" ).height() ) / 2 ) + "px"
                                    , "margin-left": ( ( $this.width() - $this.children( ":eq(" + cnt + ")" ).width() ) / 2 ) + "px"
                                })
                                .fadeIn(
                                      parseInt ( opt.fadetime )
                                    , function () {
                                        if ( opt.caption ) {
                                            $( "#caption" ).html( $this.children( ":eq(" + cnt + ")" ).attr( "title" ) );
                                        }
                                    }
                                );
                        }
                    }
                    , parseInt ( opt.showtime ) + parseInt ( opt.fadetime )
                );
            }
        });
    };
})(jQuery);