portofolio presentatie homepage

  • Onderwerp starter Onderwerp starter beta
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

beta

Gebruiker
Lid geworden
8 aug 2005
Berichten
27
Hoi,

Voor mijn site (http://www.natuuridee.nl) wil ik op m'n homepage een soort van foto presentatie/slideshow maken maar ik heb geen idee hoe. Ik wil dus alleen foto's laten langskomen met interval van 2 seconden oid. Geen fratsen, alleen de foto's. En als het zou kunnen ook van elke afbeelding een link naar de gallery die ik via lightroom heb gemaakt.
Ik heb het hele CS3 pakket. Kan ik dit via Flash doen? Of zijn er gratis scripts oid waar ik de CSS van kan aanpassen?

Alvast bedankt!
 
Hoi Luuk,
Zit je te springen om een antwoord? ;)
Toen ik je vraag las, verwachtte ik dat er al gauw een paar reacties zouden komen met div. script-oplossingen, want er zijn er best wel een hele serie in omloop.
  • Maar wat ik daarvan ken, zijn het vaak puur ingewikkelde (en omvangrijke!) (AJAX) scripts, waarvan dan slechts een deel gebruikt wordt. En: het functioneren van het carrousel is dan vaak geheel afhankelijk van javascript (als dat uit staat, ben je de pineut).
In de tussentijd ben ik wat aan het knutselen geslagen om te proberen een eenvoudig en kort javascriptje te maken, met een automatische terugval op een scrollbalkje dat de bezoeker zelf kan bedienen als deze geen javascript aan heeft staan. - Ik ben geen super-scripter, dus het vallen en opstaan is bezig ('t is ook gladjes).
  • Edoch ... mijn werk riep (ik kon geen weerstand bieden :D ), en kan nog niets presenteren.
Mocht iemand ander me voor zijn, geen probleem! :)

Met vriendelijke groet,
CSShunter
 
wow, en dat voor iemand die je niet eens kent :p. Petje af! Ik was al aan het stoeien met de airtight autoviewer engine in Adobe Lightroom (voordat ik Adobe Flash ga proberen te begrijpen :p). Als ik wat je voor je terug kan doen moet je het zeggen (Link naar jouw site of iets dergelijks, weet nu hoe het mooi moet ^^).
Alvast bedankt.

Gr. Luuk
 
Sorry csshunter, maar ik ben je toch voor ;) (welliswaar in Flash, ik weet niet wat beta liever heeft :P)

Hier kan je het bestandje downloaden.

Even wat uitleg:

In het gallery.fla bestand staat 1 MovieClip. Deze MovieClip houdt al je foto's/afbeeldingen. Op elke volgende frame plaats je een nieuwe foto :-) (Ik heb er nu even 3 gekleurde vierkantjes in staan ter voorbeeld)

Het ActionScript bestand kijkt vervolgens hoeveel frames er in die MovieClip zitten, en laat ze een voor een zien tot hij bij de laatste komt, daarna begint hij opnieuw ;)

Het is echt heel basic (omdat je daar ook om vroeg) maar dit is natuurlijk makkelijk uit te breiden naar wat mooiers :) (effecten tussen de slides, etc.)

Overigens: Je kan de grootte van de stage en de MovieClip zo aanpassen, als je de naam en ActionScript export settings van de MovieClip maar hetzelfde houdt ;) Dat is alles waar de code naar kijkt :)

Overigens ben ik ook benieuwd naar jouw ding csshunter! Ik wil binnenkort graag JavaScript gaan leren, dus als jij iets leuks oplevert met een beetje commentaar erin dan kijk ik er graag naar :)

Edit: Ik zie dat je CS3 hebt, dus ik heb het bestand even opgeslagen als CS3 bestand zodat je het ook kan openen, wel zo handig ;)
 
Laatst bewerkt:
Thx Lunanoko!! Alleen snap ik nog niet genoeg van Flash om mijn eigen foto's erin te stoppen. Ik probeer het met slepen maar dan krijg ik kleinere foto's te zien (terwijl ze echt 550px breed zijn, net zo groot als de gekleurde vierkantjes). Geef eens een hint :p.

Gr. Luuk
 
Hoi Luuk,

Ik ben op het moment even druk voor school bezig ;) Moet morgen een ActionScript opdracht afhebben en ik zit momenteel met een hele vervelende bug... :shocked:

Ik heb zaterdag ochtend voor het eerst weer tijd om hier naar te gaan kijken, misschien kan in tussentijd iemand anders je helpen, anders ben ik bang dat je even op me moet wachten :( (of misschien heeft csshunter daarvoor zijn ding af en blijkt die veel handiger ;))

Sorry!!
 
Hoi Luuk en Lunanoko,
Yep, die flash doet het.
Ik zit momenteel ook in de vertraging van de tijdmachine: druk-druk-druk op werk, en tot overmaat van ramp bleken gisteren 3 van de sites die ik in beheer heb gehackt! xcDH*$%ky :mad: Tijdelijke maatregelen treffen, provider contacten, enz. - Maar gelukkig hebben ze 't lek gevonden (gaatje in de php-beveiliging van de server), zaak hersteld, alles gereset, en back-ups teruggeplaatst. Vandaag eind van de middag deed alles het weer op de server; dus kon ik ook m'n tijdelijke pagina's weer vervangen door de originele. > Hèhè, ik draai weer. :D

Verder ben ik ook niet zo'n held in javascript, dus het gaat stapje voor stapje, en uiteindelijk zou ik er toch moeten komen. Leuk om te ontdekken, in elk geval. Het draait allemaal om pure logica, dus in principe is het eenvoudig (en ik heb al wat essentiële onderdeeltjes klaar). Maar als je niet heel precies kunt definiëren wat je wilt (dat is dus mijn leerproces), ja, dan komt er ook niet vanzelf uit wat je wilt. ;)
Ik geloof dat ik nog één loop'je in een loop'je moet temmen/debuggen, en dan zou het moeten werken.
Maar dan heb ik er ook mooie overvloeiers in. En een fall-back voor als javascript uit staat :p

Ik denk dat je ook in flash wel overvloeiers zult kunnen maken, maar van flash heb ik helemaal de bollen verstand. Mijn probleem met flash (wat ik er op veel sites van zie, dan; want het moet ook anders kunnen) is dat het op een enkele uitzondering na behoorlijk ontoegankelijk is voor text-browsers, mensen die geen flash (kunnen) gebruiken, enz. Dus ook bij de flash-variant zal nog iets aan fall-back verzonnen moeten worden, lijkt me.

In elk geval:
Wordt vervolgd!
CSShunter
 
Bedankt voor de berichten! Ik heb er geen haast mee, zal ondertussen proberen Flash te 'temmen' (of in ieder geval proberen te begrijpen ^^). In ieder geval al bedankt voor de moeite en k ben benieuwd!

Gr. Luuk
 
Hallo Luuk,
Ik meld me weer, en nu met de kreet: "Joehoe-hoe-hoi!". :D
D.w.z. het is me uiteindelijk gelukt: de puzzel is af!
  • Een flashloos foto-carrousel
    met javascript en css, dat ook bestand is tegen uitzetten van javascript. :)

  • Zonder javascript is het gewoon een plaatje met een scrolbarretje ernaast om de andere plaatjes te zien.
  • Met javascript aan is het een plaatje dat een aantal seconden blijft staan, en dan overvloeit naar het volgende plaatje. Tot alles op is, dan begint het carrousel opnieuw te draaien met het eerste plaatje.
  • Het aantal seconden pauze tussen de plaatjes is in te stellen in de <head> van de html. Het eigenlijke carrousel-script zit extern, en daar hoeft niets aan veranderd te worden.
In de html is het simpelweg een lijstje van afbeeldingen geworden:
HTML:
<div id="carrousel">
   <ul>
      <li><a href="..."><img id="thumb-1" title="Klik voor ..."
				src="images/..." alt="..."></a></li>

      <li><a href="..."><img id="thumb-2" title="Klik voor ..."
				src="images/..." alt="..."></a></li>

      <li><a href="..."><img id="thumb-3" title="Klik voor ..."
				src="images/..." alt="..."></a></li>
   </ul>
</div>
zodat je zonder enige inspanning foto's kunt toevoegen, weghalen of van volgorde kunt veranderen. De rest bedient zichzelf.
  • Met de link van een foto kan je bv. een nieuwe galerij- of andere pagina openen, of de foto op groot formaat laten zien, of er een functie aan toekennen, enz.
  • En ook deze zijn makkelijk naderhand te wijzigen in de html: zonder in een flashbestand of ander bestand te hoeven inbreken.
  • De toegankelijkheid (accessibility) is hier geen enkel probleem; dat kan van flash niet altijd gezegd worden...;)
Zou dit bruikbaar zijn?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hmmm, bij nogmaals testen blijken IE6 en IE7 te stremmen als een nieuwe ronde van het carrousel ingegaan wordt. De eerste foto krijgt dan geen fade-in, en floept alleen even aan op het moment dat foto 2 zijn fade-in krijgt.
IE8 en de andere browsers hebben daar geen last van. Grmmpf! Altijd IE weer. :mad:
Misschien verzin ik er nog wat op, maar ik zie het voorlopig somber in voor deze twee.

Met vriendelijke groet,
CSShunter
 
Hoi CSS hunter,
Thx!!!!! Op jouw link ziet het er goed uit! Ik heb geprobeerd om het te implementeren in mijn index.html (http://www.natuuridee.nl/test.html) maar ik ik krijg er niks uit. Kun je svp/aub/please in de broncode kijken wat ik fout doe. Ik heb de html code uit jouw pagina deels gekopieerd in die van mij (alleen de stukken die deel uitmaken van de carrousel uiteraard).

Ik heb de carrousel.js in een "Scripts" folder geplaatst zodat ie deze ook zou moeten vinden. Voor de rest zie ik zo niet wat er fout gaat (heb ook niet zo'n getraind oog hierin). Ik heb het .css bestand gekopieerd in de index.html pagina. Ik gebruik overigens Safari maar ik neem aan dat dat geen probleem zou moeten zijn.

Heb je toevallig een mooie header voor jouw site (http://developerscorner.nl/)? Dan kan ik die in mijn links sectie zetten?

Gr. Luuk
 
Laatst bewerkt:
Zucht... had ik maar JavaScript geleerd op school in plaats van ActionScript... :(

In ieder geval heel vet gedaan ;) Ik ga de boel ook even opslaan en gebruiken als ik over enkele weken aan mijn JavaScript leerweg ga beginnen! Het zou nog eens van pas kunnen komen :P

Ennuh, ik laat mijn Flash ding dan natuurlijk zitten, want zoals eerder gezegd is dit eigenlijk veel beter ;)
 
Hoi Luuk,
Prettig dat ie bevalt! Is m'n gekl**i niet voor niks geweest. :)

Een blik in de broncode leerde:
  • Op regel 192 staat </head>
  • Op regel 194 staat <body>
  • Op regel 196 staat <div id="container">
  • ...enz.
  • Op regel 244 staat </head>
  • Op regel 246 staat <body onload="...">
  • ...en daarna het carrousel
Maar twéé hoofdeinden en twéé body's in één html-pagina: dat kan niet goed gaan.
(en één hoofdeind en twee body's kan heel gezellig zijn, maar zelfs dat mag niet in html-code.) ;)

Verder horen de regels 226 t/m 239 (het script met de pauze-instelling en de afwijkende styles voor als javascript aan staat) wel degelijk in de echte (eerste) <head> te staan, en niet midden in de <body>-codes.
Bedoeling is nl., dat deze styles vooraf -- voordat de pagina gerenderd wordt -- de styles uit het stylesheet de wind uit de zeilen gaan nemen.
En in de <body> mogen geen style-blokken neergezet worden, alleen in de <head>.

Als je de html-validator raadpleegt (altijd aan te raden als iets niet werkt; en ook als iets wel werkt, trouwens), dan zie je dat die stevig begint te mopperen. Klopt dus als een zwerende vinger!
Maar de validator is positief kritisch ingesteld: hij geeft er ook altijd suggesties voor verbetering bij.

Wat ik er nog niet bij verteld had, was dat de id's van de afbeeldingen in het carrousel systematisch "thumb-1", "thumb-2", enz. genoemd moeten worden.
Dat is voorwaarde om de css en het script te laten werken, want die komen op deze namen terug. Het script gebruikt bv. 'thumb-'+i+'', en daarin wisselt de variabele i om steeds een andere foto te nemen.
Zonder deze naamgeving komt het hele carrousel niet tevoorschijn!

In de css moesten bij #carroussel img {...} nog even de correcte echte maten van je foto's opgegeven worden (niet de berekende breedtes en hoogtes van de containers waar ze in zitten), en met nog wat correctie van een paar schoonheidsfoutjes wordt het dan:
Mijn verzuchting:
... blijken IE6 en IE7 te stremmen ... ik zie het voorlopig somber in voor deze twee.
blijkt te kloppen. Ik heb even wat nageplozen, en het blijkt een "bekende bug" in IE6 en 7 te zijn: de "Explorer z-index bug".
Het komt er op neer, dat afbeeldingen die verderop in de html staan, zich bij deze twee niets van de z-index (= getal wat de laag-volgorde aangeeft) aantrekken, en altijd de laatste afbeelding bovenop zetten. dat gaat goed bij de foto's t/m de laatste, maar bij de switch naar de eerste ligt de eerste "er onder" (zit eerder in de html), en wordt dus niet getoond totdat de laatste echt weggehaald wordt (maar dat gebeurt pas na het infaden), anders vloeien ze niet mooi over.
Aan deze bug valt heel soms wat te doen, maar veel vaker ook niet, las ik. In ons geval niet; tenminste ik heb verschillende gesuggereerde bug-neutralisators er op losgelaten, en die werken allemaal niet. - Ik denk dat IE6 en IE7 gebruikers daar maar mee moeten leven, want het zou toch langzamerhand tijd worden dat ze de update naar IE8 maken: ook voor hun eigen veiligheid. Of gewoon een betere browser.

Ik zie nog wel een klein gaatje om IE6 en 7 ook in het gareel te krijgen: gaan werken met wisselende voorgrond- en achtergrond-afbeeldingen. Maar daarvoor zou het hele script herschreven moeten worden....

@Lunanoko:
Maar meteen wel een mooie huiswerkopdracht voor jou, als je je in javascript gaat verdiepen: "Gebruik het carrousel-script, en schrijf dit om zodat een plaatje op de voorgrond, na het infaden, een achtergrondfiguur wordt, waaroverheen dan telkens de volgende foto zijn fade-in kan krijgen." :p

En weer @Luuk:
Ik gebruik overigens Safari maar ik neem aan dat dat geen probleem zou moeten zijn.
Een prima aanname! - Maar als je een site maakt, is het altijd aan te bevelen die steeds in meer browsers te testen. - Je kan verschillende browsers naast elkaar geïnstalleerd hebben staan (ze bijten elkaar niet), en bij ontwerp-klusjes rammel je die dan steeds allemaal af. Voor het gewone werk gebruik je dan je standaard-bowser.

Aardig dat je een logo-link naar mijn site (is ook wel eens aan een update toe...) wilt maken. Je zou deze daarvoor kunnen gebruiken (oogt ook prettig op donkere achtergrond).

Succes weer!
CSShunter
 
Thx voor je bericht! Hopelijk kostte het je niet al teveel tijd. Er zaten ook wel stomme fouten van mijn kant tussen zeg... :p. Ben ermee aan de slag gegaan.

Je site ligt er al een tijdje uit merk ik. Kan je header dus nog niet downloaden.

Gr. Luuk
 
Geen dank hoor. Het fabrieken van de werkende testpagina was gauw gepiept, en kostte minder tijd dan het opstellen van de reactie in hopelijk begrijpelijke taal. :)

- Ja, m'n provider-server/site bleek vandaag alweer gehackt. :(
Maar het ziet ernaar uit dat ie nu weer gerepareerd is: momenteel weer online.
  • Dus ook m'n wow'se testpagina is weer in volle glorie (dankzij jouw foto's) te zien.
Gegroet!
CSShunter
 
Toppie! Hij staat online online. Werkt goed met Safari, Firefox, en IE8. Ik heb er niet zo'n problemen mee dat IE6/7 niet goed werken. Over een tijdje gebruikt niemand deze meer en ik betwijfel of ze blijven wachten tot mijn 13 foto's grote slideshow opnieuw begint. Heul erg bedankt iig!

De link naar je website staat er nu ook bij. Als je bij de beschrijving iets anders kunt verzinnen hoor ik het wel, verander ik het even.

Verder vroeg ik me nog af of je de volgorde waarin de foto's tevoorschijn komen kunt randomizen? Nu krijg je een vaste volgorde en zien mensen vaak de laatste foto's niet. Zo niet, maakt dit ook niet uit. Kan ik altijd nog handmatig doen per week ofzo.

Gr. Luuk
 
Laatst bewerkt:
Mooi, dat zal ze leren bij Microsoft met hun IE6 en IE7! ;)

Bedankt voor de link, tekst is prima zo. Alleen graag de verwijzing ook naar developerscorner.nl (en niet naar home.tiscali enz.), want developerscorner.nl is de nieuwe/echte en verwijst waar nodig naar de tiscali-homepage (omgekeerd niet). De hele tiscali-bubs moet ik nog eens omzetten... :rolleyes:

Randomizen van de foto's zou inderdaad kunnen, maar dat vergt weer extra script-gedoe. Ik zou gewoon één keer twee pagina's maken, index-a.html en index-b.html.
  • De ene is zoals nu, de andere begint halverwege de foto-serie (met de eerste foto's er achteraan).
  • Dan kan je elke dag/week/maand afwisselend één van de twee uploaden (met naamswijziging op de server tot index.html).
  • Klaar! :D

  • Eventueel zou de wissel tussen variant-a en variant-b nog geautomatiseerd kunnen worden (javascript vraagt datum op, afhankelijk van datum wordt de normale inhoud van de <div id="carrousel"> met innerHTML vervangen door de halverwege-variant). Maar omdat dat tijd kost als de pagina al geladen is (moet zijn, om te kunnen vervangen) brengt dat misschien een flits van de oude eerste foto teweeg. Geen idee.
  • De escape is om het met serverside scripting (PHP) te doen, dan wordt de kant-en-klare pagina a of b als totaalpakketje naar de bezoeker ge-internet en komt alles meteen in beeld.
Met vriendelijke groet,
CSShunter
 
Thx. Heb je link nu ook aangepast. Ik zal de foto's handmatig af en toe eens wisselen. Zo gedaan.

Gr. Luuk
 
Hij doet t niet.....

hoi,

fantastisch mooie caroussel, CSSHunter, en fantastisch mooie foto's, Natuur idee.
Ik heb de code voor de caroussel 'geleend' en een beetje vervormd in mijn eigen link geplaatst.

Maar helaas....... plaatje is er wel, caroussel niet..... Kan iemand in mijn broncode kijken en kijken wat ik vergeten ben???
code welke in CSS staat is deze:

#carrousel {
/* breedte bij uitgeschakeld javascript:
530px = img-breedte 500px + horizontale img-padding 10px + scrollbar-OpNeer ruimte 20px
hoogte bij idem:
342px = img-hoogte 332px + 2x(verticale img-padding)=10px
*/
position: relative;
width: 300px;
height: 300px;
margin: 5px auto; /* naar smaak! */
padding: 0 0 0 18px; /* padding-left = scrollbar-breedte voor gecentreerd uitlijnen */
overflow: auto; /* voor noscript: oproepen scrollbar */
}
#carrousel ul {
height: 300px; /* gelijk aan #carrousel-hoogte */
margin: 0;
padding: 0;
list-style: none;
}
#carrousel li {
margin: 0;
padding: 0;
}
#carrousel img {
width: 250px;
height: 250px;
padding: 5px; /* voor noscript: vert. tussenruimte, hor. afstand tot scrollbar */
vertical-align: top;
border: 0;
}
-->
</style>

<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 { width: 230px; }
</style>
<![endif]-->

<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#sidebar1 { padding-top: 30px; }
#mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

bij voorbaat dank!

Iris
(oh ja, linkjes enzo moeten natuurlijk niet meer natuuridee gaan.... die haal ik straks weg, eerst het draaimolentje in werking zien te krijgen...... ;-)
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan