11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Créer une popup animée sans grosse librairie

Bonjour,

j'aimerais créer une popup animé (un peu a la manière de lightbox) mais sans utiliser de grosse librairies comme lightbox ou autres car elles sont bien trop lourdes en taille.

Ma question est connaissez vous d'autres librairies qui font ce genre de choses mais qui sont beaucoup moins lourde en taille.

Merci pour votre aide
Modifié par ashesheart (16 Jun 2007 - 12:14)
bonjour,
A ma connaissance, il n'y a pas de popup dans le script lightbox, mais un ensemble d'éléments HTML créés et ajoutés au DOM. Le but étant de détourner les liens vers des images pour les afficher en supperposition de la page. Il est dommage que le script ne soit actif qu'après le chargement des images de la page. J'ai fait quelquechose dans le genre si ça peut te convenir
Modifié par chmel (15 Jun 2007 - 19:53)
ton systeme de popup est trés bien réalisé mais je voudrais une animation au chargement de cette derniere. C'est pour un projet important basé sur la comm. Donc pas mal d'effets visuels!
Je répète que ça ne marche qu'avec des images, alors le mot popup ne conviens pas.
Ce script ne necessite aucun élément extérieur, mais si tu souhaites voir un gif animé à la place du message "chargement en cours", c'est pas compliqué : il suffit de remplacer le src de l'image par celui de ton gif animé au moment du chargement et le tour est joué
Parce que pour toi un popup c'est forcément une fenetre qui s'ouvre avec une image?

http://www.yui-ext.com/deploy/yui-ext/docs/

rubrique Example And Demos/Dialogs/Hello World.

Clique sur le bouton Hello et tu verras une popup qui s'ouvre avec un effet animé sur la popup.

Et comme par magie la popup ne contient pas d'image mais d'autres élements HTML.
Bonjour, merci pour ton aide.

C'est exactement ce qu'il me faut du point de vue "visuel", mais en fait je voudrais placer un fomulaire (input, textarea, select,etc...) dans la fenetre qui s'ouvre et non pas une image. Tout en ayant une belle animation.

Edit: en plus la librairie ne fait que 7ko ce qui est vraiment bien comparé a lightbox v2.0
Modifié par ashesheart (16 Jun 2007 - 11:29)
Modérateur
Ca nécessite quand même d'inclure certains éléments de mootools ce qui au final donne 26ko de script. Smiley cligne
Cela dit, ce n'est pas excessif au vu des divers effets.

Maintenant, rien ne t'empêche de modifier le script pour l'adapter à tes besoins. Tu pourrais même le simplifier sur certaines parties du fait que le "prev" et le "next" ne doivent pas te servir à grand chose.

En somme, tu n'as plus qu'à mettre la main à la pate. Smiley jap
D'accord donc avec le lien que tu m'as donné il y a possibilité de réaliser une popup avec des élements de formulaire si je bidouille un peu le script ?
Modérateur
oui mais ce n'est pas qu'un peu qu'il va falloir bidouiller puisque tout est fondé par rapport aux images à la base. Cela dit, la partie "effets visuels" sera déjà présente.
Salut,

Je viens de retrouver quelques liens qui avaient été postés sur le forum vers des librairies qui font plus ou moins ce que tu cherches (je crois). Je sais pas si c'est ce que tu cherches (en taille et fonctionnalités), mais des fois que ça puisse t'aider...

A+
ashesheart a écrit :
Parce que pour toi un popup c'est forcément une fenetre qui s'ouvre avec une image?

non, mais pour le script lightbox et le mien : oui Smiley rolleyes .
L'exemple yui-ext : Un rectangle qui s'agrandit progressivement pour atteindre la dimention de ta fausse popup est encore plus simple à réaliser sans librairie Smiley lol
Je n'ai représenté que la partie animation. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test animation</title>
<style type="text/css"><!--
@media screen, projection
{
#anim	{
		background-color: #cff;
		position:absolute;		
		z-index:100;
	}
};
--></style>
<script type="text/javascript">
var d=document,apW=apH=0,ap,finalW=400,finalH=250;
</script>
</head>
<body>
<a href="#" onclick="
	if(!ap){ap=d.createElement('div');ap.id='anim';d.body.appendChild(ap)}
		animation=setInterval(function(){
			apW+=finalW/15;apH+=finalH/15;
			with(ap.style){width=apW+'px';height=apH+'px';top=apH/2+'px';left=apW/2+'px'}
			if(apW>finalW){clearInterval(animation);apW=apH=0}
			},30);return false">test</a>
</body>
</html>

Modifié par chmel (20 Jun 2007 - 18:42)
Sujet clos
Aller à