supersized background

[ombra1975]

Salve a tutti

Qualcuno di voi immagino già conoscerà la script jquery che rende possibile adattare una sequenza di immagini di sfondo alla finestra del browser.

Ho scaricato i file a QUESTO INDIRIZZO

Sono riuscito ad inserirlo nella mia pagina però...c'è sempre un però...

Mi chiedo se sia possibile fare una cosa
Premettiamo che (nel mio file test.htm) questa parte di codice individua la sequenza di immagini;

<div id="supersize">
	[img]bkg1.jpg[/img]
	[img]bkg2.jpg[/img]
        [img]bkg3.jpg[/img]

</div>

Io vorrei invece creare N sequenze di immagini dove il codice sarebbe:

<div id="supersize1">
	[img]bkg1_1.jpg[/img]
	[img]bkg1_2.jpg[/img]
        [img]bkg1_3.jpg[/img]

</div>


<div id="supersize2">
	[img]bkg2_1.jpg[/img]
	[img]bkg2_2.jpg[/img]
        [img]bkg2_3.jpg[/img]

</div>

...ecc ecc

Nello specifico vorrei che di default fosse visibile solo "supersize1" e che al click su mio tasto di navigazione mi nascondesse "supersize1" e mostrasse "supersize2"

Qualcuno mi dice, consiglia da dove cominciare?

Come nascondere i div e mosrarne un altro non c'è problema, la cosa difficile è modificare il js che crea la sequenza di immagini di sfondo...è qui che devo intervenire giusto?

/*
Supersized - Fullscreen Slideshow jQuery Plugin
By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
Version: supersized.2.0.js // Relase Date: 5/7/09
Website: www.buildinternet.com/project/supersized
Thanks to Aen for preloading, fade effect, & vertical centering
*/

(function($){

	//Resize image on ready or resize
	$.fn.supersized = function() {
		$.inAnimation = false;
		$.paused = false;
		var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
		
		$(window).bind("load", function(){
			$('#loading').hide();
			$('#supersize').fadeIn('fast');
			$('#content').show();
			if ($('#slideshow .activeslide').length == 0) $('#supersize a:first').addClass('activeslide');
			if (options.slide_captions == 1) $('#slidecaption').html($('#supersize .activeslide').find('img').attr('title'));
			if (options.navigation == 0) $('#navigation').hide();
			//Slideshow
			if (options.slideshow == 1){
				if (options.slide_counter == 1){ //Initiate slide counter if active
					$('#slidecounter .slidenumber').html(1);
	    			$('#slidecounter .totalslides').html($("#supersize > *").size());
	    		}
				slideshow_interval = setInterval("nextslide()", options.slide_interval);
				if (options.navigation == 1){ //Skip if no navigation
					$('#navigation a').click(function(){  
   						$(this).blur();  
   						return false;  
   					}); 	
					//Slide Navigation
				    $('#nextslide').click(function() {
				    	if($.paused) return false; if($.inAnimation) return false;
					    clearInterval(slideshow_interval);
					    nextslide();
					    slideshow_interval = setInterval(nextslide, options.slide_interval);
					    return false;
				    });
				    $('#prevslide').click(function() {
				    	if($.paused) return false; if($.inAnimation) return false;
				        clearInterval(slideshow_interval);
				        prevslide();
				        slideshow_interval = setInterval(nextslide, options.slide_interval);
				        return false;
				    });
					$('#nextslide img').hover(function() {
						if($.paused == true) return false;
					   	$(this).attr("src", "images/bgk-images/forward.gif");
					}, function(){
						if($.paused == true) return false;
					    $(this).attr("src", "images/bgk-images/forward_dull.gif");
					});
					$('#prevslide img').hover(function() {
						if($.paused == true) return false; 
					    $(this).attr("src", "images/bgk-images/back.gif");
					}, function(){
						if($.paused == true) return false;
					    $(this).attr("src", "images/bgk-images/back_dull.gif");
					});
					
				    //Play/Pause Button
				    $('#pauseplay').click(function() {
				    	if($.inAnimation) return false;
				    	var src = ($(this).find('img').attr("src") === "images/bgk-images/play.gif") ? "images/bgk-images/pause.gif" : "images/bgk-images/play.gif";
      					if (src == "images/bgk-images/pause.gif"){
      						$(this).find('img').attr("src", "images/bgk-images/play.gif");
      						$.paused = false;
					        slideshow_interval = setInterval(nextslide, options.slide_interval);  
				        }else{
				        	$(this).find('img').attr("src", "images/bgk-images/pause.gif");
				        	clearInterval(slideshow_interval);
				        	$.paused = true;
				        }
      					$(this).find('img').attr("src", src);
					    return false;
				    });
				    $('#pauseplay').mouseover(function() {
				    	var imagecheck = ($(this).find('img').attr("src") === "images/bgk-images/play_dull.gif");
				    	if (imagecheck){
      						$(this).find('img').attr("src", "images/bgk-images/play.gif"); 
				        }else{
				        	$(this).find('img').attr("src", "images/bgk-images/pause.gif");
				        }
				    });
				    
				    $('#pauseplay').mouseout(function() {
				    	var imagecheck = ($(this).find('img').attr("src") === "images/bgk-images/play.gif");
				    	if (imagecheck){
      						$(this).find('img').attr("src", "images/bgk-images/play_dull.gif"); 
				        }else{
				        	$(this).find('img').attr("src", "images/bgk-images/pause_dull.gif");
				        }
				        return false;
				    });
				}
			}
		});
				
		$(document).ready(function() {
			$('#supersize').resizenow(); 
		});
		
		//Pause when hover on image
		$('#supersize > *').hover(function() {
	   		if (options.slideshow == 1 && options.pause_hover == 1){
	   			if(!($.paused) && options.navigation == 1){
	   				$('#pauseplay > img').attr("src", "images/bgk-images/pause.gif"); 
	   				clearInterval(slideshow_interval);
	   			}
	   		}
	   		original_title = $(this).find('img').attr("title");
	   		if($.inAnimation) return false; else $(this).find('img').attr("title","");
	   	}, function() {
			if (options.slideshow == 1 && options.pause_hover == 1){
				if(!($.paused) && options.navigation == 1){
					$('#pauseplay > img').attr("src", "images/bgk-images/pause_dull.gif");
					slideshow_interval = setInterval(nextslide, options.slide_interval);
				} 
			}
			$(this).find('img').attr("title", original_title);	
	   	});
		
		$(window).bind("resize", function(){
    		$('#supersize').resizenow(); 
		});
		
		$('#supersize').hide();
		$('#content').hide();
	};
	
	//Adjust image size
	$.fn.resizenow = function() {
		var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
	  	return this.each(function() {
	  		
			//Define image ratio
			var ratio = options.startheight/options.startwidth;
			
			//Gather browser and current image size
			var imagewidth = $(this).width();
			var imageheight = $(this).height();
			var browserwidth = $(window).width();
			var browserheight = $(window).height();
			var offset;

			//Resize image to proper ratio
			if ((browserheight/browserwidth) > ratio){
			    $(this).height(browserheight);
			    $(this).width(browserheight / ratio);
			    $(this).children().height(browserheight);
			    $(this).children().width(browserheight / ratio);
			} else {
			    $(this).width(browserwidth);
			    $(this).height(browserwidth * ratio);
			    $(this).children().width(browserwidth);
			    $(this).children().height(browserwidth * ratio);
			}
			if (options.vertical_center == 1){
				$(this).children().css('left', (browserwidth - $(this).width())/2);
				$(this).children().css('top', (browserheight - $(this).height())/2);
			}
			return false;
		});
	};
	
	$.fn.supersized.defaults = { 
			startwidth: 4,  
			startheight: 3,
			vertical_center: 1,
			slideshow: 1,
			navigation:1,
			transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
			pause_hover: 0,
			slide_counter: 1,
			slide_captions: 1,
			slide_interval: 5000
	};
	
})(jQuery);

	//Slideshow Next Slide
	function nextslide() {
		if($.inAnimation) return false;
		else $.inAnimation = true;
	    var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
	    var currentslide = $('#supersize .activeslide');
	    currentslide.removeClass('activeslide');
		
	    if ( currentslide.length == 0 ) currentslide = $('#supersize a:last');
			
	    var nextslide =  currentslide.next().length ? currentslide.next() : $('#supersize a:first');
	    var prevslide =  nextslide.prev().length ? nextslide.prev() : $('#supersize a:last');
		
		
		//Display slide counter
		if (options.slide_counter == 1){
			var slidecount = $('#slidecounter .slidenumber').html();
			currentslide.next().length ? slidecount++ : slidecount = 1;
		    $('#slidecounter .slidenumber').html(slidecount);
		}
		
		$('.prevslide').removeClass('prevslide');
		prevslide.addClass('prevslide');
		
		//Captions require img in <a>
	    if (options.slide_captions == 1) $('#slidecaption').html($(nextslide).find('img').attr('title'));
		
	    nextslide.hide().addClass('activeslide')
	    	if (options.transition == 0){
	    		nextslide.show(); $.inAnimation = false;
	    	}
	    	if (options.transition == 1){
	    		nextslide.fadeIn(750, function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 2){
	    		nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 3){
	    		nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 4){
	    		nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 5){
	    		nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	
	    $('#supersize').resizenow();//Fix for resize mid-transition
	    
	}
	
	//Slideshow Previous Slide
	function prevslide() {
		if($.inAnimation) return false;
		else $.inAnimation = true;
	    var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
	    var currentslide = $('#supersize .activeslide');
	    currentslide.removeClass('activeslide');
		
	    if ( currentslide.length == 0 ) currentslide = $('#supersize a:first');
			
	    var nextslide =  currentslide.prev().length ? currentslide.prev() : $('#supersize a:last');
	    var prevslide =  nextslide.next().length ? nextslide.next() : $('#supersize a:first');
		
		//Display slide counter
		if (options.slide_counter == 1){
			var slidecount = $('#slidecounter .slidenumber').html();
			currentslide.prev().length ? slidecount-- : slidecount = $("#supersize > *").size();
		    $('#slidecounter .slidenumber').html(slidecount);
		}
		
		$('.prevslide').removeClass('prevslide');
		prevslide.addClass('prevslide');
		
		//Captions require img in <a>
	    if (options.slide_captions == 1) $('#slidecaption').html($(nextslide).find('img').attr('title'));
		
	    nextslide.hide().addClass('activeslide')
	    	if (options.transition == 0){
	    		nextslide.show(); $.inAnimation = false;
	    	}
	    	if (options.transition == 1){
	    		nextslide.fadeIn(750, function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 2){
	    		nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 3){
	    		nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 4){
	    		nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 5){
	    		nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	
	    	$('#supersize').resizenow();//Fix for resize mid-transition
	}

[ombra1975]

UP! pls

[Vicar]

Io non lo concosco quello script, cosa fa?

Se me lo spieghi posso aiutarti magari

[ombra1975]

Innanzitutto grazie per la risposta

Una demo vale più di mille parole...guarda qui

DEMO

Immagina che invece dei tasti per scorrere le immagini io ci metta il menu del mio sito
Vorrei che al click sul menu mi caricasse una sequenza di immagini diversa per ogni link
per dire se ho 4 link ...avrò 4 sequenze di 3 immagini ciascuna.
Non so se sono stato chiaro

Questo è il progress del mio sito
sito test

[Vicar]

Allora, su ogni menu fai partire una funzione diversa che ogni 2 secondi richiama la stessa funzione (setTimeout) e imposta il background del sito con l'immagine 1 ...

Capito come?

[ombra1975]

Premettendo che non sono un programmatore e che al massimo so leggere e modificare qualcosina di un listato javascript avevo fatto questo tipo di analisi


1 - precaricare nella mia pagina default2.html
sequenza1
sequenza2
sequenzaN
Ovviamente tutte nascoste tramite css defiendo una classe tipo

.sequenza1, sequenza2, sequenzaN {display:none; visibility:hidden}

2 - Nel body mettere che OnLoad mi lancia una funzione ShowHideSeq() che mostra la sequenza che voglio di default es. ShowHideSeq(sequenza1)

3 - sul menu OnClick utilizzare la stessa funzione ma che in più nasconda quella corrente e mostri quella corrispondente al tasto che sto premendo

In più probabilmeente ci vuole un'altra funzione che faccia un controllo di quali sequenze sono visibili e quali no (immagino utilizzando setTimeout)

NB onClick non devo richiamare 1 immagine
ma 1 sequenza di 3 immagini animate

[Vicar]

Creti degli array dove inserisci la sequenza e ogni volta che richiama la funzione prendi l'array che ti serve..

[ombra1975]

<script type="text/javascript">
sequenze = new Array("sequenza1","sequenza1","sequenza1");
numeroSequenza = new Array(1,2,3); // a ogni sequenza corrisponde un numero
</script>


<script type="text/javascript">

for (i=0; i<sequenze.length; i++) {
//inizio blocco di istruzioni

document.write("sequenze[i]");


//fine blocco di istruzioni
}
</script>

Uhm non so bene come fare

come faccio a definire un pezzo di codice che contenga una sequenza?

[Vicar]

Tu sai a priopri che ti servono 3 sequenze e in ogni sequenza ci deve essere 3 img?

[ombra1975]

precisamente sono 5 sequenza da 3 immagini ciascuna

sequenza1 (immagine1_1, immagine1_2, immagine1_3)

sequenza2 (immagine2_1, immagine2_2, immagine2_3)

sequenza3 (immagine3_1, immagine3_2, immagine3_3)

sequenza4 (immagine4_1, immagine4_2, immagine4_3)

sequenza5 (immagine5_1, immagine5_2, immagine5_3)