Page 1 of 2
Gallery Cycle als header
Posted: Thu Apr 05, 2012 7:24 pm
by 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?
Re: Gallery Cycle als header
Posted: Thu Apr 05, 2012 8:48 pm
by Jos
met een overflow:hidden op de omringende div
Re: Gallery Cycle als header
Posted: Fri Apr 06, 2012 5:02 am
by timdebuurman
Dat was m...thx
Re: Gallery Cycle als header
Posted: Tue Apr 10, 2012 9:10 am
by 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?
Re: Gallery Cycle als header
Posted: Tue Apr 10, 2012 10:17 am
by 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?
Re: Gallery Cycle als header
Posted: Tue Apr 10, 2012 5:16 pm
by 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.
Re: Gallery Cycle als header
Posted: Tue Apr 10, 2012 6:15 pm
by timdebuurman
Zoiets zou denk ik al beter zijn inderdaad, alleen heb ik geen idee hoe ik dat aan moet pakken.
Re: Gallery Cycle als header
Posted: Tue Apr 10, 2012 8:12 pm
by 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.
Re: Gallery Cycle als header
Posted: Tue Apr 17, 2012 2:25 pm
by peterbus
of gebruik simpelweg de plugin imagerotator. Heb ik goede ervaringen mee, weinig geduvel met instellen enzo. Lekker simpel
Re: Gallery Cycle als header
Posted: Tue Apr 17, 2012 2:45 pm
by 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.
Re: Gallery Cycle als header
Posted: Tue Apr 17, 2012 3:40 pm
by pedes
misschien de module showtime gebruiken met de instelling random.
dan start ie willekeurig bij iedere nieuwe start.
Mvg,
Peter
Re: Gallery Cycle als header
Posted: Tue Apr 17, 2012 6:01 pm
by 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.
Re: Gallery Cycle als header
Posted: Tue Apr 17, 2012 7:21 pm
by 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, ....
Re: Gallery Cycle als header
Posted: Tue Apr 17, 2012 7:35 pm
by timdebuurman
Die miniaturen, die zag iemand anders ook al, maar ik heb ze zelf nooit gezien.
Die moeten toch wel weg te krijgen zijn?
Re: Gallery Cycle als header
Posted: Tue Apr 17, 2012 7:48 pm
by 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
