slideshow backround fullscreen

[arawolf1]

Hallo,

Weet er iemand hoe ik een slideshow ( liefst zonder tumbnails en knoppen)kan instellen als background en dit fullscreen. Ik heb me suf gezocht op het net maar krijg er nog kop nog staart van.
Alvast bedankt

 

[That Guy]

Dus eigenlijk gewoon een CSS' background-image die steeds veranderd?

 

[arawolf1]

dacht meer aan een swf filmpje te maken en dit als achtergrond te gebruiken, maar andere ideen zijn zeker welkom. Had gaarg gehad dat de foto's (bg) uit en infaden dus liever niet sliden

 

[dieterke]

Supersized 2.0 (jquery plugin) is wat je zoekt denkt ik: http://buildinternet.com/project/supersized/

 

[arawolf1]

Had die site al gezien. probleem is de overgangen zijn zo hard, iemand een idee hoe ik die kan in en uitfaden. Wat moet ik in de code veranderen. Even js code bijvoegen

"/*
Supersized - Full Screen Background/Slideshow jQuery Plugin
supersized.1.0.js
February 2009
By Sam Dunn
[url]www.buildinternet.com[/url] / [url]www.onemightyroar.com[/url]
*/
(function($){

	//Resize image on ready or resize
	$.fn.supersized = function() {
	
		var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
		
		if (options.slideshow == 1){
			setInterval("theslideshow()", options.slideinterval);
		}
		
		$().ready(function() {
			$('#supersize').resizenow(); 
		});
		$(window).bind("resize", function(){
    		$('#supersize').resizenow(); 
		});
	};
	
	//Adjust image size
	$.fn.resizenow = function() {
		
		var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
		
	  	return this.each(function() {
	  		
			//Define image ratio & minimum dimensions
			var minwidth = options.minsize*(options.startwidth);
			var minheight = options.minsize*(options.startheight);
			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();
			
			//Check for minimum dimensions
			if ((browserheight < minheight) && (browserwidth < minwidth)){
				$(this).height(minheight);
				$(this).width(minwidth);
			}
			else{	
				//When browser is taller	
				if (browserheight > browserwidth){
				    imageheight = browserheight;
				    $(this).height(browserheight);
				    imagewidth = browserheight/ratio;
				    $(this).width(imagewidth);
				    
				    if (browserwidth > imagewidth){
				    	imagewidth = browserwidth;
				    	$(this).width(browserwidth);
				    	imageheight = browserwidth * ratio;
				    	$(this).height(imageheight);
				    }
				
				}
				
				//When browser is wider
				if (browserwidth >= browserheight){
				    imagewidth = browserwidth;
				    $(this).width(browserwidth);
				    imageheight = browserwidth * ratio;
				    $(this).height(imageheight);
				    
				    if (browserheight > imageheight){
				    	imageheight = browserheight;
				    	$(this).height(browserheight);
				    	imagewidth = browserheight/ratio;
				    	$(this).width(imagewidth);
				    }
				}
			}
			return false;
		});
	};
	
	$.fn.supersized.defaults = { 
			startwidth: 640,  
			startheight: 480,
			minsize: .5,
			slideshow: 1,
			slideinterval: 5000  
	};
	
})(jQuery);

//Slideshow Add-on
function theslideshow() {
    
    var currentslide = $('#supersize .activeslide');
    		
    if ( currentslide.length == 0 ) currentslide = $('#supersize :last');
		
    var nextslide =  currentslide.next().length ? currentslide.next() : $('#supersize :first');
		
    nextslide.addClass('activeslide');
    currentslide.removeClass('activeslide');

}

 

[Robin S]

Ik werk eigenlijk nooit met jQuery, maar misschien heb je toch wat aan dit voorbeeldje:
http://robins.awardspace.com/helpmij/slideshow/

Er staat een simpele fadeOut functie in de broncode. Het idee is dat je twee plaatjes bovenop elkaar hebt. Door de bovenste te faden wordt die daaronder zichtbaar

 

[arawolf1]

sorry maar link werkt volgens mij niet,

 

[Robin S]

Right. Je gebruikt IE gok ik? Ik heb 'm net even wat IE-vriendelijker gemaakt, maar anders weet ik niet waar 't aan zou moeten liggen...

http://robins.awardspace.com/helpmij/slideshow/

 

[arawolf1]

hallo, even et mozilla gekeken, en inderdaad dat is. Hoe kan ik in mozilla de broncode zien

 

[arawolf1]

sorry gevonden

 

[arawolf1]

Enig idee hoe die functie dan integreer ?
code :
<!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">
<head>
<title>Visual Slideshow generated by VisualSlideshow.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Visual Slideshow, Web Slideshow, Flickr Slideshow" />
<meta name="description" content="Visual Slideshow created with Visual Slideshow, a free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start VisualSlideShow.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="engine/js/mootools.js"></script>
<script type="text/javascript" src="engine/js/visualslideshow.js"></script>
<!-- End VisualSlideShow.com HEAD section -->
</head>
<body style="background-color:#ffffff">
<!-- Start VisualSlideShow.com BODY section -->
<div id="show" class="slideshow">
<div class="slideshow-images">
<a href=""><img id="slide-0" src="data/images/adonis.jpg" alt="adonis" title="adonis" /></a>
<a href=""><img id="slide-1" src="data/images/beeld.jpg" alt="beeld" title="beeld" /></a>
<a href=""><img id="slide-2" src="data/images/hercul.jpg" alt="hercul" title="hercul" /></a>
<a href=""><img id="slide-3" src="data/images/hoofd.jpg" alt="hoofd" title="hoofd" /></a>
</div>
<div class="slideshow-thumbnails">
<ul>
<li><a href="#slide-0"><img src="data/thumbnails/adonis.jpg" alt="adonis" /></a></li>
<li><a href="#slide-1"><img src="data/thumbnails/beeld.jpg" alt="beeld" /></a></li>
<li><a href="#slide-2"><img src="data/thumbnails/hercul.jpg" alt="hercul" /></a></li>
<li><a href="#slide-3"><img src="data/thumbnails/hoofd.jpg" alt="hoofd" /></a></li>
</ul>
</div>
<a id="vlb" href="http://visualslideshow.com">Slideshow Gallery by VisualSlideshow.com v1.2</a>
</div>
<!-- End VisualSlideShow.com BODY section -->
</body>
</html>

 

[Robin S]

De basisingrediënten zijn:
- wat er op die pagina staat
- Timer, kun je vinden via de broncode (bovenaan in de header)
- System.EventManager, ook bovenaan in de header
- De CSS, (...)

Verder vul je de urls naar de plaatjes die je wil gebruiken in in het Settings-object en kun je daar wat spelen met de andere instellingen. Je hoeft dus alleen de code maar bij elkaar te zoeken

 

[arawolf1]

Bedankt, heb donderdag tijd zal eens experimenteren. Indien het niet lukt hoor je me wel.