Animation photo en javascript
Résolu
Hello a tous,
je cherche à trouvé un script java qui me donnerais un effet du genre de ce site
http://www.stephartphotos.com/
En fait j'aimerais que les images arrives des cotés pour venir un peu en vrac comme sur le site.
Par contre la fonction de pouvoir bouger les images sur la page pas utile,éventuellement une fonction de pouvoir agrandir une image en cliquant dessus et il faudrait que les images sois importé automatiquement en gros qu'il prenne toute les images qu'il trouve dans un répertoire.
voila si qql a des idées merci beaucoup^^
je cherche à trouvé un script java qui me donnerais un effet du genre de ce site
http://www.stephartphotos.com/
En fait j'aimerais que les images arrives des cotés pour venir un peu en vrac comme sur le site.
Par contre la fonction de pouvoir bouger les images sur la page pas utile,éventuellement une fonction de pouvoir agrandir une image en cliquant dessus et il faudrait que les images sois importé automatiquement en gros qu'il prenne toute les images qu'il trouve dans un répertoire.
voila si qql a des idées merci beaucoup^^
7 réponses
-
personne n'a d'idées?
snif snif :-) -
Moi perso je trouverai un script basé sur jQuery.
Voir http://www12.jqueryrain.com/?tm=1&kw=movies&KW1=Dedicated%20Servers&KW2=Cloud%20Servers&KW3=Colocated%20Servers&searchbox=0&domainname=0&backfill=0 et pour ce qui est de choisir dans les répertoires utilisent plutôt PHP -
hello merci de ta réponse, lol j'aime bien le pseudo :-)
je vais allez voir tout de suite le lien que tu ma donné -
De rien, au plaisir de t'aider
-
effectivement il y a de super plugin j'aime assez je ne connaissait pas ce site^^
thanks -
JQUERY CODE
$(document).ready(function(){
///single
$("ul#single li").mouseover(function(){
$(this).stop().animate({height:'400px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
$("ul#single li").mouseout(function(){
$(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//horizontal
$("ul#horizontal li").mouseover(function(){
$(this).stop().animate({width:'650px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
$("ul#horizontal li").mouseout(function(){
$(this).stop().animate({width:'40px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//vertical
$("ul#vertical li").mouseover(function(){
$(this).stop().animate({height:'400px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
$("ul#vertical li").mouseout(function(){
$(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
HTML
<ul id="single">
<li><img src="6.jpg" width="782" alt="" height="440" /></li>
</ul>
<br clear="all" />
<h2>Horizontal Gallery Effect</h2>
<ul id="horizontal">
<li><img src="1.jpg" width="782" alt="" height="440" /></li>
<li><img src="2.jpg" width="782" alt="" height="440" /></li>
<li><img src="3.jpg" width="782" alt="" height="440" /></li>
<li><img src="4.jpg" width="782" alt="" height="440" /></li>
<li><img src="5.jpg" width="782" alt="" height="440" /></li>
<li><img src="6.jpg" width="782" alt="" height="440" /></li>
<li><img src="7.jpg" width="782" alt="" height="440" /></li>
<li><img src="8.jpg" width="782" alt="" height="440" /></li>
<li><img src="9.jpg" width="782" alt="" height="440" /></li>
</ul>
<br clear="all" /><br clear="all" />
<h2>Vertical Gallery Effect</h2>
<ul id="vertical">
<li><img src="1.jpg" width="782" alt="" height="440" /></li>
<li><img src="2.jpg" width="782" alt="" height="440" /></li>
<li><img src="3.jpg" width="782" alt="" height="440" /></li>
<li><img src="4.jpg" width="782" alt="" height="440" /></li>
<li><img src="5.jpg" width="782" alt="" height="440" /></li>
<li><img src="6.jpg" width="782" alt="" height="440" /></li>
<li><img src="7.jpg" width="782" alt="" height="440" /></li>
<li><img src="8.jpg" width="782" alt="" height="440" /></li>
<li><img src="9.jpg" width="782" alt="" height="440" /></li>
</ul>
CSS
/* CSS Document */
ol, ul {
list-style: none;
}
h1 { font: bold 40px/40px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
h2 { font: bold 30px/30px Helvetica, Arial, Sans-serif; color: #BFBF00; text-shadow: 0px 2px 6px #999; margin-left:20px;}
body {
}
body a {
text-decoration:none;
}
#wrapper {
width:900px;
margin-left:auto;
margin-right:auto;
overflow:visible;
margin-top:20px;
}
#vnav #horizontal li img{ border:solid 4px #999999; -moz-border-radius: 5px;
-webkit-border-radius: 5px;}
#vnav #horizontal li {
height:447px;
width:42px;
float:left;
cursor:pointer;
overflow:hidden;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
}
#vnav #vertical li img{ border:solid 4px #999999; -moz-border-radius: 5px;
-webkit-border-radius: 5px;}
#vnav #vertical li {
height:42px;
width:650px;
cursor:pointer;
overflow:hidden;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
}
#vnav #single li img{ border:solid 4px #999999; -moz-border-radius: 5px;
-webkit-border-radius: 5px;}
#vnav #single li {
height:42px;
width:650px;
cursor:pointer;
overflow:hidden;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
}
voir le demo sur ce site
http://55points.blogspot.com/2012/10/55points-jquery-css-new-way-image.html
http://55points.blogspot.com/ -
merci pour toute les réponse.
