Aiuto immagini javascript

binovalle

Nuovo Utente
10 Lug 2008
2
0
0
Buon giorno a tutti sono nuovo di qui
Mi chiedevo se potevate aiutarmi riguardo ad un javascript.
Sto modificando una funzione di Dolphin www.boonex.com
che fa ruotare il banner in alto con effetto FADE
Di default c'è una funzione PHP che preleva le immagini da una cartella e inserisce i nomi delle immagini in una variabile, la seconda funzione non fa altro che un FOREACH per assegnare le variabili precedenti in un tag html
foreach ($aImages as $sImg)
{
$sImagesEls .= '<img src="'.$site['imagesPromo'].$sImg.'" />';

e una volta inserite in questo TAG va a scrivere l'html in questo modo
$sCode = <<<EOF
<script type="text/javascript" src="{$site['url']}inc/js/jquery.dolPromo.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$( '#indexPhoto' ).dolPromo( 6000, 0.28125 );
} );
</script>
<div id="indexPhoto" onclick="location='$sPromoLink'">
{$sImagesEls}
</div>
EOF;

Come si può notare nel tag DIV ogni immagine viene associata ad un solo link
Avrei bisogno che ogni immagine venga associata al link che decido io tramite un set di IF in php che ho già fatto.
La mia idea è stata questa ho tolto il parametro onclick dal DIV e ad ogni immagine assegno un tag <A> in questo modo:
$sImagesEls .= '<a href="'.$sPromolink.'"><img src="'.$site['imagesPromo'].$sImg.'"></a>';
Quando lo script va in esecuzione l'immagine che gira è sempre quella quando invece dovrebbero girarne 4 ma guardando l'html della pagina noto che le immagini nei tag sono differenti.
Inserisco inoltre le funzioni JAVASCRIPT che sono contenute nel inc/js/jquery.dolPromo.js
// jQuery plugin - Dolphin Promo Images
(function($){
$.fn.dolPromo = function( iInterval, fRatio ) {
function resizeMyImage($Img) {
$Img.css( { width: 'auto', height: 'auto', left: 0, top: 0 } );

if( $Img.width() > $promo.width() ) {
var fImgRatio = $Img.height() / $Img.width();
$Img.width( $promo.width() ).height( Math.round( $promo.width() * fImgRatio ) );
}

if( $Img.height() > $promo.height() ) {
var fImgRatio = $Img.width() / $Img.height();
$Img.width( Math.round( $promo.height() * fImgRatio ) ).height( $promo.height() );
}

if( $Img.width() < $promo.width() ) {
var left = Math.round( ( $promo.width() - $Img.width() ) / 2 );
$Img.css( 'left', left );
}

if( $Img.height() < $promo.height() ) {
var top = Math.round( ( $promo.height() - $Img.height() ) / 2 );
$Img.css( 'top', top );
}
}

function switchThem() {
if( typeof ePrev != 'undefined' )
ePrev.fadeOut( 1000 );

eNext.fadeIn( 1000 );

ePrev = eNext;
eNext = eNext.next( 'img' );

if( !eNext.length )
eNext = $( 'img:first', $promo );
}

function resetPromoSize() {
$promo.height( Math.round( $promo.width() * fRatio ) );
}

//default parameters
var iInterval = iInterval || 3000; //switching interval in milliseconds
var fRatio = fRatio || 0.28125; //main div size proportion (height/width)

var $promo = this;

resetPromoSize();

$( 'img', $promo ) //get all images
.each( function() { //for each image
var $Img = $(this); //get current image

var imgOnload = function() { //when the image is loaded
$Img.hide();
resizeMyImage( $Img );
};

if( document.all ) //ie
$Img.ready( imgOnload );
else
$Img.bind( 'load', imgOnload );
} );

//run switching
var eNext = $( 'img:first', $promo );
var ePrev;

switchThem();
setInterval( switchThem, iInterval );


var iOldWidth = $promo.width()
//attach event on window resize
$(window).resize( function() {
resetPromoSize();
var iNewWidth = $promo.width();

if( iOldWidth != iNewWidth ) { //if the main div width is changed
iOldWidth = $promo.width();

$( 'img', $promo ).each( function() {
var $Img = $(this);
resizeMyImage( $Img );
} );
}
} );
};
})(jQuery);

Ringrazio anticipatamente per un eventuale aiuto
 

Discussioni simili