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
CODICE CSS
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
Codice:
<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
Codice:
@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;
}
