Buongiorno a tutti
ringrazio chi potrà aiutarmi. Questa galleria di immagini mi permette di visualizzare al massimo 4 immagini potreste dirmi che variabile devo inserire per poter vedere un numero maggiore di immagini grazie a tutti
<div id='slideshow'>
<img src='./imgs/1.jpg' alt='Test photo' title='unique' />
<img src='./imgs/2.jpg' alt='Test photo' title='unique' />
<img src='./imgs/3.jpg' alt='Test photo' title='unique' />
<img src='./imgs/4.jpg' alt='Test photo' title='unique' />
<script type="text/jscript">
$("#slideshow").imageFading({
loading: "Loading Unique images..."
, fadetime: 1000
, over: true
});
</script>
( function( $ ) {
$.fn.imageFading = function ( options ) {
return this.each( function() {
var $this = $( this );
var over = false;
// set parameters
var opt = $.extend(
{
showtime: 3000
, loading: "Loading images..."
, 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 || "10px 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 || "left"
, "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);