11548 sujets

JavaScript, DOM et API Web HTML5

Bonsoir !

J'utilise le plugin bGStretcher pour un site que je suis en train de coder.

J'aimerais que lorsque je clique sur un élément de mon menu (en l'occurrence les balises <li> de la classe toggleSubMenu3), cela me change le background.

J'ai donc créé un script avec la fonction click et j'ai recopié le script de Background Stretcher.

Seulement, quand je clique, au lieu de m'afficher l'image de mon choix, il m'affiche la couleur du 'background-color' renseigné sur la feuille de style du plugin..

Des idées pour que cela m'affiche les images de mon choix ? Merci beaucoup !

Voici les deux scripts :

<script type="text/javascript"> 
$(document).ready(function(){
// Initialize Background Stretcher
$(document).bgStretcher({
images: ['images/sample-2.jpg', 'images/sample-3.jpg'],
imageWidth: 3000, imageHeight: 1500, nextSlideDelay : 7000,
});
});
</script>

<script type="text/javascript">
$(document).ready(function(){ 
$('li.toggleSubMenu3').click(function () {
$(document).bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-3.jpg'],
imageWidth: 3000, imageHeight: 1500, nextSlideDelay : 7000,
});
});
});
</script>
Voila la solution :

<script type="text/javascript">
		$(document).ready(function(){ 
		$('votre classe').click(function () {
		$("#thumb-list").remove(); //remove the actual thumb list if exist
    	$("#supersized").empty(); //remove the background image if exist
		$.supersized({ 
								slide_interval          :   3000,		// Length between transitions
				slides: [
							<?php
							//path to directory to scan
							$directory = "images2/";

							//get all image files with a .jpg extension.
							$images = glob($directory . "*.jpg");

							//print each file name
							foreach($images as $image)
							{
							echo "{image : 'http://localhost:8888/atelier2/" . $image . "', title : '" .$image . "'},";
							}
							?>
						],
				});
	    });
		});
		</script>