Question

I’m trying to create an area that can be changed dinamically with arrows, so I’m opting for the html5 slideshows.

I tried to make this work http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/ but it isn’t working, this is what I tried to do http://jsfiddle.net/frHV5/

Hope you can help me, thanks in advance

Answer 1

First: you haven’t copied the entire JavaScript.

Then the security problem comes. You can use canvas to edit images only on local level.
This means the following wont work:

<li><img src="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/img/photos/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
<li><img src="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
<li><img src="http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>

But this will:

<li><img src="1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
<li><img src="2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
<li><img src="3.jpg" width="620" height="320" alt="Power Station" /></li>

In summary: Just copy correctly the javascript, the CSS, copy the images to you machine, edit the URLs in the html and that’s it.