Gallery Cycle als header

[timdebuurman]

Hoi,

Ik heb op een website de Cycle van Gallery gebruikt, om op iedere pagina bovenaan wisselende adbeeldingen te hebben:

http://www.cscinstallatie.nl

De opdrachtgever vind het erg mooi, maar af en toe gaat er iets mis.

Dan zijn in een flits de 4 afbeeldingen onder elkaar te zien..

Lijkt er dus op of eerst de afbeeldingen erop komen eventjes en dat dan pas de cycle begint.

Hoe zou dat op te lossen zijn?

[Jos]

met een overflow:hidden op de omringende div

[timdebuurman]

Dat was m...thx

[timdebuurman]

Nog even iets over de cycle header..

Bij het wisselen van pagina, begint deze weer opnieuw.
Je ziet de header dan 'verspringen' naar het begin zeg maar.

Is dat te voorkomen?

[timdebuurman]

Na wat rond zoeken lijkt zoiets alleen mogelijk met frames, dus dat gaat m niet worden.

Om de overgang naar verschillende paginas dan wat beter te laten verlopen zou het een idee zijn om de eerste afbeelding er in te laten faden, in plaats van dat deze direct verschijnt.

Nu heb ik dat geprobeerd, door in de javascript van de cycle sjabloon zoiets toe te voegen:

$('#slides img:first').fadeIn(1000);

Maar dat doet niets.

De code hoe deze nu is (zonder bovenstaande):

Code: Select all

<__script__ type="text/javascript">
$(document).ready(function() {
	$('#slides').cycle({ 
		delay:  0, 
		speed: 3000,
                timeout: 5000,
		before: onBefore
	});

	function onBefore() {
		$('#caption').html(this.alt);
	};
});
</__script>

Zou iemand willen vertellen hoe ik dan de eerste afbeelding vloeiend kan laten verschijnen?

[mcDavid]

Wat wil je in-faden aan de eerste afbeelding? er is dan nog geen afbeelding, dus hij zal hooguit beginnen met de achtergrondkleur.

Overigens denk ik dat je dit wél zonder frames kunt oplossen. Als je zorgt dat de slider bij iedere foto-wissel een cookie update met daarin de laatst getoonde afbeelding, kun je die informatie bij een page-load gebruiken om met die afbeelding te beginnen.

[timdebuurman]

Zoiets zou denk ik al beter zijn inderdaad, alleen heb ik geen idee hoe ik dat aan moet pakken.

[timdebuurman]

Na een tijd googlen ben ik al iets wijzer, maar het ontbreekt me aan de kennis om het allemaal toe te passen.

Wie kan me hiermee helpen?

De Cycle methode van Gallery gebruikt jquery.cycle.lite.js
Deze heb ik veranderd in jquery.cycle.all.js omdat in deze uitgebreide versie de optie 'startingSlide' zit.

Stel dat de slider altijd bij afbeelding 2 moet beginnen, zou nu dit geplaatst moeten worden (eerste afbeelding is '0'):

Code: Select all

<__script__ type="text/javascript">
$(document).ready(function() {
	$('#slides').cycle({ 
                startingSlide: 1,
		delay:  0, 
		speed: 3000,
                timeout: 5000,
		before: onBefore
	});

	function onBefore() {
		$('#caption').html(this.alt);
	};
});
</__script>

Maar in plaats van de 2e afbeelding, wil ik dat de slider begint bij de afbeelding waarmee op de vorige pagina gestopt is.

Zoals mcDvid al zei, zal er dan met cookies gewerkt moeten worden.
Dat heb ik nog nooit gedaan, maar dit schijnt ook met jquery te kunnen.

Ik vond deze uitleg:

http://www.electrictoolbox.com/jquery-cookies/

De jquery plugin heb ik geplaatst en deze word op de website aangeroepen. Dus jquery.cookie.js is klaar voor gebruik.

Misschien kan iemand aan de hand van de uitleg in de URL, mij uitleggen hoe een cookie opgeslagen kan worden van het nummer van de huidinge afbeelding op het moment dat de pagina word verlaten.

En hoe deze vervolgens kan worden aangeroepen op de nieuwe pagina, om daarmee te beginnen.

[peterbus]

of gebruik simpelweg de plugin imagerotator. Heb ik goede ervaringen mee, weinig geduvel met instellen enzo. Lekker simpel

[timdebuurman]

Die 'imagerotator' zal denk ik toch ook per pagina worden ingeladen?

Om die dan ook over alle pagina's 'door te laten lopen' zal net zo goed ingewikkelde codering nodig zijn lijkt me.

Ik ben er een tijdje mee aan de gang gegaan hoor, maar loop tgen best wat dingen aan.
Degene met de website heeft intussen geaccepteerd dat de header-afbeelding bij wisselen van pagina opnieuw begint.

[pedes]

misschien de module showtime gebruiken met de instelling random.
dan start ie willekeurig bij iedere nieuwe start.

Mvg,
Peter

[timdebuurman]

Willekeurig starten kan met jquery cycle ook.

Het ging mij erom, dat de wisselde header, die op iedere pagina van de website staat, door gaat met wisselen, alsof deze in een frame staat.

Uiteindelijk zal dat wel kunnen, na heel wat ge-programmeer.

In het kort komt het neer op het maken van een cookie bij het verlaten van een pagina, met erin welke afbeelding (slide) hij is op het moment van verlaten,
zodat op de nieuwe pagina met dezelfde afbeelding word begonnen.
Dan is er nog het punt dat hij ook precies in een overgang bezig kan zijn op het moment van wisselen van pagina.
Hiervoor zou iets ingesteld moeten worden dat de overgang word afgemaakt voordat de website naar de nieuwe pagina gaat.
Als de overgangen kort zijn, zal dat weinig vertraging geven.

[peterbus]

imagerotator zal de afbeeldingen ook per pagina inladen maar ik heb daar geen problemen mee ondervonden. Nette overgangen, geen miniaturen zoals die jou zijn te zien, ....

[timdebuurman]

Die miniaturen, die zag iemand anders ook al, maar ik heb ze zelf nooit gezien.

Die moeten toch wel weg te krijgen zijn?

[peterbus]

ik zie deze staan:
<img alt="headerpic4.jpg" src="http://www.cscinstallatie.nl/uploads/im ... bs/8-8.jpg" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4; opacity: 0; width: 105px; height: 20px;">

dit is de kleine afbeelding in de serie. de rest klopt wel volgens mij.

Zal wel een automatisch aangemaakte thumbnail zijn denk ik