Buonasera
Vorrei realizzare una galleria come in oggetto . Ho trovato un sito molto utile che mi riporta queste seguenti indicazioni
3D CAROUSEL
Created a 3D Carousel from a list of images, with reflections and animated by mouse position.
Options:
[TABLE="width: 990"]
[TR="class: odd"]
[TD="bgcolor: #EFF7FF"]items[/TD]
[TD="bgcolor:"]String[/TD]
[TD="bgcolor:"]mandatory[/TD]
[TD="bgcolor:"]items selection[/TD]
[/TR]
[TR="class: odd"]
[TD="bgcolor:"]itemWidth[/TD]
[TD="bgcolor:"]Integer[/TD]
[TD="bgcolor:"]mandatory[/TD]
[TD="bgcolor:"]the max width for each item[/TD]
[/TR]
[TR="class: odd"]
[TD="bgcolor:"]itemHeight[/TD]
[TD="bgcolor:"]Integer[/TD]
[TD="bgcolor:"]mandatory[/TD]
[TD="bgcolor:"]the max height for each item[/TD]
[/TR]
[TR="class: odd"]
[TD="bgcolor:"]itemMinWidth[/TD]
[TD="bgcolor:"]Integer[/TD]
[TD="bgcolor:"]mandatory[/TD]
[TD="bgcolor:"]the minimum width for each item, the height is automaticaly calculated to keep proportions[/TD]
[/TR]
[TR="class: odd"]
[TD="bgcolor:"]rotationSpeed[/TD]
[TD="bgcolor:"]Float[/TD]
[TD="bgcolor:"]mandatory[/TD]
[TD="bgcolor:"]the speed for rotation animation[/TD]
[/TR]
[TR="class: odd"]
[TD="bgcolor:"]reflectionSize[/TD]
[TD="bgcolor:"]Float[/TD]
[TD="bgcolor:"]mandatory[/TD]
[TD="bgcolor:"]the reflection size a fraction from items' height[/TD]
[/TR]
[TR="class: odd"]
[TD="bgcolor:"]slowOnHover[/TD]
[TD="bgcolor:"]Boolean[/TD]
[TD="bgcolor:"]optional[/TD]
[TD="bgcolor:"]if true the rotation speed slows down when an item is hovered[/TD]
[/TR]
[TR="class: odd"]
[TD="bgcolor:"]slowOnOut[/TD]
[TD="bgcolor:"]Boolean[/TD]
[TD="bgcolor:"]optional[/TD]
[TD="bgcolor:"]it true the rotation speed slows down when the cursor leaves the carousel[/TD]
[/TR]
[/TABLE]
Code sample:
SCRIPTS
window.onload =
function()
{
$('#carousel').Carousel( {
itemWidth: 110,
itemHeight: 62,
itemMinWidth: 50,
items: 'a',
reflections: .5,
rotationSpeed: 1.8 } ) ; }
HTML
<div id="carousel"> <a href="" title=""><img src="" width="100%" /></a> <a href="" title=""><img src="" width="100%" /></a> <a href="" title=""><img src="" width="100%" /></a> <a href="" title=""><img src="" width="100%" /></a> <a href="" title=""><img src="" width="100%" /></a> </div>
CSS
#carousel {
width: 700px;
height: 150px;
background-color: #111;
position: absolute;
top: 200px;
left: 100px; }
a
{
position: absolute;
width: 110px; }
come potrei procedere ? ho provato tramite dreamweaver a fare un file css per lo script in css riportato
poi ho fatto un file html con lo script riportato e in più al suo interno ho inserito lo script window.onload
ovviamente in img src ho inserito i nomi dei file ma non mi funziona perfettamente nulla....sicuramente ho sbagliato tutto , purtroppo sono alle prime armi..potreste darmi una mano ? ve ne sarei davvero grato
cordiali saluti Vincenzo