• P
    User •

    le animazioni con jQuery RoyalSlider dentro WP a FireFox non piacciono, non capisco

    Ciao a tutti e buon anno nuovo! 🙂
    avrei voluto inserire i link ai due lavori di cui parlo ma mi viene bloccato il post quindi cerco di spigerami a parole
    ecco il mio cruccio: ho configurato uno slider con animazioni usando Royalslider
    per essere sicuro che il codice fosse giusto prima di inserirlo nella home di WP ho fatto una pagina con solo lo slider e funziona su tutti i browser (per ora non ho fatto i test su IE perchè uso Linux)
    quando poi sono andato a metterlo nella Home ho avuto la strana sorpresa, lo slider su Firefox funziona solo in parte, le animazioni sulle immagini non vanno, cosa stranissima, le impostazioni sui testi che fanno parte anche della stessa slide vanno e le immagini no!
    per inserire lo slider non ho usato il puglin specifico per wordpress ma ho editato la pagina PHP, i codici dei 2 slider (dentro e fuori WP) sono IDENTICI, e non solo, funzionando su Chrome devo dedurre che non ci sono conflitti JS
    ho provato e riprovato senza successo, veramente non riesco a trovare una speigazione logica a questo malfunzionamento
    avete qualche idea?
    riporto di seguito il codice usato
    grazie mille in anticipo 🙂

    CODICE HTML

    
<head> 
  <title>RoyalSlider</title> 
  <link href="css/slider.css" rel="stylesheet" type="text/css"> 
  <script  src="js/jquery-1.8.0.min.js"></script> 
  <script src="js/jquery.royalslider.min.js"></script> 
</head>

<body> 
     
<div id="slider"> 
     
    <div class="rsContent slide1"> 
 
            <img class="rsABlock sconti"  data-move-effect="none" data-fade-effect="true" data-delay="500" data-speed="1500" src="images/slide1-sconti.png"> 
            <strong style="padding-top: 50px" class="rsABlock blockHeadline" data-delay="2000" data-speed="500" >BENEFICI FISCALI</strong> 
            <strong class="rsABlock blockHeadline" data-delay="2500" data-speed="500" >PER PERSONE CON DISABILITA'</strong> 
            <span style="padding-top: 20px" class="rsABlock txtLeft" data-delay="3500" data-speed="500" data-move-effect="none">IVA agevolata al 4% anzichè al 21%</span> 
 
    </div> <!-- Chiusura slide1 -->  
     
        <div class="rsContent slide2"> 
 
            <img class="rsABlock corriere"  data-move-effect="none" data-fade-effect="true" data-delay="500" data-speed="1500" src="images/slide2-corriere.png"> 
            <strong style="padding-top: 50px" class="rsABlock blockHeadline" data-delay="2000" data-speed="500" >POSSIBILITA' DI SPEDIZIONE</strong> 
            <strong class="rsABlock blockHeadline" data-delay="2500" data-speed="500" >CON CORRIERE ESPRESSO</strong> 
            <span style="padding-top: 20px" class="rsABlock txtLeft" data-delay="3500" data-speed="500" data-move-effect="none">Contattaci per sapere come</span> 
 
    </div> <!-- Chiusura slide2 --> 
     
            <div class="rsContent slide3"> 
 
            <img class="rsABlock parcheggio" data-move-effect="bottom" data-fade-effect="false" data-delay="500" data-speed="1000" src="images/slide3-parcheggio.png"> 
            <strong style="padding-top: 50px" class="rsABlock blockHeadline" data-delay="2000" data-speed="500" >AMPIO PARCHEGGIO COPERTO</strong> 
            <strong class="rsABlock blockHeadline" data-delay="2500" data-speed="500" >RISERVATO AI CLIENTI</strong> 
 
    </div> <!-- Chiusura slide3 -->   
     
</div> <!-- Chiusura slider -->  
 
</body> 
 
<script type="text/javascript"> 
jQuery(document).ready(function($) { 
  $('#slider').royalSlider({ 
    arrowsNav: true, 
    arrowsNavAutoHide: false, 
    controlNavigationSpacing: 0, 
    controlNavigation: 'bullets', 
    imageScaleMode: 'none', 
    imageAlignCenter:false, 
    blockLoop: true, 
    transitionSpeed: 4000,  
    loop: true, 
    numImagesToPreload: 6, 
    transitionType: 'fade', 
    keyboardNavEnabled: true, 
    fadeinLoadedSlide: true, 
    block: { 
      delay: 3000 
    }, 
    autoPlay: { 
            // autoplay options go gere 
            enabled: true, 
            pauseOnHover: true 
    } 
  }); 
}); 
</script>

    CODICE CSS

    
@charset "utf-8";
/* CSS Document */


/* Contenitore con gradiente */

#slider {
    border-radius: 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    box-shadow: 10px 10px 5px #dedede;
    margin: 0;    
    width: 945px;
    height: 375px;
    background: rgb(15,105,56); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBmNjkzOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjMTM2YzNiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOCUiIHN0b3AtY29sb3I9IiMyNDcwNDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4JSIgc3RvcC1jb2xvcj0iIzI3NzE0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iIzJhNzM0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEyJSIgc3RvcC1jb2xvcj0iIzMzNzQ0NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE2JSIgc3RvcC1jb2xvcj0iIzNjNzc0OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzYwODk2NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iIzgxOWY4MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc4JSIgc3RvcC1jb2xvcj0iI2I3YzZiNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc4JSIgc3RvcC1jb2xvcj0iI2I5YzhiNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2JkY2JiYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iI2M1ZDFjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iI2M1ZDJjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg2JSIgc3RvcC1jb2xvcj0iI2NiZDZjOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2QwZGFjZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2QyZGNkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkyJSIgc3RvcC1jb2xvcj0iI2Q4ZTFkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk0JSIgc3RvcC1jb2xvcj0iI2RlZTVkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2UxZTdkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2UzZTllMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWYyZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  rgba(15,105,56,1) 0%, rgba(19,108,59,1) 3%, rgba(36,112,64,1) 8%, rgba(39,113,65,1) 8%, rgba(42,115,66,1) 10%, rgba(51,116,69,1) 12%, rgba(60,119,73,1) 16%, rgba(96,137,100,1) 33%, rgba(129,159,128,1) 52%, rgba(183,198,180,1) 78%, rgba(185,200,182,1) 78%, rgba(189,203,186,1) 80%, rgba(197,209,194,1) 83%, rgba(197,210,195,1) 84%, rgba(203,214,201,1) 86%, rgba(208,218,207,1) 89%, rgba(210,220,209,1) 89%, rgba(216,225,215,1) 92%, rgba(222,229,220,1) 94%, rgba(225,231,223,1) 95%, rgba(227,233,225,1) 95%, rgba(238,242,237,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(15,105,56,1)), color-stop(3%,rgba(19,108,59,1)), color-stop(8%,rgba(36,112,64,1)), color-stop(8%,rgba(39,113,65,1)), color-stop(10%,rgba(42,115,66,1)), color-stop(12%,rgba(51,116,69,1)), color-stop(16%,rgba(60,119,73,1)), color-stop(33%,rgba(96,137,100,1)), color-stop(52%,rgba(129,159,128,1)), color-stop(78%,rgba(183,198,180,1)), color-stop(78%,rgba(185,200,182,1)), color-stop(80%,rgba(189,203,186,1)), color-stop(83%,rgba(197,209,194,1)), color-stop(84%,rgba(197,210,195,1)), color-stop(86%,rgba(203,214,201,1)), color-stop(89%,rgba(208,218,207,1)), color-stop(89%,rgba(210,220,209,1)), color-stop(92%,rgba(216,225,215,1)), color-stop(94%,rgba(222,229,220,1)), color-stop(95%,rgba(225,231,223,1)), color-stop(95%,rgba(227,233,225,1)), color-stop(100%,rgba(238,242,237,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(15,105,56,1) 0%,rgba(19,108,59,1) 3%,rgba(36,112,64,1) 8%,rgba(39,113,65,1) 8%,rgba(42,115,66,1) 10%,rgba(51,116,69,1) 12%,rgba(60,119,73,1) 16%,rgba(96,137,100,1) 33%,rgba(129,159,128,1) 52%,rgba(183,198,180,1) 78%,rgba(185,200,182,1) 78%,rgba(189,203,186,1) 80%,rgba(197,209,194,1) 83%,rgba(197,210,195,1) 84%,rgba(203,214,201,1) 86%,rgba(208,218,207,1) 89%,rgba(210,220,209,1) 89%,rgba(216,225,215,1) 92%,rgba(222,229,220,1) 94%,rgba(225,231,223,1) 95%,rgba(227,233,225,1) 95%,rgba(238,242,237,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(15,105,56,1) 0%,rgba(19,108,59,1) 3%,rgba(36,112,64,1) 8%,rgba(39,113,65,1) 8%,rgba(42,115,66,1) 10%,rgba(51,116,69,1) 12%,rgba(60,119,73,1) 16%,rgba(96,137,100,1) 33%,rgba(129,159,128,1) 52%,rgba(183,198,180,1) 78%,rgba(185,200,182,1) 78%,rgba(189,203,186,1) 80%,rgba(197,209,194,1) 83%,rgba(197,210,195,1) 84%,rgba(203,214,201,1) 86%,rgba(208,218,207,1) 89%,rgba(210,220,209,1) 89%,rgba(216,225,215,1) 92%,rgba(222,229,220,1) 94%,rgba(225,231,223,1) 95%,rgba(227,233,225,1) 95%,rgba(238,242,237,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(15,105,56,1) 0%,rgba(19,108,59,1) 3%,rgba(36,112,64,1) 8%,rgba(39,113,65,1) 8%,rgba(42,115,66,1) 10%,rgba(51,116,69,1) 12%,rgba(60,119,73,1) 16%,rgba(96,137,100,1) 33%,rgba(129,159,128,1) 52%,rgba(183,198,180,1) 78%,rgba(185,200,182,1) 78%,rgba(189,203,186,1) 80%,rgba(197,209,194,1) 83%,rgba(197,210,195,1) 84%,rgba(203,214,201,1) 86%,rgba(208,218,207,1) 89%,rgba(210,220,209,1) 89%,rgba(216,225,215,1) 92%,rgba(222,229,220,1) 94%,rgba(225,231,223,1) 95%,rgba(227,233,225,1) 95%,rgba(238,242,237,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(15,105,56,1) 0%,rgba(19,108,59,1) 3%,rgba(36,112,64,1) 8%,rgba(39,113,65,1) 8%,rgba(42,115,66,1) 10%,rgba(51,116,69,1) 12%,rgba(60,119,73,1) 16%,rgba(96,137,100,1) 33%,rgba(129,159,128,1) 52%,rgba(183,198,180,1) 78%,rgba(185,200,182,1) 78%,rgba(189,203,186,1) 80%,rgba(197,209,194,1) 83%,rgba(197,210,195,1) 84%,rgba(203,214,201,1) 86%,rgba(208,218,207,1) 89%,rgba(210,220,209,1) 89%,rgba(216,225,215,1) 92%,rgba(222,229,220,1) 94%,rgba(225,231,223,1) 95%,rgba(227,233,225,1) 95%,rgba(238,242,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f6938', endColorstr='#eef2ed',GradientType=1 ); /* IE6-8 */
}

/* Impostazioni generali Slider */

.rsContent {
    color: #FFF;
    text-shadow: 2px 2px 2px #000000;
    font-size: 30px;
    line-height: 32px;
    float: left;
}
.bContainer {
    position: relative;
}
.rsABlock {
    position: relative;
    display: block;
    left: auto;
    top: auto;
}
.blockHeadline {
    padding-left: 15px;
    font-size: 42px;
    line-height: 50px;
}
.blockSubHeadline {
    font-size: 32px;
    line-height: 40px
}
.txtCent {
    text-align: center; 
    width: 100%; 
}
.txtLeft {
    padding-left: 15px;
    text-align: left; 
    width: 100%; 
}

/* Impostazioni singole slide */

.sconti {
    margin-top: 8px;
    left: 727px;
    top: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
}

.corriere {
    margin-top: 8px;
    left: 519px;
    top: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
}

.parcheggio {
    margin-top: 8px;
    left: 692px;
    top: 0;
    bottom: -600;
    position: absolute;
    overflow: hidden;
}
    0
  • L
    Moderatore •

    Ciao playmo,
    di primo acchito mi vien da dire, qualche possibile conflitto con qualche altro elemento della pagina? Riguardo al plugin che hai usato per l'integrazione, sicuro che non sia lì il problema?

    0
  • P
    User •

    Ciao labstrot, grazie mille x la gentile risposta
    Penso di poter escludere i conflitti js perché con altri browser tutto funziona perfettamente e poi anche con firefox i testi sono animati e le img no.. boh
    Non so forse avrei dovuto usare la versione wordpress di royalslider e non il codice puro
    Tutto mi porta però ad indirizzare il debug su firefox visto che sugli altri browser tutto funziona, vorrei pubblicare i link ma non si può 😞
    Non so proprio cosa fare, adesso sono in un bar con un tablet android di un amico ed anche qua funziona, ma che strano

    0
Effettua l'accesso per rispondere