[résolu] Petit défi pour les experts

Bonjour à tous !

Je suis tombé dernièrement sur ce site : http://www.typeneu.com/

J'ai trouvé l'agencement des vignettes incroyable et inédit. En effet, il ne suffit pas de faire un simple "float:left" sur les vignette pour avoir ce résultat. Regardez de plus près, il n'y a pas de "trou" au retours à la lignes... Le css 2 ne permet pas de faire cela.

Je crois que cela doit être du javascript qui gère l'agencement des vignettes... J'aimerais faire pareil mais je ne suis guère doué en javascript...

Des idées ?

Merci d'avance.
Modifié par Franquito (15 Nov 2008 - 11:15)

Salut

Bah woui...

<script type="text/javascript" src="lib/js/prototype.js"></script>
<script type="text/javascript" src="lib/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="lib/js/jquery.preload.js"></script>
<script type="text/javascript" src="lib/js/stats.js"></script>

<script type="text/javascript">
	jQuery.noConflict();

	jQuery(document).ready(function () {

		for (i=0; i<11; i++){
			jQuery('.imgid'+i).fadeTo(0.001, 0);
		}
		
		jQuery.blockUI({ message: '<img src="lib/images/loader.gif" />' });		
		setTimeout(function() { 
        jQuery.unblockUI({ 
            onUnblock: function(){ 
 				jQuery(function( $ ){			
				$.preload( 'img', {
 	  				onComplete:complete,
    				placeholder:'http://www.typeneu.com/lib/images/blank.gif',
					threshold: 3
				});
				function complete( data ){
					$(data.id).fadeIn('slow');
				};
				});
	        } 
        }); 
   	}, 1000);
	})				

	
	<!-- Begin hide script 
	function jmpMS(site) { 
		window.location.href = site 
	} 
	// End hide -->

</script>

<script type="text/javascript" src="lib/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="lib/js/layout.js"></script>
<script type="text/javascript" src="lib/js/jquery.quicksearch.js"></script>
<script type="text/javascript" src="lib/js/EditInPlace.js"></script>
<script type="text/javascript" src="http://www.typeneu.com/lib/js/AC_RunActiveContent.js"></script>
<script type="text/javascript" src="lib/js/AC_QuickTime.js"></script>
<!--<script type="text/javascript" src="lib/js/jquery.columnize.js"></script>-->

<script type="text/javascript">
	function onDomLoaded() { new Layout($('main')); }
	document.observe('dom:loaded', onDomLoaded);

</script>

Ya ka

eh wi ghost, ya qu'à...

J'ai farfouillé dans les .js mais je n'ai pas trouvé l'endroit où cela positionne les vignettes...

Ok ben j'ai trouvé, c'est une classe javascript qui analyse toutes les vignettes et leurs dimensions, et place un positionnement absolute à chacune pour avoir un tel rendu !

C'est la première fois que je vois une telle pratique, c'est dingue

salut

avant de vouloir la même chose ouvre avec ie6/7...çà l'fait pas!

a écrit :
C'est la première fois que je vois une telle pratique, c'est dingue

et que dire de çà

<table width="280" cellpadding="0" cellspacing="0">

    <tr>
       <td width="280">

ou çà

target='_blank'

avec un doctype strict çà fait tâche...et on trouve au moins une centaine d'erreurs js...autant tout codé en css! c'est possible en jouant avec les absolutes en virant tout ces tableaux inutiles et en laissant php calculé la place nécessaire, il sait le faire.tient, je vais tenter.
Modifié par keran (15 Nov 2008 - 17:26)

Salut keran, c'est évident que je ne vais pas pompé lol.

je suis curieux de savoir comment php pourrai calculer et positionné les vignette à la place de javascript... tiens moi au courant si tu y arrives parce que je ne suis pas fan d'un site qui ne s'affiche pas sous IE

salut franquito et les autres

a écrit :
je suis curieux de savoir comment php pourrai calculer et positionné les vignette à la place de javascript

pour php, http://fr2.php.net/manual/fr/function.getimagesize.php et un soupçon de css fait le reste.exemple :

http://easygal.guitweb.com/diaporama/

sans tableaux, sans hacks, rien d'autre que php et css et compatible ie, firefox, opera...windows, linux, mac. merci éric meyer pour vos travaux sur css!

c'est un exemple.évidement, le rendu n'est pas le même mais je suis presque sûr que c'est possible en jouant avec les positions, les margins/paddings et les pourcentages, je ne suis pas encore dessus mais j'y pense parce que, oui, c'est un vrai défit très intéressant et suis persuadé, peut être à tort, que je le redis, c'est possible.à priori, les problèmes css proviennent des commentaires.avec moi!! les geeks pro des css! et si ont crééent un pendant de ce type de positionnement tous ensembles, pour la communauté, en css?

je m'y colle et dans 2/3 jours je te fais signe pour le résultat.

PS: n'oubliez jamais éric meyer et ses prouesses et toutes et ceux qui contribuent à csszengarden.com...

j'édite :

css: { 
        padding:        0,
        margin:         0,
        width:          '30%', 
        top:            '20px', 
        left:           '20px', 
        textAlign:      'left', 
        color:          '#000', 
        border:         '0px solid #aaa',
        backgroundColor:'#fff',
        cursor:         'wait'
    },

c'est ti pas mignon çà? :

border: '0px solid #aaa',

tiré d'un premier jet de blockUI.js, je continue
Modifié par keran (15 Nov 2008 - 23:48)

allez, j'en fait encore plus et hors sujet

image tirée des commentaires



pardon, c'est hors sujet mais çà enfonce le clou, ces codes sont pourris!

sacrée compet!! sadique và

et cette image prouve que css peut être utilisé à la place de js



le trou au milieu c'est css! rendu avec firefox 3. comme quoi...
Modifié par keran (16 Nov 2008 - 00:35)

hé puis tient une autre!!



c'est sympà, oui, mais quand même c'est bourré de bugs...

et deux autres :





maman, je suis perdu dans ce foutoir...mais finalement, opera me dit que c'est ie qui buggue sur les css...même rendu avec firefox et opera.donc...revoir les css, en autre.API flickr?? c'est pas gagner!! allons, allons!! de l'intelligence il se peut, alors!? ok! je continu! sympà comme défit...
Modifié par keran (16 Nov 2008 - 01:57)

keran, pour ce qui est du trou, c'est parce qu'il y a une vignette qui fait le double des autres. Ainsi, le trou est inévitable dans ce cas précis.

Je connaissais la fonction php pour calculer la taille d'une image mais comment calcule-tu la hauteur d'un div avec du texte ??

Autre problème, si l'utilisateur redimensionne la fenetre de son navigateur, l'agencement s'adapte avec javascript, ce qui n'est pas possible avec php.

PS : j'ai pas compris le rapport avec ta gallerie... dans ton exemple les images sont comprises dans des div qui font tous la même hauteur... c'est trop simple.
Modifié par Franquito (16 Nov 2008 - 21:14)

Bonjour,

Sur le site en question, page d'accueil, il y a 9 éléments dans la «colonne» (visuelle) de gauche, et 7 dans chaque autre. En répartissant les contenus dans 4 DIV (flottants par exemple), on peut obtenir ce genre de résultat. La seule contrainte est que les contenus les plus récents seront dans la colonne de gauche par exemple, et pas répartis de manière égale dans le haut des quatre colonnes.

Reste le problème du bloc à placer sur deux colonnes, qui est assez ardu sans passer par la solution «je positionne tout en absolu avec JavaScript».

La solution utilisée sur le site cité, avec JavaScript, est séduisante par certains aspects. Mais elle est aussi plutôt problématique. Elle pose notamment un gros problème d'accessibilité dès que l'on a le malheur d'augmenter la taille du texte. (Par contre si la taille réglée pour le texte est déjà importante au chargement de la page, ça passe. C'est juste l'agrandissement qui pose problème.)

De plus, même si ça n'est pas directement lié, ce site est d'une lourdeur atroce. 3,5Mo pour la page d'accueil, sans compter les animations Flash éventuelles! Même en haut débit c'est très pénible, j'ai failli ne pas laisser la page se charger et partir aussi sec. Ce que j'aurais fait dans un autre contexte (résultat d'un moteur de recherche, visite par simple curiosité).

Enfin, signalons que le colonage en CSS3 permet de faire ce genre de chose. C'est implémenté pour l'instant dans Firefox 2+ (voire avant?) et Safari 3+.

Salut Florent, j'ai aussi songé à la solution de faire 4 div pour 4 colonnes mais elle n'est clairement pas agréable à la lecture. Il faut faire du haut vers le bas, et revenir à la seconde, puis la 3eme, puis la 4eme...

Le danger c'est que le 3eme article soit moins mis en valeur que le 15ème.

Je pense qu'en attendant css3, il n'y a que javascript qui permet de faire une telle chose. Je vais essayer refaire le script en veillant à ce que cela marche sous IE et en retirant tous les effets bidons qui alourdissent la page.