Animation photo en javascript

Résolu

powerguitou Messages postés 472 Date d'inscription Statut Membre Dernière intervention -
powerguitou Messages postés 472 Date d'inscription Statut Membre Dernière intervention - 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^^

Afficher la suite

A voir également:

Animation photo en javascript
Google photo - Télécharger - Albums photo
Google maps photo maison - Guide
Photo filtre 7 gratuit - Télécharger - Retouche d'image
Partage photo - Guide
Google traduction photo - Guide

7 réponses

Réponse 1 / 7

powerguitou Messages postés 472 Date d'inscription Statut Membre Dernière intervention 29

personne n'a d'idées?

snif snif :-)

Réponse 2 / 7

Soulitude Messages postés 25 Date d'inscription Statut Membre Dernière intervention 7

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

Réponse 3 / 7

powerguitou Messages postés 472 Date d'inscription Statut Membre Dernière intervention 29

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é

Réponse 4 / 7

Soulitude Messages postés 25 Date d'inscription Statut Membre Dernière intervention 7

De rien, au plaisir de t'aider

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 Statut Membre Dernière intervention 29

effectivement il y a de super plugin j'aime assez je ne connaissait pas ce site^^
thanks

Réponse 6 / 7

hamid

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/

Réponse 7 / 7

powerguitou Messages postés 472 Date d'inscription Statut Membre Dernière intervention 29

merci pour toute les réponse.

Discussions similaires

Dissocier les photos de ma galerie sur Google Photos

Votre réponse

Discussions similaires