tekst inklappen/uitklappen

[Dingo]

Ben ik weer eens, blijft een fijn forum om verder te leren

IK heb een tijd geleden mijn website gemaakt met kompozer, en inmiddels is de "nieuwspagina behoorlijk LANG geworden. Na me zeer kort verdipet te hebben in een blog-optie, leek het me toch mooier en simpeler om de tekst een stuk te verbergen/in te klappen. Geen idee hoe dat moest natturlijk, en na wat googlen kwam ik dit script tegen:

http://www.randomsnippets.com/2008/02/1 ... -your-div/

Na wat tekst aanpassen etc. leek het best aardig.

Dit was het:
http://www.streepjes.com/nieuws.html

en zo zou het ongeveer moeten worden:
http://www.streepjes.com/testnieuws.html

Alleen nou zit ik nog met een paar vragen:

-nu wordt (denk ik?) wel de hele inhoud geladen bij het laden van de pagina, terwijl het idee natuurlijk is dat de lange versie te sloom gaat laden door alle foto's etc. Is er een betere oplossing dan dit script? Ik kon zelf alleen bedenken dan de link "Oudere berichten" naar weer een nieuwe pagina te laten verwijzen, met de oude berichten erop? Maar er is vast wat beters...toch blog?

-Ik heb nu in 1 keer alle oudere berichten verborgen, maar zou ze eigenlijk per jaar willen verbergen. Dat heb ik geprobeerd door de code voor uitklappen nog eens te plakken bij de berichten vanaf 2010. Dat ging niet want dan klapt hij de berichten van 2011 weer in ipv die ander uit, door de toggle functie...logisch, maar hoe kan dat anders?

Bedankt alvast weer!

edit: Voor jullie het zeggen, ik had zelf ook al gezien dat de pagina ernstig vervuild is met big en span codes...wordt aan gewerkt...komt door lui knip en plak werk

[nirwana]

Inderdaad worden nu alle oudere artikelen ook geladen (en daarna verborgen), dus denk ik niet dat zo het doel wordt bereikt.

Ik zou ervoor kiezen om de berichten per jaar op een aparte webpagina te plaatsen. Dat is een kleine moeite en zo voorkom je dat het laden van de pagina te lang duurt.

Een andere manier om de totale grootte van de pagina te beperken is om de foto's direct op het juiste formaat te maken.
Zo is dit de grootste foto: http://www.streepjes.com/afbeeldingen/Cezanne2.jpg (van 534 kilobytes).
Die foto wordt in eerste instantie verborgen door het gebruikte Javascript, want het is al een ouder bericht. Toch wordt die wel ingeladen en de foto wordt verkleind op de pagina getoond: 800px × 600px (scaled to 336px × 252px).

Ik heb zelf de foto even verkleind naar het formaat dat jij gebruikt (336 pixels breed en 252 pixels hoog) en dan blijft er een afbeelding van 46 kilobytes over. Dat is nog maar 8 procent van het origineel, dus dat laadt aanzienlijk sneller. Op dezelfde manier kun je veel van de foto's op die pagina ook optimaliseren.

http://www.streepjes.com/afbeeldingen/s ... winner.jpg is ook aardig groot, maar wordt ook verkleind op de pagina getoond. Doordat die verkleind wordt getoond is die niet meer echt leesbaar op de pagina. Dan kun je beter een lightbox gebruiken, zodat de afbeelding ook eenvoudig vergroot kan worden getoond.

[Dingo]

ok dank je, dus nieuwe pagina's maken is toch de beste oplossing. Ik dacht er zijn vast hele ingewikkelde scripts die dat ook kunnen, later pas de inhoud laden, maar zo is het voor mij wel net zo makkelijk eigenlijk.
Die lightbox was ik me idd al in aan het verdiepen, de foto's op de nieuwspagina zijn vaak niet zo belangrijk, slechts ter illustratie, maar anderen zou ik idd ook wel groter weer willen geven. En niet iedereen zal dan rechts klikken en "bekijken".
IK heb iig weer even wat te doen

[nirwana]

En niet iedereen zal dan rechts klikken en "bekijken".

Daar mag je in elk geval niet van uit gaan, dus moet je het de bezoekers van jouw website zo makkelijk mogelijk maken. Voordeel van het scheiden van de thumbnails en de grotere afbeeldingen is ook dat jouw website sneller ingeladen wordt.

PS 1: er zijn natuurlijk ook (uitgebreide) blog-systemen die alles online voor je kunnen regelen. Maar vooralsnog kun je jouw site volgens mij nog prima met Kompozer beheren.

PS 2: Als jouw web-hosting overigens ook PHP ondersteunt, dan is een eenvoudig CMS-systeem om je site mee te beheren: http://get-simple.info/ Een MySQL-database heb je daarbij niet eens nodig, want dit systeem gebruikt XML-bestanden om de inhoud van de site op te slaan. Ik heb dit jaar 2 websites met dit systeem opgezet en moet zeggen dat dat goed bevalt. Ik was op zoek naar een eenvoudig CMS zonder de complexiteit van Joomla/Drupal en zo kwam ik bij dit systeem terecht.

[Dingo]

ik heb de Nederlandse nieuwspagina's al gedaan, was heel simpel, 3 tellen werk, en is eigenlijk netjes zo. En ik denk idd dat dit makkelijk te beheren is met kompozer, ik heb tenslotte geen feedback oid waardoor er enorm veel info zou komen staan.
http://www.streepjes.com/nieuws.html

Nu druk bezig met lightbox, na een middag prutsen, schelden, googlen etc, bleek er op zo'n help site een ander script te staan dan in de voorbeeld pagina van lightbox 2, toen ik die gebruikte werkte het meteen. Ben nu druk de nieuwspagina op te schonen en van thumbnails te voorzien, met lightbox linkjes. Als het zover is zal ik een linkje neergooien. staat wel erg professioneel met lightbox
eerste foto werkt al:
http://www.streepjes.com/testnieuws.html

[nirwana]

Nu druk bezig met lightbox, na een middag prutsen, schelden, googlen etc, bleek er op zo'n help site een ander script te staan dan in de voorbeeld pagina van lightbox 2, toen ik die gebruikte werkte het meteen. Ben nu druk de nieuwspagina op te schonen en van thumbnails te voorzien, met lightbox linkjes. Als het zover is zal ik een linkje neergooien. staat wel erg professioneel met lightbox
eerste foto werkt al:
http://www.streepjes.com/testnieuws.html

Die testpagina ziet er al netjes uit. Als je wat lightboxen klaar hebt, dan plaats je maar weer een linkje.

't Is even een beetje gedoe met het maken van thumbnails, maar het resultaat is er wel naar.

Tip: er zijn ook programma's die in batch een map met afbeeldingen kunnen verkleinen.
Te denken valt bijvoorbeeld aan de batch-modus van IfranView waar je behoorlijk wat opties hebt.
Zelf gebruik ik daar ImageMagick voor. Dat is een commandline-programma, dus dat zal ik niet direct iedereen aanraden.

[Dingo]

1e pagina is klaar met lightbox, ziet er veel beter uit al zeg ik het zelf!

Verkleinen doe ik in photoshop, maar is niet erg, ik voeg altijd watermerk toe ivm veel "jatten", dat wordt op die manier gratis reclame (watermerk is mijn site naam, gnigni) dus zit dan toch al, ook het origineel verklein ik, die zijn anders vaak 3MB. Dus nu 1 extra handeling voor thumbje, is zo gedaan. Alleen die oude foto's is even gedoe, maar heb ik er wel voor over gezien het resultaat.

Bedankt voor de tips weer, ik werk langzaam de hele site door, meteen ook al die loze codes eruit halen dit is vast klaar:

www.streepjes.com/testnieuws.html

[nirwana]

1e pagina is klaar met lightbox, ziet er veel beter uit al zeg ik het zelf!

Ja, ziet er heel netjes uit. Je hebt ook mooi met groepen van afbeeldingen gewerkt. Mooi resultaat !

Wel lijkt het me handig als je de tekst Image x of y onder de lightbox nog naar het Nederlands kunt vertalen (voor het Nederlandse deel van de website, althans). Dat kun je eenvoudig aanpassen in lightbox.js:

Code: Selecteer alles

this.labelImage = "Image";
      this.labelOf = "of";

Dat kun je dan als volgt aanpassen:

Code: Selecteer alles

this.labelImage = "Afbeelding";
      this.labelOf = "van";

Al vraag ik me dan wel af hoe je dit het beste voor andere talen kunt doen. De eenvoudigste optie is dan dat je lightbox.js bijvoorbeeld kopieert naar lightbox_nl.js (voor de Nederlandse vertaling). Dan kun je in de Nederlandse pagina verwijzen naar dat aangepaste script-bestand.

De mooiste manier is om bijvoorbeeld een taal-variabele mee te geven aan de functies in het Javascript-bestand, al kan ik me voorstellen dat je op dergelijk programmeerwerk niet direct zit te wachten.

[Dingo]

mja, ik zou de taal in lightbox aan kunnen passen, al vind ik dat niet heel storend. Iedereen begrijpt wel waar het om gaat als er foto's staan en eronder "1 of 3"...
Ben met je eens dat het de finishing touch zou zijn als je alles correct wilt vertalen, maar voorlopig krijg ik het .js bestand niet eens geopend op mijn pjoeter... Zal wel iets voor te downloaden zijn neem ik aan? Krijg nu een foutmelding met "microsoft base" code blabla of zoiets...
Ik werk eerst de pagina's zo door, en dan zal ik eens in die js bestanden duiken op een regenachtige dag Maar bedankt voor de tip, weet nu iig dat het wel kan.

[nirwana]

mja, ik zou de taal in lightbox aan kunnen passen, al vind ik dat niet heel storend. Iedereen begrijpt wel waar het om gaat als er foto's staan en eronder "1 of 3"...

Daar heb je gelijk in. Je zou ook kunnen werken met iets wat je niet hoeft te vertalen. Bijvoorbeeld 1 / 3 om aan te geven dat het afbeelding 1 van 3 is.

Ben met je eens dat het de finishing touch zou zijn als je alles correct wilt vertalen, maar voorlopig krijg ik het .js bestand niet eens geopend op mijn pjoeter... Zal wel iets voor te downloaden zijn neem ik aan? Krijg nu een foutmelding met "microsoft base" code blabla of zoiets...

Standaard is een .js-bestand onder Windows volgens mij gekoppeld aan een script-uitvoerder (cscript.exe of wscript.exe).

Microsoft heeft eens bedacht dat je Javascript (.js) en VBScript (.vbs) ook kunt gebruiken om onder Windows bepaalde taken te automatiseren. Volgens mij waren de virus-makers daar blij mee, want daardoor hadden ze weer een extra mogelijkheid om onder Windows geavanceerde dingen voor elkaar te krijgen (mails versturen, bestanden aanmaken / aanpassen, etc).

Als je met de rechtermuisknop op zo'n .js-bestand klikt dan kun je doorgaans ook kiezen voor Bewerken (Edit). Dan opent het bestand in Notepad. Zelf gebruik ik doorgaans een iets geavanceerdere editor (Notepad++, ook gratis) om Javascript mee te bewerken. Javascript-bestanden willen nog wel eens Unix regeleinden hebben, waardoor alles achter elkaar komt te staan. Een editor als Notepad++ gaat daar standaard goed mee om. Maar goed, HTML en CSS bewerk ik doorgaans ook in een teksteditor, terwijl anderen daarvoor juist Kompozer gebruiken. Anyway, Javascript is gewoon tekst en kun je dus in een teksteditor bewerken.