nella demo cmq mi fa capire che devo inserire tutto il codice
Citazione:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Un album di foto stile Google Plus - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="javascript" />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />
<link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<style type="text/css">
ul#pics li {/*css style for the single photo only **/
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 1px 1px 1px #999999;
display: inline-block;
width: 153px;
height:157px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
ul#pics li img {/*css style for the single photo only **/
width: 150px;
height:150px;
display: block;
}
ul#pics li:hover {/*css style for the single photo only **/
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-o-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
.single_photo {/*css style for the single photo only **/
margin-top : 80px;
margin-left:100px;
margin-top:65px;
}
h3 {
margin:25px;
}
a, a:visited, a:hover {
color: #54A6DE;
outline: medium none;
text-decoration: none;
}
#footer { /* demo footer text */
font-size:9px;
margin-top:300px;
margin-left: 250px;
color: #888888;
}
#text {
margin-top:10px;
margin-left:10px;
color: #DD4B39;
font-type: arial, sans-serif;
font-size:17px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/app.js"></script>
</head>
<body>
<div id="page_wrap">
<div id="text">Un album di foto stile Google Plus</div>
<!--Stack 1 -->
<div class="image_stack" style="margin-left:600px">
<img id="photo1" class="stackphotos" src="photos/2.jpg" >
<img id="photo2" class="stackphotos" src="photos/3.jpg" >
<img id="photo3" class="stackphotos" src="photos/1.jpg" >
</div>
<!--Stack 2 -->
<div class="image_stack" style="margin-left:300px">
<img id="photo1" class="stackphotos" src="photos/4.jpg" >
<img id="photo2" class="stackphotos" src="photos/5.jpg" >
<img id="photo3" class="stackphotos" src="photos/6.jpg" >
</div>
<div class="single_photo">
<ul id="pics">
<li><a href="#pic1" title="Photo"><img src="photos/3.jpg" alt="picture"></a></li>
</ul>
</div>
<br /><br /><br /><br /><br /><br />
<div align="center">
<a href="http://www.html.it"><img src="logo_htmlit.gif" alt="JavaScript scaricato da HTML.it" border="0" width="50" height="50" /></a><br />
</body>
</html>
sono appena riuscito ad implementare questa app.js ricopiando e rincollando il codice della demo,
quindi successivamente devo personalizzarlo modificando il codice
26-05-2012 23:08
