Foto-carrousel / Layout slicen zonder tabel

Status
Niet open voor verdere reacties.

IvoBookish

Gebruiker
Lid geworden
12 feb 2010
Berichten
111
Ik zou eigenlijk ook diverse foto's willen laten zien. Alleen dan wel binnen een "div" of "container".
Wat ik wil berijken is dat ik door op een > te kliken een volgende foto laat zien of door op een < te kliken een vorige foto.
Dit alles zonder de gehele pagina te herladen.

Ben al een par weken bezig maar kom er niet uit...
evt. vraag ik het ook bij de afd. javascript al denk ik dat het (theoretisch) met html en css mogenlijk moet zijn...

Tips in de goede richting zijn welkom, thank alvst ;)
 
Het kan in theorie wel, maar het is of heel erg ingewikkeld (en ik bedoel écht heel erg), óf de pagina wordt herladen. Met JavaScript (waar ik bepaald geen expert in ben) kan het simpel en zonder herladen.
Als je het met alleen html en css en zonder herladen wilt doen, zit hier onder Thumbnails en Slideshow misschien iets bij wat je verder kan helpen.
http://css-voorbeelden.nl/afbeelding.html
Maar ik zou kiezen voor JavaScript, tenzij je echt heel veel lol heb in het sleutelen aan html en css.
O, en welkom op het forum :)
 
Laatst bewerkt:
Hoi IvoBookish,
Ik weet nog ergens een foto-carrousel op een plank te liggen (met javascript, al klaar gesleuteld), misschien is dat ook goed?
Dit is desgewenst uit te breiden met <Terug en Volgende> knopjes, of met een klik op een foto om een vergroting te zien (wel op een andere pagina, of evt. ook op dezelfde pagina), enz.

Met vriendelijke groet,
CSShunter
 
Dan maar javascript denk ik..

Ik denk dat ik idd maar over moet gaan naar javascript, die carousel is redelijk het idee, al zou die in eerste instantie niet zelf moeten "draaien"..
Dat zo dan idd dmv een klik op volgende > (waarschijnlijk wordt dat dan een plaatje)..

Zou dat bij deze carousel erbij gebouwd kunnen worden? (of moet ik m'n vraag even bij de javascript onder brengen?)
thx alvast, wel weer iets verder gekomen zo..
 
Hoi Ivo,
Ik heb de automaat uit de carrousel gehaald, en er twee knopjes bij gezet + script aangepast:
Het op deze manier gebakken javascript voldoet aan hoge eisen voor de toegankelijkheid: o.a. 100% door de automatische toets van het strenge Kwaliteitsmodel Webrichtlijnen, 100% door de automatische CynthiaSays toets voor prioriteit 1, 2 en 3 van de WCAG, en met uitgeschakeld javascript kunnen de afbeeldingen via een kleine scrollbar bekeken worden.

Het enige wat ik niet aan de praat kreeg, waren de overvloeiers in Internet Explorer 6 en 7 (ze werken wel in IE8). Heel vreemd, want de automatische carrousel-versie doet het wel in IE6 en IE7. Het javascript is op zich foutloos, en doet het ook in alle andere browsers. Op de een of andere manier lijken IE6 en IE7 niet te kunnen onthouden wat het doorloopnummer van een bepaalde afbeelding is. Hoewel redelijk thuis in de css-bugs van IE, heb ik geen idee of er voor javascript-bugs in IE ook hacks of workarounds zijn. :eek:
Maar voor deze beide kwakkelende MS-browsers heb ik er een apart vereenvoudigd scriptje in gezet, zodat zonder overvloeiers toch in IE6 en IE7 naar hartelust van voren naar achteren en omgekeerd door de foto's gebladerd kan worden.

Met vriendelijke groet,
CSShunter
 
Geweldig!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

HELEMAAL TOP

Geweldig man!!
Ik moet hem nog wat uitkleden en in mijn pagina toe passen maar ik vind hem geweldig!!!
Mooier dan ik had bedacht met die overvloeing!!!

Als hij toegepast is zal ik de link van de pagina's hier plaatsen!!!

Nogmaals dank, als ik jou ergens een keer mee terug kan helpen vraag het me gerust!
 
Toch nog een vraagje, ik ben best bekend met html en css en een klein beetje scripten, maar wat bedoel je met
fallback voor noscript browsen
??
"valt de browser terug op een eenvoudigere versie als de browser geen scripts accepteert"?

Ik ga als ik tijd heb gelijk de script goed bekijken, nogmaals THX..:thumb:

oeps, lees net het antwoord:
en met uitgeschakeld javascript kunnen de afbeeldingen via een kleine scrollbar bekeken worden
 
Laatst bewerkt:
Toch nog een vraagje...

Hoi hoi,
Toch nog een vraagje, of eigenlijk 3..
Kan ik de A HREF uit de <LI> halen zodat het geen link meer is??
Ik heb al een onLoad="runSlideShow()" dan kan er geen onload="readImageNumber();" zomaar achteraan toch?

De derde vraag is wat lastiger, niet omtrent de script maar meer omdat de DIV's niet doen wat ik wil. Ben al weer wat daagjes bezig met FLOAT left, right of clear maar hat luktmaar niet. Hier is het probleem:
Mijn opbouw, eerst een DIV over de hele lengte (top), dan een er onder(menu) (FLOAT left) dan de (main) (FLOAT left) en dan komt de DIV waar in de "carousel" moet komen.
temp.jpg

Hoe zou jij "of iemand anders natuurlijk" dit oplossen?
Dmv. FLOUT alleen kom ik er niet. Het zou me wel lukken maar dan moet het in een TABLE, en das eigenlijk niet netjes meer natuurlijk...

THX again..
 
Kan ik de A HREF uit de <LI> halen zodat het geen link meer is??
Ja hoor. Ik had 'm er alleen in gezet, zodat je eventueel met een klik erop een uitvergroting zou kunnen laten zien, of naar een bepaalde andere pagina zou kunnen gaan. Maar dat hoeft natuurlijk niet.

Ik heb al een onLoad="runSlideShow()" dan kan er geen onload="readImageNumber();" zomaar achteraan toch?
Hé, dat zou betekenen dat er nog een SlideShow script op dezelfde pagina in werking is. Is dat echt zo, of is het een restant van een vorige versie? En zit er dan ergens in de <head> een verwijzing naar dat andere script?
Als het echt zo is, en er ook nog op een andere plek in de pagina een andere SlideShow gaande is, dan zou even goed gekeken moeten worden of beide scripts elkaar niet in de weg zitten (doordat bv. variabelen dezelfde naam hebben).
Maar er kunnen op zich best twee of meer opdrachten onLoad gegeven worden: onload="runSlideShow();readImageNumber();" of iets dergelijks. De bijbehorende commando's worden dan na elkaar uitgevoerd.

de DIV's doen niet wat ik wil.
Hoe zou jij "of iemand anders natuurlijk" dit oplossen?
De <div>'s doen wat je opdraagt, en niet wat je wilt. ;)
Ik zou eens proberen in de css (hier beperkt tot de hoofdzaken):
Code:
[FONT="Courier New"][SIZE="2"]#menu { float:left; width: ..px; }
#carrousel {float: right; width: ..px; }
#main { 
   margin-left:  ..px; /* even groot als de breedte van de #menu-kolom */
   margin-right: ..px; /* even groot als de breedte van #carrousel, */
                       /* als dat ook een kolom moet worden;  */
                       /* als de content onder #carrousel mag doorlopen, */
                       /* dan geen margin-right. */
                       /* geen float, geen breedte */
   }[/SIZE][/FONT]
En dan in de html dezelfde volgorde van <div>'s aanhouden.
De #main gaat dan automatisch de ruimte tussen de linker- en de rechter-float opvullen.
De table kan dan rustig in de woonkamer blijven staan, in plaats van in de computer gepropt te moeten worden; dat zou alleen maar hakhout en splinters in de html veroorzaken). :D

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Klinkt inderdaad logies!!!
Maar het lukt me niet, dus ik draag ze het verkeerde op!!! LOL

Zou je de moeite willen nemen om er nog eens naar te kijken?
Het is een site voor mijn moeder, die geeft wat naailessen en die wil ik een site geven....
Als het niet lukt doe ik het wel met een <iFRAME> maar ja, het is ook wel leuk om die javascript van jou uit te testen en leren te begrijpen ;-)

De site staat hier:
http://www.dekoweb.nl/tresmode
de css staat
http://www.dekoweb.nl/tresmode/include/tresmode.css

Alvast en weer bedankt!!!
 
Hoi Ivo,
Ik ben even aan het kijken! :)
Het idee van de pagina is leuk, en er zit inderdaad nog een andere platenwisselaar in. Later maar eens kijken of ze elkaar dwars zitten. Eerst wat hoofdzaken regelen. ;)
  • Vooraf: er zitten wat html-fouten in, dat doet de layout nooit goed. - Bv. Firefox en Internet Explorer geven nu ook een totaal verschillend beeld. Dat zal beter gaan als de html op orde is.
  • De totale breedte van de pagina heb je gezet op 1024px, waarschijnlijk om 'm precies binnenboord te houden bij een resolutie van 1024x768px. Dat lukt alleen, als de hoogte van de pagina ook op het beeldscherm past, en dat hoeft lang niet altijd het geval te zijn (is bv. afhankelijk van hoeveel toolbars een bezoeker in zijn browser heeft staan e.d.). Dan komt er een scrollbar aan de rechterkant te staan, die breedte van de breedte afsnoept. D.w.z. je pagina is dan te breed voor het scherm, en dan komt er beneden ook een scrollbar (links-rechts): om het door de scrollbar omlaag-omhoog afgepikte stukje breedte te kunnen tonen. Vandaar kan je het beste altijd een pagina-breedte opgeven die rekening houdt met een scrollbar aan de rechterkant: d.w.z. maximaal zo'n 1000px.
  • Verder zie ik dat je echt alle elementen een hoogte en een breedte hebt gegeven. Dan zit er geen enkele speling in, en gaat het mis als iemand bv. een andere lettergrootte wil gebruiken. In Internet Explorer kan dat niet, als je een vaste lettergrootte in px opgeeft (hoewel dat volgens de standaarden verboden is). In andere browsers kan het wel, en dan kunnen teksten "uit de box lopen" waar deze in zitten, met rare achtergrond-kieren als resultaat.
Ik ga nog even verder kijken, maar ik mis een puzzelstukje: het plaatje rechtsonderaan, dat onder het carrousel zit, en boven de footer: met het bovenstukje van het cm-rolletje en de rest van het cirkelachtige ding (koffiekopje?).
Kan je de link naar dat plaatje even hier zetten?

Met vriendelijke groet,
CSShunter

PS:
Over het neerzetten van een pixel-precieze layout zie "The Graphical Designer and the CSS Zen Guru". ;)
 
Laatst bewerkt:
Ik wil mijn foto's laten zien op mijn website dit wil ik net zoals hier http://www.paarden.fotodesignstudio.nl/

en ik probeer dat in HTML te maken maar 't lukt niet.. :D
kan iemand mij helpen

hoi.

ik heb zelf voor mijn fotos een programma gebruikt:

"jaalbum"

bovendien nog gratis ook.

hierin kan je vele soorten manieren vinden van en hoe je de fotos wilt laten weergeven.

de manier van weergave die jij aangeeft volgens de link heb ik ook ontdekt met dat programma jaalbum/

en er is veel en veel meer mogelijk.

het is een uitgebreide programma voor foto weer gave.

watermerken veel is er mee mogelijk.

ideaal voor websites!

meer uitleg wil ik je best geven over t programma maar op het internet vind je ook het een en ander met voorbeelden.

het gebruik van het programma is redelijk makelijk en is in het nederlands.
 
Hoi csshunter,

Dat "puzzelstukje" zijn eigenlijk een klein aantal plaatjes.
eerst een "spacer", dan een "back" button", dan een "centerspace", dan een "forward" button, en als laatste, je raad het al, een "spacer"
Hier is het plaatje zoals hij er uit zou moeten komen te zien..
tresmodesite.jpg


Die HTML futjes ben ik aan het na kijken al moet ik zeggen dat ik een aantal ook niet ken, ga ik zeker ook opzoeken!

Bedankt voor de tip over de scrollbar, zal in de toekomst hier rekening mee houden, ik denk alleen wel dat dit steeds minder zal worden omdat er steeds meer "breedbeeld" monitoren verkocht worden!

Verder zal ik zaken rond "pixel-precieze" ontwerpen zeker een dieper bekijken.
Eigenlijk gebruik ik deze manier van werken altijd, dus zeker interesant!!! THX

Weer bedankt, ook voor het geen je nog gaat doen!
 
Aah, koffie! Dat was m'n ontbrekende puzzelstukje. :D
Met dit bakkie erbij kan ik verder knutselen.

Wordt vervolgd!
CSShunter
 
Nee, toch nog niet. :confused:
  • Het laatste plaatje is een jpg-bestand: dat is onscherper, en de tinten zijn hier lichter dan in de rest van de plaatjes die opgeslagen zijn als png-bestand.
  • Ook is het cm-rolletje in de jpg iets meer naar links komen te staan dan in het onderste stukje ervan in de footer-png.
Dus nu wordt de vraag: heb je het partje "koffiekopje" ook als png, en een aangepaste png voor de footer?

Met vriendelijke groet,
CSShunter
 
Nou ja zeg.....

Die ben ik gewoon vergeten te plaatsen...
Zeker te weinig koffie op, in slaap aan het vallen... :confused:
Maar goed, hij staat wel in de map image, dus dat is...
http://www.dekoweb.nl/tresmode/images/koffie.png
Die moet dus nog in een divje erbij komen onder de "knopjes"..

Thx voor het .. puzzelen.. de koffie is op mijn kosten.. :)

Ivo
 
Stom, had ik zelf kunnen raden, dat ie koffie.png heette. ;)

- Jahaah, die is mooi van kwaliteit. Alleen het opschuiven is nog geen zuivere koffie: als ik het schoteltje precies laat aansluiten op het footer-img, zit de centimeter op een andere plek (en ook de 38e cm is incompleet). :shocked:

kofkof.png

Volgens mij zijn er twee versies in omloop: één met, en één zonder suiker. :D
Ik denk dat de footer nog een oude versie is, anders komt de centimeter in het kopje.
Kan je nog eens koekeloeren?

(Intussen ben ik 'm van boven naar beneden aan het opkalefateren. Hij past nu zonder horizontale scrollbar op 1024x768; logo iets naar rechts getrokken om smalte te krijgen. Is nu ook valid html en css, en zowel in IE7 als FF toonbaar.
Alhier dit tussenresultaat. :) )

Morgenochtend begin ik met een sterke bak!
CSShunter
 
Laatst bewerkt:
Maar die url van de eerste post, ik bind hem wel een beetje lelijk als je full screen kijkt, alles in een klein hoekje gepropt?
 
Tja, die link van de TopicStarter op 9 november vorig jaar?
  • Dat was een site waarnaar gelinkt werd als voorbeeld voor een opschuif-script, en niet een site waarover advies werd gevraagd.
  • Inmiddels zijn we volledig van dat script af, heeft de TS zich niet meer gemeld, zijn er verse vragen voor in de plaats gekomen, en hebben we het over hele andere dingen.
  • Kortom: inderdaad staat die paarden-site niet mooi gecentreerd, maar als we hier op het forum recensies gingen schrijven over willekeurige websites, zouden we nog wel even bezig zijn! :D
Over tot de orde van de dag dus.

O, Ivo: toch nog andere ontbrekende puzzelstukjes.
De png's blijken ietsje transparantie te hebben, waardoor het achtergrond-motiefje er door heen piept, en het geheel wat smoezelig wordt.
Als de transparantie er uit gehaald wordt, kan de pagina strakker worden. Maar: van het stukje rechtsboven (de andere wisselaar) zijn er alleen jpg'tje's waar de bobbeltjes al in zitten. Zijn die wissel-stukjes er ook nog in png-gedaante?
  • Of, misschien wel zo makkelijk: heb je de grote png met het complete beeld? Als je die even tijdelijk ergens op de site zet, kan ik 'm aftappen om 'm anders te slicen (nodig om goed uit te komen met de div. div'jes).
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan