Hoi RobJS,
Welkom op het forum!
Hoei, je wilt op een of andere manier een dia-sorteerapparaat creëren begrijp ik; en dat is nog niet zo eenvoudig.
De positie van de foto's hangt niet af van de volgorde van laden (als laden = uploaden), maar van de volgorde in de html.
Er moet dus in de html ingegrepen worden om de volgorde te wijzigen.
Dat zou met
javascript kunnen, als je elk <img> een eigen id="positie.." met volgnummer geeft. Dan kan je in javascript een rijtje met de volgnummers in een bepaalde andere volgorde kunnen husselen, en dan met javascript de html in die nieuwe volgorde laten opbouwen.
- Probleem 1: Het lijkt me nogal een abstracte en onoverzichtelijke bedoening; als je 35 foto's hebt met de volgorde: positie05, positie12, positie01, positie24, positie03, positie17, enz. zie je in de html nauwelijks waar je mee bezig bent.
- Probleem 2: Er moet iets verzonnen worden om later tussen twee bestaande posities nog een nieuwe foto te kunnen plaatsen. Dat zou kunnen door bij de positie-toekenning "open plaatsen" te creëren. In het begin maak je dan voor de toekenning: positie01, positie10, positie 20, enz. dan kunnen er later eventueel nog 9 tussen. Maar dat maakt het er niet overzichtelijker op.
- Probleem 3: In de Lightbox-constructie zijn er uitzonderingen in de html-code (in de classes) voor de eerste en de laatste foto. Er kan dus niet zomaar een andere als eerste of laatste genomen worden. Dat valt ook wel weer te omzeilen, maar dan moet de Lightbox-constructie met javascript geautomatiseerd worden.
Maar is het niet veel eenvoudige om in je
html-editor met de <div>'s te rangeren? Dan zie je meteen of alles goed staat.
Of zit je vast aan een CMS of sitebuilder waarin dat niet kan?
Met vriendelijke groet,
CSShunter
_______
PS: Hier is een voorbeeld van een "alternatieve lightbox", waarbij de thumbnails en grote foto's geen structuur met "eerste" en "laatste" hebben (dat is geautomatiseerd), en de images met eenvoudig slepen van de links <a> in de html te verplaatsen zijn naar de gewenste volgorde:
HTML:
<div id="serie">
<a href="DSC04858.JPG">|<img src="tn_DSC04858.JPG" alt="" title="Altijd lol bij de kikkers" /></a>
<a href="DSC04861.JPG">|<img src="tn_DSC04861.JPG" alt="" title="" /></a>
enz.
