Photo en background étirable, ajustable homothétiquement

Bonjour à tous,

je pose à nouveau une colle que j'avais posé au mauvais endroit sur ce forum...


Je souhaite donc faire une page internet avec une grande photo super lourde qui mettra 14 min à s'afficher et qui se redimensionne automatiquement selon la taille du navigateur, de l'écran, etc.

Après avoir cherché (certainement tès mal) pendant des heures sur internet, j'ai trouvé une discussion sur ce forum qui m'a fait penser à mon problème... Il s'agit de celle-ci : http://forum.alsacreations.com/topic-1-53281-1-Besoin-daide-pour-un-simple-background-ajustable.html

Avec les codes indiqué, dans ce fameux sujet, j'ai réussi à faire en sorte que mon jpeg se redimensionne avec le navigateur mais ce n'est évidement pas homothétique...

J'ai vu sur ce site : http://www.hermann-werhonig.ch/ qu'il est possible de faire un fond redimensionnable homothétiquement.

Alors, oui, il y'a du Javascript... J'ai bien essayé de lire mais je suis très très très débutant et c'est encore trop compliqué pour moi. Peut-être qu'en m'indiquant le bout de Javascript dont j'ai besoin, ça irait mieux... (C'est d'ailleurs pour cela que je poste dans la rubrique Javascript du forum...)

Je suis actuellement en formation Webdesign et je ne demande qu'à apprendre. Je me trouve ici confronté à un problème et je n'ai pas envie de le contourner.

Voici 2 liens pour illustrer ce que je veux faire. C'est à l'état de brouillon mais ça peut-être parlant je pense.

Page avec l'image redimensionnable, mais pas homothétiquement : http://www.thibaudchesne.com/projetsite/etire.html

Et ce que j'aimerais bien faire : http://www.thibaudchesne.com/projetsite/index.html
Ici la photo est en background via le CSS dans une div, et dans une autre div il y'a une image répétée qui vient par dessus...

Salut,

Je viens de regarder dans son code. Apparement c'est un plug-in jQuery qui réalise ce que tu souhaites. Renseigne toi sur le plugin supersized.

http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

A plus

Bonjour,

En CSS3 il y a la propriété background-size, implémentée dans tous les navigateurs modernes, dont IE9 (qui sortira dans les jours/semaines qui viennent). Ça ressemble à ça:

body {
  background-image: url(superimagedefou.jpg);
  background-size: cover; /* Voir aussi "contain" */
}

Si c'est pour un site perso, je recommande cette solution... et une couleur de fond unie ou un motif tout bête pour IE 7-8, ou une image non redimensionnée, tant pis pour eux.

Sinon, oui, on doit trouver des scripts JS qui font plus ou moins ça.

En effet j'avais pas pensé au CSS 3.
Mais du coup t'as 2 choix pour le prix d'un seul

Merci pour vos réponses ! Je ne suis que webdesigner en herbe et pas encore très au fait du CSS3, je travaille encore en CSS2...

Je suis donc en formation, un collègue de classe m'a dégoté ceci : http://buildinternet.com/project/supersized/

Le même site que tu me conseilles Juju57.

Et ça marche très bien !

Effectivement, c'est pour mon site perso, pour y mettre des boulots, mon cv, etc. Je pense que je vais ajouter des if IE6, if IE12, if Safari 24, iPhone 5, etc. par la suite.

Douce Propagande a écrit :
Je pense que je vais ajouter des if IE6, if IE12, if Safari 24, iPhone 5, etc. par la suite.

Mieux vaut se renseigner sur la notion d'amélioration progressive (progressive enhancement). Le browser sniffing, c'est le mal.

Hello... Me revoici pour une autre question sur le diaporama supersize...

Je fais un autre site. J'aimerais mettre un diaporama dans le header... MAIS. J'aimerais bien un diaporama qui prenne toute la largeur du navigateur... Width:100%. (Avec une hauteur fixe aussi... Tant qu'on y est, allez.)

J'ai d'abord fait un essai avec une photo fixe. J'ai placé une image en background, dans le css, de mon div header, et écrit que ce div faisait 100% de width, et 300 px en height.

Mais je voulais du mouvement alors j'ai commencé par faire un diaporama comme ça :

<script type="text/javascript">
var tableau=[
			{"source":"images/picta1.jpg",},
			{"source":"images/picta2.jpg",},
			];
			
			var y=1;
			function diapo()
			{
				y=y+1;
				if(y==2)
				{y=0;}
				
				document.getElementById("header").src=tableau[y]["source"];
				setTimeout("diapo()", 5000);
			}

</script>

Et évidemment, je me retrouvais avec une barre de scroll gauche/droite.

J'ai donc pensé à ce cher JQuery Supersize !

Je reviens sur ce sujet parce que je me demande si je peux placer un diaporama supersize qui se redimensionne non plus en fonction de la fenêtre du navigateur mais en fonction d'une div.

Je me demande aussi, si le supersize est la bonne solution pour ce cas de figure...

Voici quelques images pour illustrer un peu mon « problème », j'espère me faire comprendre...

http://thibaudchesne.com/imgext/supasize3.jpg

http://thibaudchesne.com/imgext/supasize1.jpg

http://thibaudchesne.com/imgext/supasize2.jpg
Modifié par Douce Propagande (30 Mar 2011 - 23:45)

Je crois que j'ai trouvé la solution à mon problème !

Ici : http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

J'ai téléchargé la source, ouvert le .js, le css et le html mais je n'arrive pas à décortiquer le .js pour récupérer les éléments qui m'intéressent afin d'en faire un truc simple.

/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 6000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
		"title" : "Stairs",
		"image" : "YeuTC1.jpg",
		"url" : "http://www.sxc.hu/photo/1271909",
		"firstline" : "Going on",
		"secondline" : "vacation?"
	}, {
		"title" : "Office Appartments",
		"image" : "YeuTC2.jpg",
		"url" : "http://www.sxc.hu/photo/1265695",
		"firstline" : "Or still busy at",
		"secondline" : "work?"
	}, {
		"title" : "Mountainbiking",
		"image" : "YeuTC3.jpg",
		"url" : "http://www.sxc.hu/photo/1221065",
		"firstline" : "Get out and be",
		"secondline" : "active"
	}
];



$(document).ready(function() {
		
	// Backwards navigation
	$("#back").click(function() {
		stopAnimation();
		navigate("back");
	});
	
	// Forward navigation
	$("#next").click(function() {
		stopAnimation();
		navigate("next");
	});
	
	var interval;
	$("#control").toggle(function(){
		stopAnimation();
	}, function() {
		// Change the background image to "pause"
		$(this).css({ "background-image" : "url(images/btn_pause.png)" });
		
		// Show the next image
		navigate("next");
		
		// Start playing the animation
		interval = setInterval(function() {
			navigate("next");
		}, slideshowSpeed);
	});
	
	
	var activeContainer = 1;	
	var currentImg = 0;
	var animating = false;
	var navigate = function(direction) {
		// Check if no animation is running. If it is, prevent the action
		if(animating) {
			return;
		}
		
		// Check which current image we need to show
		if(direction == "next") {
			currentImg++;
			if(currentImg == photos.length + 1) {
				currentImg = 1;
			}
		} else {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos.length;
			}
		}
		
		// Check which container we need to use
		var currentContainer = activeContainer;
		if(activeContainer == 1) {
			activeContainer = 2;
		} else {
			activeContainer = 1;
		}
		
		showImage(photos[currentImg - 1], currentContainer, activeContainer);
		
	};
	
	var currentZindex = -1;
	var showImage = function(photoObject, currentContainer, activeContainer) {
		animating = true;
		
		// Make sure the new container is always on the background
		currentZindex--;
		
		// Set the background image of the new active container
		$("#headerimg" + activeContainer).css({
			"background-image" : "url(images/" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentZindex
		});
		
		// Hide the header text
		$("#headertxt").css({"display" : "none"});
		
		// Set the new header text
		$("#firstline").html(photoObject.firstline);
		$("#secondline")
			.attr("href", photoObject.url)
			.html(photoObject.secondline);
		$("#pictureduri")
			.attr("href", photoObject.url)
			.html(photoObject.title);
		
		
		// Fade out the current container
		// and display the header text when animation is complete
		$("#headerimg" + currentContainer).fadeOut(function() {
			setTimeout(function() {
				$("#headertxt").css({"display" : "block"});
				animating = false;
			}, 500);
		});
	};
	
	var stopAnimation = function() {
		// Change the background image to "play"
		$("#control").css({ "background-image" : "url(images/btn_play.png)" });
		
		// Clear the interval
		clearInterval(interval);
	};
	
	// We should statically set the first image
	navigate("next");
	
	// Start playing the animation
	interval = setInterval(function() {
		navigate("next");
	}, slideshowSpeed);
	
});

Je voudrais réduire le code au tableau et à la fonction de slideshow et c'est tout.
Sans titre, sans url, rien. Juste un diaporama d'images en background dans le css...
Modifié par Douce Propagande (01 Apr 2011 - 21:00)