slideshow numero immagini

[cristipe]

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

 

[MAeSI]

Ciao, dovrebbe bastare inserire un nuovo elemento <img> nel div con id slideshow (che non hai chiuso).

ps: penso che tu abbia riportato male il codice dello script nel post, perché ci sono alcuni errori.

 

[cristipe]

Ciao, dovrebbe bastare inserire un nuovo elemento <img> nel div con id slideshow (che non hai chiuso).

ps: penso che tu abbia riportato male il codice dello script nel post, perché ci sono alcuni errori.

grazie mille per la risposta, in effetti il div era chiuso ma non l'ho riportato.
avevo fatto un errore nel nominare le immagini e quindi non me le leggeva, ora funziona. approfitto della tua gentilezza per chiederti come posso togliere lo spazio che si presenta sul top e il down delle immagini
grazie mille

 

[cristipe]

oltre al div non chiuso hai trovato altri errori per caso? grazie ancora

 

[MAeSI]

come posso togliere lo spazio che si presenta sul top e il down delle immagini

Utilizzando solo lo script le immagini si centrano orizzontalmente e verticalmente rispetto al loro contenitore.
Avrai sicuramente un CSS che regola tali impostazioni.

hai trovato altri errori per caso?

Il secondo script non è tra i tag <script> e l'ordine va invertito... ma se ti funziona probabilmente l'hai riportato male qui sul forum.

 

[cristipe]

grazie milla