Ciao ragazzi,
sto lavorando a un sito in html5 e js e ho il seguente problema:
in pratica ho una slider di immagini e ho una animazione per il logo, ma insieme proprio non vogliono funzionare! non capisco cosa sbaglio e a cosa sia dovuto il conflitto dei due script.
ho già cercato qualche soluzione in rete e le ho provate tutte ma nessuna sembra risolvere questo problema. Credo (dall'alto della mia somma ignoranza) che sia perchè i due script attingono dalla stessa libreria (jquery-easing) ma con precedenti siti non è mai stato un problema....
qui potete trovare la slider funzionante, l'animazione logo funzionante (passateci sopra col mouse) e le due cose insieme che non funzionano affatto... il logo non si anima e lo slider non cambia pagina.
nel caso qualcuno si scocciasse di andare a spulciare il codice riporto qui le opzioni dei due script incriminati:
ANIMAZIONE LOGO:
SLIDER:Codice PHP:jQuery.noConflict(); $(document).ready(function() { //Custom settings var style_in = 'easeOutBounce'; var style_out = 'jswing'; var speed_in = 1000; var speed_out = 1000; //Calculation for corners var neg = Math.round($('.qitem').width() / 2) * (-1); var pos = neg * (-1); var out = pos * 2; $('.qitem').each(function () { url = $(this).find('a').attr('href'); img = $(this).find('img').attr('src'); alt = $(this).find('img').attr('img'); $('img', this).remove(); $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>'); $(this).children('div').css('background-image','url('+ img + ')'); $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos}); $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos}); $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos}); $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos}); }).hover(function () { $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out}); $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out}); $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out}); $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out}); }, function () { $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in}); $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in}); $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in}); $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in}); }).click (function () { window.location = $(this).find('a').attr('href'); }); });
e dire che questo è già un risultato perchè alla prima implementazione lo slider scomparve definitvamente, ma con un jQuery.noConflict() sono riuscito a farlo riapparire.Codice PHP:jQuery.noConflict(); $(window).load(function(){ $('#slider')._TMS({ banners:true, waitBannerAnimation:false, preset:'diagonalFade', easing:'easeOutQuad', pagination:true, duration:400, slideshow:8000, bannerShow:function(banner){ banner.css({marginRight:-500}).stop().animate({marginRight:0}, 600) }, bannerHide:function(banner){ banner.stop().animate({marginRight:-500}, 600) } }) })
dato che sono prossimo alla pazzia e le scadenze si avvicinano, qualcuno che mastica js meglio di me sa dirmi dov'è l'inghippo??
Grazie in anticipo!
P.S.: il sito è all'inizio e il codice è un po incasinato, non rimproveratemi sarà messo a posto
Rispondi quotando
