Gallery Cycle als header

timdebuurman · **Posted:** Thu Apr 05, 2012 7:24 pm

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 · **Posted:** Thu Apr 05, 2012 8:48 pm

met een overflow:hidden op de omringende div

timdebuurman · **Posted:** Fri Apr 06, 2012 5:02 am

Dat was m...thx

timdebuurman · **Posted:** Tue Apr 10, 2012 9:10 am

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 · **Posted:** Tue Apr 10, 2012 10:17 am

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:

<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 · **Posted:** Tue Apr 10, 2012 5:16 pm

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 · **Posted:** Tue Apr 10, 2012 6:15 pm

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

timdebuurman · **Posted:** Tue Apr 10, 2012 8:12 pm

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:

<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 · **Posted:** Tue Apr 17, 2012 2:25 pm

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

timdebuurman · **Posted:** Tue Apr 17, 2012 2:45 pm

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 · **Posted:** Tue Apr 17, 2012 3:40 pm

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

Mvg,
Peter

timdebuurman · **Posted:** Tue Apr 17, 2012 6:01 pm

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 · **Posted:** Tue Apr 17, 2012 7:21 pm

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 · **Posted:** Tue Apr 17, 2012 7:35 pm

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

Die moeten toch wel weg te krijgen zijn?

peterbus · **Posted:** Tue Apr 17, 2012 7:48 pm

ik zie deze staan:
<img alt="headerpic4.jpg" src="http://www.cscinstallatie.nl/uploads/images/GalleryThumbs/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

Gallery Cycle als header

Who is online