Ciao a tutti,
ho un problema con questo slideshow http://demo.tutorialzine.com/2011/01...dvance-jquery/
Vorrei implementarlo nel mio sito personale, ma una volta fatte le relative modifiche personalizzando sfondo, foto ecc... lo slideshow funziona benissimo con Safari 4.1.3 su iMac, ma non funziona nè su Safari su iPhone, nè su Firefox (l'ho provato sulle versioni 3.6 e 7)..
Non riesco a venirne fuori...ho letteralmente copiato/incollato i codici dei file .js ma non riesco a capire cosa c'è che non va..
Lo slideshow al link che vi ho postato sopra funziona, perchè quello "modificato" no?
questi i codici (si scaricano anche da qui http://tutorialzine.com/2011/01/how-...ng-slideshows/):
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>bla bla bla</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="favicon.ico" rel="shortcut icon" />
<meta name="viewport" content="width=1020"/>
<style type="text/css">.style1 {font-size: 36px}</style>
</head>
<body>
<div class="homepg" id="home"></div>
<div class="linebreak"></div>
<div id="wrapper">
<div style="height: auto; overflow: hidden">
<div id="logo" style="width:40%; float:left;">
[img]imgx/logo.png[/img]
</div>
<div id="header_actions" style="width:40%; float:right;">
Say hello!
Follow us
[img]imgx/Fb.png[/img]
</div>
</div>
</div>
<div id="linebreak2" align="center"></div>
<div id="intro"> [img]imgx/titolo.png[/img]</div>
<div id="slideshow">
<ul class="slides">
[*][img]imgx/s_gm_logo.png[/img][*][img]imgx/s_linda_logo.png[/img][*][img]imgx/s_gm_bro.png[/img][/list]
<span class="arrow previous"></span>
<span class="arrow next"></span>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="autoadvance.js"></script>
<div id="servizi" align="center"> [img]imgx/servizi.png[/img]</img>
</div>
<div id="footer">
<span>
[img]imgx/footer.png[/img]</br></br></br></span></p>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0;
line-height: 18px;
font-size: 12px;
font-family: Helvetica, sans-serif;
color: #333333;
}
/*a {
text-decoration: none;
border-style: none;
}
a.text {
color: #6fbe44;
text-decoration: none;
}
a.text:hover {
color: #6fbe44;
text-decoration: none;
}*/
html {
background-image: url("imgx/bg_general.jpg");
background-repeat: repeat;
height: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-color: #666666 repeat scroll 0 0 transparent;
color: #666666;
font-family: Times;
}
.linebreak {
background: url("imgx/bg_top.jpg") repeat-x scroll 0 0 transparent;
text-align: center;
background-position: center top;
height: 88px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
width: 100%;
}
#wrapper {
background: url("imgx/bg_titolo.jpg") repeat scroll 0 0 transparent;
text-align: center;
background-position: center top;
height: 120px;/*vero valore: 155px*/
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
#logo {
background: url("imgx/logo.png") no-repeat scroll 0 0 transparent;
text-align: center;
background-position: center top;
height: 120px;
padding-left: 60px;
margin-top: 0px;
width: 300px;
}
#logo a {
-webkit-transition: opacity 0.1s linear;
-moz-transitionpacity 0.1s linear;
background: url("imgx/logo.png") no-repeat scroll 0 0 transparent;
display: block;
opacity: 0;
}
/************************************************** ****************************/
/* Header */
/************************************************** ****************************/
#header {
float: left;
width: 200px;
height: 50px;
}
#header p#collab {
float: left;
height: 23px;
font: 12px/23px "HelvRoman", Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #333333;
}
#header_actions { float: right; }
#header_actions a {
float: left;
height: 23px;
font: 12px/23px "HelvBold", Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #333333;
text-decoration: none;
font-weight: bold;
}
#header_actions a#email { margin-top: 85px; margin-left: 200px; }
#header_actions a#email:hover { color: #f37021; }
#header_actions a#fb { margin-top: 85px; margin-left: 20px; }
/*#header_actions a#fb:hover { color: #6fbe44; }*/
#header_actions a#fb_b { margin-top: 75px; margin-left: 5px; border:none; }
#header_actions a#fb_b:hover { background: url("imgx/Fb_ov.png") no-repeat scroll 0 0 transparent; }
/*#header_actions a#fb_b:hover { color: #6fbe44; }*/
#header_actions a#reel {
background: #3d3d3d;
color: #151515;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 0 5px;
}
#header_actions a#reel:hover { background: #f37021; }
#wrapper2 {
background: url("imgx/bg.jpg") repeat scroll 0 0 transparent;
text-align: center;
background-position: center top;
height: 700px /*vero valore: 561px*/;
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
#linebreak2 {
background: url("imgx/linebreak2.png") repeat-x scroll 0 0 transparent;
text-align: center;
background-position: center top;
height: 6px;
margin-top: 0px;
width: 100%;
}
#intro {
margin: 40px auto;
width: 950px;
height: 105px;
}
#intro2 {
line-height: 22pt;
text-align: center;
margin: 0px auto;
width: 950px;
}
#slideshow{
background: url("imgx/bg_sshow.png");
border: 0px solid #ffffff;
/*-moz-border-radius:15px;
-webkit-borderradius: 15px;*/
height:450px;
margin:90px auto 0;
position:relative;
width:960px;
/*-moz-box-shadow:0 0 22px #333333;
-webkit-box-shadow:0 0 22px #333333;
box-shadow:0 0 22px #333333;*/
}
#slideshow ul{
height:400px;
left:-1px;
list-style:none outside none;
overflow:hidden;
position:absolute;
top:30px;
width:960px;
}
#slideshow li{
position:absolute;
display:none;
z-index:5;
}
#slideshow li:first-child{
display:block;
z-index:1000;
}
#slideshow .slideActive{
z-index:1000;
}
#slideshow canvas{
display:none;
position:absolute;
z-index:100;
}
#slideshow .arrow{
height:86px;
width:60px;
position:absolute;
background:url("imgx/arrows.png") no-repeat;
top:50%;
margin-top:-43px;
cursorointer;
z-index:5000;
opacity: 0%;
}
#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}
#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}
#servizi {
text-align: center;
background-position: center top;
margin:20px auto 0;
position:relative;
width: 1000px;
height: 100px;
}
#colonna {
line-height: 22pt;
text-align: center;
background-position: absolute;
z-index: 10px;
}
#footer {
background: url("imgx/bg_bot.jpg") repeat scroll 0 0 transparent;
text-align: center;
background-position: center top;
height: 96px;
vertical-align: middle;
margin-top:30px;
width: 100%;
}
SCRIPT.JS
$(window).load(function(){
// We are listening to the window.load event, so we can be sure
// that the images in the slideshow are loaded properly.
// Testing wether the current browser supports the canvas element:
var supportCanvas = 'getContext' in document.createElement('canvas');
// The canvas manipulations of the images are CPU intensive,
// this is why we are using setTimeout to make them asynchronous
// and improve the responsiveness of the page.
var slides = $('#slideshow li'),
current = 0,
slideshow = {width:0,height:0};
setTimeout(function(){
window.console && window.console.time && console.time('Generated In');
if(supportCanvas){
$('#slideshow img').each(function(){
if(!slideshow.width){
// Taking the dimensions of the first image:
slideshow.width = this.width;
slideshow.height = this.height;
}
// Rendering the modified versions of the images:
createCanvasOverlay(this);
});
}
window.console && window.console.timeEnd && console.timeEnd('Generated In');
$('#slideshow .arrow').click(function(){
var li = slides.eq(current),
canvas = li.find('canvas'),
nextIndex = 0;
// Depending on whether this is the next or previous
// arrow, calculate the index of the next slide accordingly.
if($(this).hasClass('next')){
nextIndex = current >= slides.length-1 ? 0 : current+1;
}
else {
nextIndex = current <= 0 ? slides.length-1 : current-1;
}
var next = slides.eq(nextIndex);
if(supportCanvas){
// This browser supports canvas, fade it into view:
canvas.fadeIn(function(){
// Show the next slide below the current one:
next.show();
current = nextIndex;
// Fade the current slide out of view:
li.fadeOut(function(){
li.removeClass('slideActive');
canvas.hide();
next.addClass('slideActive');
});
});
}
else {
// This browser does not support canvas.
// Use the plain version of the slideshow.
current=nextIndex;
next.addClass('slideActive').show();
li.removeClass('slideActive').hide();
}
});
},100);
// This function takes an image and renders
// a version of it similar to the Overlay blending
// mode in Photoshop.
function createCanvasOverlay(image){
var canvas = document.createElement('canvas'),
canvasContext = canvas.getContext("2d");
// Make it the same size as the image
canvas.width = slideshow.width;
canvas.height = slideshow.height;
// Drawing the default version of the image on the canvas:
canvasContext.drawImage(image,0,0);
// Taking the image data and storing it in the imageData array:
var imageData = canvasContext.getImageData(0,0,canvas.width,canvas .height),
data = imageData.data;
// Loop through all the pixels in the imageData array, and modify
// the red, green, and blue color values.
for(var i = 0,z=data.length;i<z;i++){
// The values for red, green and blue are consecutive elements
// in the imageData array. We modify the three of them at once:
data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
// After the RGB elements is the alpha value, but we leave it the same.
++i;
}
// Putting the modified imageData back to the canvas.
canvasContext.putImageData(imageData,0,0);
// Inserting the canvas in the DOM, before the image:
image.parentNode.insertBefore(canvas,image);
}
});
AUTOADVANCE.JS
$(window).load(function(){
// The window.load event guarantees that
// all the images are loaded before the
// auto-advance begins.
var timeOut = null;
$('#slideshow .arrow').click(function(e,simulated){
// The simulated parameter is set by the
// trigger method.
if(!simulated){
// A real click occured. Cancel the
// auto advance animation.
clearTimeout(timeOut);
}
});
// A self executing named function expression:
(function autoAdvance(){
// Simulating a click on the next arrow.
$('#slideshow .next').trigger('click',[true]);
// Schedulling a time out in 5 seconds.
timeOut = setTimeout(autoAdvance,5000);
})();
});
Rispondi quotando
