reacties op Javascript slideshow

re: Javascript slideshow

mahamed — Tue, 08 Mar 2011 19:00:27 +0100

Ziet er goed uit! De cycle plugin is ook wel in orde overigens!

re: Javascript slideshow

stijn — Wed, 02 Jun 2010 08:40:38 +0200

werkt perfect! merci voor de feedback!

re: Javascript slideshow

mlitn — Tue, 01 Jun 2010 15:12:40 +0200

ik zie dat je knoppen pas na het initialiseren van de slideshow komen (waardoor die 2 knoppen dus nog niet bestaan op het moment dat het script ze wil binden). Je kan ofwel je javascript net onder je knoppen plaatsen, ofwel dit ervan maken (dit zorgt ervoor dat gewacht wordt tot je pagina volledig geladen is):

re: Javascript slideshow

stijn — Tue, 01 Jun 2010 15:07:15 +0200

http://www.coppens-druk.be/testsite

re: Javascript slideshow

mlitn — Mon, 31 May 2010 16:15:13 +0200

Heb je deze ergens online staan? Dan kan ik even kijken. Heb je jquery geinclude?

re: Javascript slideshow

stijn — Mon, 31 May 2010 10:31:20 +0200

ik doe waarschijnlijk nog iets verkeerd als javascript dummy Vorige Volgende

re: Javascript slideshow

stijn — Mon, 31 May 2010 10:16:58 +0200

@mlitn merci!

re: buttons

mlitn — Sat, 29 May 2010 18:52:59 +0200

stijn: even een pseudo-voorbeelde: Vorige Volgende

buttons

stijn — Fri, 28 May 2010 13:51:40 +0200

heb problemen met de vorige en volgende buttons. Hoe plaats ik deze en hoe laat ik deze werken?

re: Javascript slideshow

Pim — Sun, 27 Dec 2009 18:36:15 +0100

Hier kan je niets mee zolang je afbeeldingen niet allemaal dezelfde afmetingen hebben..

re: Javascript slideshow

Niels — Wed, 18 Nov 2009 23:43:14 +0100

@mlitn: volgens mij niet hoor. De DOM wordt volledig ingelezen bij het laden van een pagina, maar nog niet de elementen an sich. Het script wordt pas uitgevoerd van zodra dit DOM geladen is, en dus is het aanspreken van alle elementen op zich perfect mogelijk. Tests met Firebug toonden ook aan dat de img (src) niet meer geladen werd, en pas vanaf het script gerund werd (of het respectievelijke stukje in de code bereikte). Je interpretatie van de code is inderdaad correct. Het lijkt dubbel werk als je het woordelijk uitschrijft, maar het is bijzonder efficient (voornamelijk als er meerdere zware images op de pagina te tonen zijn).

re: Javascript slideshow

mlitn — Mon, 16 Nov 2009 17:41:23 +0100

Bij het initialiseren van de slideshow kan je de array als extra parameter meegeven als volgt: $('.slideshow').slideshow({ images : new Array('url-to-image', 'url-to-image', 'url-to-image') }); De eerste afbeelding (de src van uw image) kies je best in je server-side script random. Deze is bewust niet in de javascript gerandomised, om irritant geflikker vlak na de pageload te vermijden (als de originele afbeelding zou worden vervangen door een random afbeelding).

re: Javascript slideshow

jonas — Mon, 16 Nov 2009 16:16:43 +0100

Hallo Alvast bedankt voor het leuke script. Het komt goed uit voor me, ik was op zoek naar een script die niet alle afbeeldingen in de bron zet. - Hoe en waar moet ik die images array doen? - Is er een mogelijkheid dat ook de eerste afbeelding random wordt? Sorry maar ik ben maar een noob. Mag gerust via email beantwoord worden. Bedankt!

re: Javascript slideshow

mlitn — Tue, 10 Nov 2009 11:39:43 +0100

@Niels: code mag hier zeker geplaatst worden. Het lijkt me dat je van een image eerst de source bepaalt, vervolgens deze image verwijdert en daarna deze door je script toch laat laden? (correct me if I'm wrong) Je kan met javascript pas je image aanspreken zodra het in je DOM aanwezig is, maar op dit moment wordt de image reeds geladen. Het initi�le laden van de image kan je niet tegenhouden.

re: Javascript slideshow

Niels — Tue, 03 Nov 2009 19:15:20 +0100

Ik weet niet in hoeverre hier code kan/mag geplaatst worden, maar het komt grofweg neer op een volgende werkwijze (let wel, ik heb een site in HTML5, vandaar de

-tag): $('figure').each(function(index) { var self = this; var image = $(this).children()[0]; var pic = new Image(); $(image).remove(); $(pic) .load(function () { $(this).css('display', 'none'); $(self) .css('background', 'transparent') .append(this); $(this).fadeIn('slow'); }) .attr({src: image.src}); } ); De "figure" heeft een CSS-background met een loading-spinner, kwestie van de bezoeker niet in het ongewisse te laden. In deze oplossing wordt �lke afbeelding geladen, maar dan wel in de achtergrond. In een andere categorie heb ik het opgelost dat een afbeelding pas - op identieke wijze als hierboven - wordt geladen van zodra de gebruiker hovert over een thumbnail. Dat terzijde, je kan jquery ook altijd selectors meegeven, zodat enkel de img:first wordt geladen bijvoorbeeld.

re: Javascript slideshow

Geert pasteels — Tue, 03 Nov 2009 17:00:07 +0100

@Niels Kan je een voorbeeldje geven hoe je jquery laat voorkomen dat sommige images niet geladen worden?

re: Javascript slideshow

mlitn — Tue, 03 Nov 2009 09:00:48 +0100

Added on demand: extra parameter om het aantal te-preloaden-afbeeldingen te kunnen instellen

re: Javascript slideshow

mlitn — Mon, 02 Nov 2009 19:26:32 +0100

Klaus: "200 kb onnodige downloaden omwille van foto's op het einde van de slideshow die hij nooit zal zien" Akkoord, dit kan al snel oplopen tot grote aantallen bij een druk bezochte website, al mag je niet volledig in die richting gaan denken ook. Het belangrijjkste blijft de bezoeker, en als tot het laatste moment gewacht wordt om een foto in te laden kan dit soms te lang duren indien de foto enorm groot is en/of de connectie pc-server niet snel genoeg. Een goede middenweg voor een groot aantal afbeeldingen zou wel zijn om telkens slechts de 3 volgende images in te laden. Zal ik als ik wat tijd heb eens bekijken!

re: Javascript slideshow

Niels — Mon, 02 Nov 2009 19:19:02 +0100

"Mijn" album-scriptje pakt het ietwat anders aan: bepaalde IMG-tags worden door JQuery weggehaald bij het laden van de pagina. Dit verhindert dat ze geladen worden bij pageload. Vervolgens worden nieuwe IMG-tags aangemaakt, en worden ze in de achtergrond geladen, zodat bezoekers geen delay's ondervinden van afbeeldingen (hoe groot deze ook mogen zijn) die geladen worden. Voor albums werk ik bij voorkeur met JSON. Uiteraard is dit niet 100% SEO-vriendelijk, maar ik ben van mening dat in deze tijden van gegevens die asynchroon geladen worden het SEO-aspect niet altijd even nauw genomen kan worden...

re: Javascript slideshow

donotfold — Mon, 02 Nov 2009 18:07:08 +0100

zeer mooi scriptje, normaal zou ik zelf iets schrijven moest ik het nodig hebben maar nu wss niet meer ;) (bookmarked!) Tnx.

re: Javascript slideshow

Thomas Eilander — Mon, 02 Nov 2009 16:15:49 +0100

Ziet er goed uit! De cycle plugin is ook wel in orde overigens!

re: Javascript slideshow

Sam Vloeberghs — Mon, 02 Nov 2009 16:14:45 +0100

@Klaus De Buysser Dat is een aspect waar ik geen rekening mee gehouden had. ( het is dus volledig correct :) ) Maar in eerste instantie probeer ik wel altijd een website optimaal te maken voor de gebruiker. Wat de hosting of traffiek betreft, dat is een item dat je moet bespreken met de eigenaar van de website. Voordelen en nadelen , wikken en wegen :)

re: Javascript slideshow

mlitn — Mon, 02 Nov 2009 15:43:44 +0100

Matthias: Inderdaad, het is geen valide XHTML, daarom ook dat het even goed mogelijk is deze als parameter in te geven. Het was doelbewust niet de bedoeling om meerdere elementen te hoeven aanmaken en deze via CSS te dienen positioneren, met alle extra werk vandien voor 'slechts' een simpele slideshow.

re: Javascript slideshow

mlitn — Mon, 02 Nov 2009 15:37:34 +0100

Dieter: Die rel kan handig zijn om op 1 pagina meerdere slideshows op 1 plaats te initialiseren, dan hoef je enkel een .slideshow(); te doen en gaat deze op alle gematchte elementen zijn werk doen. Anders moet je deze 1 voor 1 apart gaan initialiseren met een andere images-array. Ivm background-image: de oorspronkelijke reden voor deze plugin was dat bestaande slideshows niet altijd even makkelijk te positioneren waren (en vooral niet met elementen die elkaar overlappen, daar durft een slideshow nogal eens boven te komen). Zie bijvoorbeeld www.visitaosta.be met de navigatie bovenop de slideshow. Sam: SEO bij een slideshow is sowieso problematisch, gezien Google niets indexeert wat niet zichtbaar is (en in geen enkele goed uitgewerkte slideshow zijn alle images zichtbaar zonder javascript)

re: Javascript slideshow

Mathias Bynens — Mon, 02 Nov 2009 15:15:32 +0100

@Klaus, het is in dit geval echter helemaal niet nodig om de standaarden te buigen. Toch? Alle afbeeldingen kunnen net zo goed in de HTML vervat zitten. Als je als designer dan niet wilt dat JavaScript-loze gebruikers meerdere afbeeldingen te zien krijgen, kan dit via CSS opgelost worden. Indien je dit niet via CSS wil oplossen, en ook maar ��n afbeelding in de HTML wil, betekent dit dat je afbeeldingen geen vitaal deel uitmaken van de pagina-inhoud. In dat geval is de slideshow louter een vorm van “progressive enhancement” en kan je vanuit JavaScript een bestandenlijst ophalen d.m.v. bijvoorbeeld een JSON-request. (Het script biedt gelukkig ook de mogelijkheid om de afbeeldingen binnen JavaScript te specifi�ren.) Ook de “custom data attributes” van HTML5 zouden mijns inziens een goede optie zijn ter vervanging van het REL-attribuut op IMG-elementen.

re: Javascript slideshow

Klaus De Buysser — Mon, 02 Nov 2009 15:04:43 +0100

Hmm, wat rare zinsbouw in m'n origineel bericht. Never mind dus. @Mathias puur volgens de regels zou je dit REL-attribuut inderdaad niet mogen gebruiken, maar dan start je weer een hele discussie omtrent de standaarden en hoe je ze buigt omwille van kosten/baten.

re: Javascript slideshow

Klaus De Buysser — Mon, 02 Nov 2009 15:02:03 +0100

@Sam Vloeberghs Het mag dan voor de eindgebruiker met breedband (niet iedereen heeft dat) niet zoveel uitmaken, voor de klant die de hostingfactuur moet betalen zal dat vaak wel zo zijn. 200 kb onnodige downloaden omwille van foto's op het einde van de slideshow die hij nooit zal zien, extrapoleren maal het aantal bezoekers per dag kan op het einde van de maand een mooi factuurtje verwachten van z'n hostingprovider. Niet zo erg interessant dus. Denk dat alt en title attributen wel kunnen opgelost worden door het script wat aan te passen.

re: Javascript slideshow

Mathias Bynens — Mon, 02 Nov 2009 14:58:35 +0100

Leuk scriptje! In HTML 4.01 bestaat het REL-attribuut helaas niet voor IMG-elementen: http://www.w3.org/TR/html4/struct/objects.html#h-13.2 Hoe dan ook vind ik dit een nogal vreemde (incorrecte?) toepassing van dit attribuut.

re: Javascript slideshow

Geert pasteels — Mon, 02 Nov 2009 14:49:55 +0100

@Sam Vloeberghs Hangt er vanaf hoe groot de foto's zijn. Nu voor de meeste websites zal dit niet veel uitmaken. Wat je zegt over seo is heel juist. Ik neem aan dat het allemaal afhangt waarvoor je de slideshow gaat gebruiken.

re: Javascript slideshow

Sam Vloeberghs — Mon, 02 Nov 2009 14:38:25 +0100

Ik dacht hier als eerste een comment te zetten , maar blijkbaar gaat het snel rond.. :) Wat met SEO? De afbeeldingen staan nu ook in een JSON array , wat niet zo bevorderend is voor het SEO aspect dacht ik, ook verwacht ik blijkbaar hier geen specifieke alt of title tag dat de images beschrijft. Ik zou alle images inladen en absoluut boven elkaar positioneren. @Geert Pasteels , 100-200 kb meer of minder maakt in deze tijden van breedband toch ook echt niet zo veel meer uit?

re: Javascript slideshow

Dieter Orens — Mon, 02 Nov 2009 14:30:19 +0100

Dat overflow:hidden en juiste height is bij mij nog nooit een probleem geweest. Het handige bij jullie is dat je ze als een array kan ingeven. Wat ik echter zeer handig zou vinden in sommige gevallen is een gelijkaardige slideshow als die van Cycle of jullie, maar dan eveneens werkend met css background-images. Ik heb al gevallen gehad waar de afbeeldingen eigenlijk beter als background worden gebruikt. (Ik geef toe dat ik ook nog niet gezocht heb achter zulk bestaand script)

re: Javascript slideshow

Geert pasteels — Mon, 02 Nov 2009 14:17:37 +0100

Leuk scriptje. De rel oplossing lijkt wel onhandig maar is niet zo slecht want dan worden niet alle images direct geladen. Je zou ook alle images in een lijst kunnen zetten en daar een slideshow van kunnen maken. Dan is de kans wel groot dat je images laad die de gebruiker nooit te zien krijgt.

re: Javascript slideshow

mlitn — Mon, 02 Nov 2009 14:02:55 +0100

Steffest: Hoeft niet als rel, je kan deze ook meegeven als extra parameter bij het initi�ren van de slideshow (zie 'Meer?') Dieter: Beter zou ik niet zeggen, eerder anders. Bij dit script is maar 1 image nodig: gebruikers zonder Javascript zullen enkel deze ene afbeelding zien Bij cycle heb je 1 div met daarin alle images. Heb je als client dan geen Javascript enabled, dan ga je alle images zien tenzij je designer de width & height & overflow goed incalculeert. Kan je dan weer niet uitgaan van een vooraf eenmalig vastgelegde width en height, dan wordt het een rommel. Cycle biedt dan natuurlijk wel meer effecten.

re: Javascript slideshow

Dieter Orens — Mon, 02 Nov 2009 13:42:06 +0100

Ziet er goed uit. Meestal gebruik ik de jQuery Cycle plugin hiervoor (http://malsup.com/jquery/cycle/) die tot nu toe ook aan al deze noden kon voldoen. Zou je me kunnen zeggen waar het verschil zit met die van jullie? Waarom deze beter zou zijn?

re: Javascript slideshow

Steffest — Mon, 02 Nov 2009 13:41:26 +0100

Wel vervelend dat je elke afbeelding moet specifi�ren in het rel-atribuut, niet? In mijn zeer bescheiden mening is een slideshowscript pas handig om te herbruiken als het via een serverside scripje bv alle afbeeldingen in een map ophaalt om te tonen - of een xml bestandje inleest met bestandsnamen dat dan door een serverside script wordt gegenereerd. Maar ik weet haast zeker dat jullie inhouse CMS dat ook zo doet zodat je niet handmatig alle bestandsnamen moet gaan oplijsten.