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);