jQuery loop images, logo's en teksten.

[blackeagle67]

Hallo mensen,

Voor een project voor een vriend van mij zou ik graag een slideshow maken zoals dat hier gebeurt: http://www.iboma.com/index.asp maar dan met jQuery of normale Javascript code.
Het hout op deze website ga ik dus vervangen door een logo. Het logo mag altijd rechts onderin verschijnen!!

Standaard jQuery plugins voldoen niet aan mijn eisen en heb zelf grote moeite om deze loop goed te krijgen.
Veel plugins en code zorgen er namelijk voor dat de afbeelding over het logo op de pagina heen gaan.

Enkele eisen die ik heb zijn:

• Met PHP wil ik ervoor zorgen dat er allereerst al een afbeelding geladen word als de bezoeker op de site komt. Ik controleer dan of de gebruiker javascript aan heeft staan en laat zo nodig dan ook het logo en de tekst die weergegeven moet worden zien. Staat javascript aan dan moet de animatie het logo en de tekst animeren en weergeven.
• Deze afbeelding word random geladen uit de database en is via een pagina met een JSON array beschikbaar voor de animatie. De huidige afbeelding moet opgezocht worden en aan de hand van die afbeelding moeten bijbehorende logo en tekst worden laten zien.
  De afbeelding dient dus als indicator voor de animatie, waar deze moet beginnen.

Kunnen jullie mij helpen met het voor elkaar krijgen van de animatie?
Eventueel kan de code die ik had gevonden nog helpen:
De code die hier staat voldoet redelijk aan mijn eisen kwa animatie. Toch zou het nog mooier zijn als de animatie ook crossover zou zijn.
Dat er 2 afbeeldingen tegelijkertijd 1 in fade en de ander uit fade.

(function($) {	
			$(document).ready(function() {
				function slideshow($slide, $logo, $link, fade_time, images){
					var i = 0;
					function step(next){
						if (i === images.length) {
							i = 0;
						}
						$slide
							.fadeOut(fade_time)
							.queue(function(nextSlide){ return function(next){
								$slide.css("background-image", "url('" + nextSlide.image + "')");
								$logo.css("background-image", "url('" + nextSlide.logo + "')");
								$link.attr("href", nextSlide.link);
								next();
							}; }(images[i]))
							.fadeIn(fade_time)
							.queue(step);
						i++;
						next();
					}
					$slide.queue(step);
				}

				var photos = [
					{ image: "http://localhost/foobar.png", logo: "http://localhost/foobar2.png", link: "http://www.stackoverflow.com/" },
					{ image: "http://img265.imageshack.us/img265/3355/62320763.jpg", logo: "http://localhost/vasse/images/riverdale_header.png", link: "http://www.google.com/" },
					{ image: "http://img411.imageshack.us/img411/1237/75707805.jpg", logo: "http://localhost/vasse/images/riverdale_header.png", link: "http://www.yahoo.com/" }
				];

				slideshow($("#header-image"), $("#header-logo"), $("#slideshow_lnk"), 3000, photos);
			});
		}(jQuery));

 

[csshunter]

Hoi blackeagle67,
Van jQuery en dezelver (on)mogelijkheden heb ik geen kaas gegeten *), maar ik heb nog wel een gewone javascript cross-over fader op de plank liggen, die misschien als inspiratiebron kan dienen:

• foto-carrousel_vs2.php

Het principe is hier:

• Er vindt niet tegelijkertijd een fadeIn en fadeOut script plaats, maar er is alleen een fadeIn script.
• Het uit te faden image zit er in als background-image.
• Het in te faden image hangt er boven als voorgrond-image (met opacity niks).
• Infaden krikt de opacity van het voorgrond-img op naar 100%.
• Dus het background-img verdwijnt automatisch steeds meer uit beeld = fadeOut simulatie.
• Als de 100% bereikt is, wordt het voorgrond-image tegelijkertijd óók background-img (vervangt de oude) = naadloze overgang.
• Daarna wordt het voorgrond-img vervangen door het nieuwe in te faden img (weer met opacity van nul).
• Enz.!

Wellicht kan dit principe ook met jQuery toegepast worden?
Zo niet, dan zou het mogelijk moeten zijn om het script ook een neervallend logo te laten triggeren, dat er in een <div> met hogere z-index boven geplaatst wordt.
Zonder jQuery heb je in elk geval alle html, css en scripts zelf in de hand.

PS: Dit carroussel heeft een fallback voor als javascript uit staat: dan kunnen met een scrollbalkje ook alle images bekeken worden. - Eigenlijk is dit het uitgangspunt, en is het script een unobtrusive "fall-up" waarin het faden als extra'tje wordt gedaan.
Een contra-indicatie voor deze methode zou kunnen zijn als er heel veel zware images moeten faden. Die moeten allemaal eerst gedownload worden voordat het werkt, en dat kan de pagina vertragen.
Oplossing daarvoor zou dan zijn om de verschillende images niet te tonen als javascript uit staat (met dan één vast img). Daarmee hoeft elk in te faden img pas opgeroepen te worden als het via het script aan de beurt is.
Of: als javascript uit staat, als enige image een collage van kleintjes tonen, waarop geklikt kan worden om telkens een grote te zien.
Met door javascript bediend css kan tenslotte alles!

Met vriendelijke groet,
CSShunter
___________
*) De jQuery faders die ik ben tegengekomen, faden inderdaad eerst uit en vervolgens pas in: ze lopen over de background-color achter de fade-box. Dat geeft een beeldloze tussenpauze, en het is ook niet het toppunt van schoonheid (vooral niet als er veel verschil in helderheid tussen de images zit; dan val je ofwel in een te licht gat, ofwel in een te donker gat, want die bg-kleur moet je zien te middelen).