Sujet Précédent Sujet Suivant

Animation photo en javascript

Résolu/Fermé
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 - 30 sept. 2012 à 19:49
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 - 20 oct. 2012 à 10:59
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^^
A voir également:

7 réponses

Réponse 1 / 7
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
1 oct. 2012 à 11:04
personne n'a d'idées?

snif snif :-)
0
Réponse 2 / 7
Soulitude Messages postés 25 Date d'inscription lundi 1 octobre 2012 Statut Membre Dernière intervention 4 octobre 2012 7
1 oct. 2012 à 13:44
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
0
Réponse 3 / 7
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
1 oct. 2012 à 17:21
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é
0
Réponse 4 / 7
Soulitude Messages postés 25 Date d'inscription lundi 1 octobre 2012 Statut Membre Dernière intervention 4 octobre 2012 7
1 oct. 2012 à 18:36
De rien, au plaisir de t'aider
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
2 oct. 2012 à 13:40
effectivement il y a de super plugin j'aime assez je ne connaissait pas ce site^^
thanks
0
Réponse 6 / 7
hamid
Modifié par hamid le 6/10/2012 à 22:52
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/
0
Réponse 7 / 7
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
20 oct. 2012 à 10:59
merci pour toute les réponse.
0

Discussions similaires

Connaitre la date d'une photo.
Lilouu.UK -
o -

18 réponses