PDA

Visualizza la versione completa : problema con slideshow


mondesign
14-10-2011, 12:26
Ciao a tutti,
ho un problema con questo slideshow http://demo.tutorialzine.com/2011/01/slideshow-autoadvance-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-to-make-auto-advancing-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;">
imgx/logo.png (homeprovax.html)
</div>
<div id="header_actions" style="width:40%; float:right;">
Say hello! (info@blabla.it)
Follow us (http://www.facebook.com)
imgx/Fb.png (http://www.facebook.com)
</div>
</div>
</div>
<div id="linebreak2" align="center"></div>
<div id="intro"> imgx/titolo.png</div>

<div id="slideshow">
<ul class="slides">

imgx/s_gm_logo.png
imgx/s_linda_logo.png
imgx/s_gm_bro.png
[/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"> imgx/servizi.png</img>
</div>
<div id="footer">


<span>


imgx/footer.png</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-transition:opacity 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;
cursor:pointer;
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);
})();

});

alexba64
15-10-2011, 12:48
Sarebbe interessante vedere cosa hai fatto attraverso un link.

Detto questo, inizia a verificare la versione di jquery che utilizzi e aggiornala a quella pi attuale.

morocarlo
15-10-2011, 15:47
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="autoadvance.js"></script>

hai incluso anche questi due file?

mondesign
16-10-2011, 00:47
S i due script li ho messi.. Boh..a me sembra tutto giusto..non riesco a capire cosa c' che non va..argh!!

morocarlo
16-10-2011, 16:48
se ci passi un link possiamo tentare di capire meglio...

Loading