picture gallery

[behived]

een veelgevraagd item op het forum :)

wie maakt er de mooiste/gebruiksvriendelijkste/coolste/... picture gallery?

en om van start te gaan:

http://www.creative-web.be/test/gallery.html

gewoon fotootjes juist benoemen (foto1.jpg, foto2.jpg, foto3.jpg, ...) en in de juiste map plaatsen samen met de swf en html

++ te grote foto's worden verkleind
++ loopt automatisch
++ geen php, .txt, ... nodig

-- je moet je foto's hernoemen
-- design is niet grandioos
-- geen thumbnails, buttons, pauze knop, ...
-- Stage.width en height geven vreemde resultaten in de test mode in flash

even de volledige code meegeven:

//made by behived - http://www.creative-web.be
//waarde/speed
speed=12
//intervalspeed volgende foto (1000 = 1 sec)
speed_overgang=6000
// ex: _alpha+=3 hoe hoger hoe sneller minstens 3
speed_alpha=3


//maak movieclip die pictures omlijnt
this.createEmptyMovieClip("lines",this.getNextHighestDepth());
//teken wit vierkant in mc lines
lines.beginFill(0xFFFFFF, 100);
lines.moveTo(0, 0);
lines.lineTo(0, 100);
lines.lineTo(100, 100);
lines.lineTo(100, 0);
lines.lineTo(0, 0);
lines.endFill();

//maak movieclip waar pictures worden ingeladen
this.createEmptyMovieClip("container",this.getNextHighestDepth());
//maak mask
lines.duplicateMovieClip("maskit",this.getNextHighestDepth());

//stel teller in
i=1

//maak de functie
var My_mc1:MovieClipLoader = new MovieClipLoader();
var My_mc2:MovieClipLoader = new MovieClipLoader();
var myListener:Object = new Object();

//functie voor als foto ingeladen is
myListener.onLoadComplete = function () {
//reset schaal container
container._xscale=100
container._yscale=100

function resizer () {

//controleer grootte ingeladen foto
if(container._width>Stage.width-20){
container._height=(container._height/container._width)*Stage.width-20
container._width=Stage.width-20;
}
if(container._height>Stage.height-20){
container._width=(container._width/container._height)*Stage.height-20
container._height=Stage.height-20;
}
//plaats container in het midden van de movie
container._x=(Stage.width-container._width)/2
container._y=(Stage.height-container._height)/2
//pas coördinaten masker aan
maskit._x=(Stage.width-maskit._width)/2
maskit._y=(Stage.height-maskit._height)/2
maskit._width+=(container._width-maskit._width)/speed
maskit._height+=(container._height-maskit._height)/speed
//pas coördinaten omlijning aan
lines._width+=(container._width+10-lines._width)/(speed-5)
lines._height+=(container._height+10-lines._height)/(speed-5)
lines._x=(Stage.width-lines._width)/2
lines._y=(Stage.height-lines._height)/2
//maak container zichtbaar
if(container._alpha<100){
container._alpha+=speed_alpha}
trace(container._alpha);
// clearinterval als juiste posities zijn bereikt
if(Math.round(maskit._width)==container._width){
clearInterval(intervalID);
trace("interval cleared")
}
// stel maskit als masker in
container.setMask(maskit);
// update na aanpassingen
updateAfterEvent();
}
//stel interval in
intervalID=setInterval(resizer,20);
}

//functie als foto niet bestaat
myListener.onLoadError = function () {
i=1
My_mc1.loadClip("foto"+i+".jpg",container);
i++
}
//koppel myListener aan My_mc1
My_mc1.addListener(myListener);
//maak functie voor in interval
function loader () {
//bepaal de overgang van de foto's
function overgang(){
//als interval nog niet gecleared is, nu wel
clearInterval(intervalID);
trace("interval cleared")
//maak de container mc onzichtbaar
container._alpha-=speed_alpha
//als de container mc onzichtbaar is:
if(container._alpha<1){

//laad de volgende foto
My_mc1.loadClip("foto"+i+".jpg",container);
i++
clearInterval(intervalID2);
}
}
//bepaal de snelheid waarmee de functie overgang wordt herhaald
intervalID2=setInterval(overgang,20)

}
//laad eerste foto in
My_mc1.loadClip("foto"+i+".jpg",container);
i++
//bepaal de snelheid waarmee de functie loader wordt herhaald
setInterval(loader,speed_overgang);

alles op de eerste frame kopiëren, foto's in dezelfde map zetten en testen in browser

[Roenes]

Leuke battle en leuke fotogallery, alleen zoals je zelf al aangeeft wat weinig opties. :)

Ik denk dat ik van de week hier eens lekker mee bezig ga. Eerst ff je code doornemen en dan zelf knallen! ;) 1 ding vink wel jammer, dat je code geen AS2 is ;)

[behived]

ben ooit begonnen met flash 3; ik kom dus al van ver eh!
kan je mij wijzen op de zaken die je anders zou doen?

[VAW]

He! Hier ben ik ook mee bezig de laatste tijd. Ben bezig met een nieuwe versie van www.vaw.be/foto . Als hem af is zal ik hem hier ook wel posten!

[Roenes]

kan je mij wijzen op de zaken die je anders zou doen?Vant weekend :D

Dan zal ik em ook eens in AS 2 schrijven (jouw code) met hier en daar een aanpassing :)

[Ea.Z]

mag het ook een fotoalbum zijn dat erg overdreven gewapend is voor de wensen van een gebruiker (moet er een voor een klant maken, en dit zou nu net passen)
doel is dat alles zo dynamisch moglijk is zodat ik het voor meerdere klanten kan gebruiken...
mag ik mee doen? (hoelang gaat deze battle?)

[Tha Narie]

http://fotoalbum.jpsproducties.nl/
Tijdje geleden gemaakt voor een klant. Moet nog wat uitgebreider worden met thumbs ed.

[Roenes]

Narie, is jouwe xml/database aangestuurd? Omdat je de achtergrond laat resizen voordat je met laden begint.. Dus ik ga ervan uit dat je in een file de breedte en hoogte van een foto hebt staan :)

[Tha Narie]

Ik genereer idd bij het opstarten een XML file met PHP: http://fotoalbum.jpsproducties.nl/images.php

[Ea.Z]

Dus het mag heavy scripted zijn? heb dus toffe plannen he :p

[Tha Narie]

Sure why not :)
Ik moet er voor m'n werk nog 1 maken, waar ook albums en Video in gaat komen. Als die af is zal ik hem posten ;)

[behived]

@ eaz: geen beperkingen buiten je eigen kennis en creativiteit!

[Ea.Z]

@ eaz: geen beperkingen buiten je eigen kennis en creativiteit!
mij dankt u...
mij zal zien hoe goed mijn stemming is en dan mss beginnen...
mij vraagt zicht af hoelang battle duurt?

[Tha Narie]

Is volgens mij geen deadline gesteld ;)
Je kan opzich altijd inzenden, je merkt vanzelf of hij 'dood' is gelopen :p

[VAW]

http://www.tmfawards.be/index.php?page=gallery
Dit is trouwens één van de beste gallery's die ik al ben tegengekomen! Heel slik gemaakt!

[Mitch]

http://www.tmfawards.be/index.php?page=gallery
Dit is trouwens één van de beste gallery's die ik al ben tegengekomen! Heel slik gemaakt!

Die zie je zo vaak!

Die kan je ook ergens downloaden (tegen betaling).

[behived]

wij zijn op zoek naar eigengemaakte creaties

[Tha Narie]

Dat fotoalbum is toch ook een eigen creatie van iemand? :p:p

Dat ding moet ik dus soort van nabouwen (kreeg dat ding als voorbeeld)
Alleen is nabouwen pas leuk als je er iets aan kan verbeteren. Hetzelfde nabouwen zuigt. Dat is dan gewoon soort van jatten. Dus hopelijk kan ik er nog iets aan verbeteren ;)

[behived]

De bedoeling is vooral dat we beschikken over de action scripting, dat we onze ideeën samenbrengen om zo enkele handige, mooie en "gemakkelijk in een site te verwerken" gallery's te maken

[brossiekoppie]

goed idee!

@ Narie: die ImageVue zit best wel al goed ineen.

Misschien nog wat extra unieke overgangen.

[Ea.Z]

ja, die imageVue is wel een klasse apart
maar daar zijn ook al verschillende versies voor uitgekomen. Hiervoor zijn we aant zien om deze te kunnen krijgen en er een cfm verie voor schrijven... kunnen we de business versie praktisch gratis krijgen :D:p

[LJBass]

Ik heb ook een fotoboek gemaakt.
Hij zit in deze site die ik ook heb gemaakt: www.rsl.nl/rental

Het zijn mapjes met een naam.
Daarzin zitten de foto's en een mapje met thumbs en een tekstbestandje met het aantal foto's en de albumnaam.

[Neuro]

kheb er eigenlijk juist ook een gemaakt voor men nieuwe site(die nog niet af is)
,het is eigenlijk het portfolio gedeelte


hij laad oa een andere foto in voor een kleiner scherm en controleerd of ze nieuw zijn

als iemand geintereseerd is wil ik best wel de code posten, maar dat is nogal een chaos (en is ook nog niet helemaal in orde) :)

@behived: ik heb wel weer een hoop geleerd uit jou code, ik heb het weer iets te omslachtig aangepak. maargoed, het werkt toch ongeveer :)

edit: Eek! dit is al een oude battle, dit had ik niet gezien :S
kzal het binnekort wel in de testcase gooien :)

[Go4muze]

Jammer dat er bij de eerste post geen knoppen en preview in zit!
En hoe kan je het formaat niet op100% maar naar een andere % of vaste hoogte zetten?

[behived]

je kan beter een nieuw topic openen met je vraag met een link in naar deze topic.

[WickedMind]

Een klant wilde op z'n website ook een fotogallerij.
Appeltje, eitje dacht ik. Trek ik wel van het internet af, css aanpassen en klaar.
Dat soort dingen vallen dus altijd tegen en ben dus maar zelf aan 't werk gegaan om 't gewenste resultaat te krijgen met hulp van wat tutorials.

http://www.wicked-mind.com/photo/ = eigen versie.

Admin heeft formulier om up te loaden:
Keuze uit bestaande gallerij of nieuwe gallerij aanmaken.
Ondersteuning van JPG, GIF, PNG en ZIP

Thumbs worden aangemaakt als een gallerij geopend wordt.
Geopende foto's worden tot vaste hoogte of breedte geresized.

Het PHP werk zal ongetwijfeld schoonheidsfouten bevatten, maar het werkt voor mij naar behoren.

[Ea.Z]

ziet er goed uit WM :)

Kleine vraag: aangezien er niet veel van mijn inzending gekomen is en ik dit weekend niet zoveel werk heb:
doen we nog iets met deze battle, of vragen we behived om er een nieuwe van te maken?

[behived]

Is volgens mij geen deadline gesteld ;)
Je kan opzich altijd inzenden, je merkt vanzelf of hij 'dood' is gelopen :p

We kunnen hem misschien reanimeren :)
Ik denk nu dit topic toch terug omhoog geschopt is heeft het niet veel zin om een nieuw te beginnen.

[Ea.Z]

tof tof :)
gaan we er eens aan werken dit weekend :D

[Godfaterss]

hij is wel leuk alleen jammer dat je zo lang moet wachten todat je de volgende ziet

[ikhijroy]

De eerste code van het eerste blog. Wie kan mij vertellen hoe je de fotos in RANDOM functie kunt zetten, dus dat niet steeds foto 1 dan foto 2 komt?

Groetjes Roy

[josko]

easy....

zet je foto's in een array, en dan array_shuffle() :)

[WernerL]

Of noem alle foto's hetzelfde en zet er een cijfer achter :P foto1.gif foto2.gif en dan:

<img src="foto<?php echo rand(0,5); ?>.gif"> ofzo :D:D
Maar Josko's manier is denk ik netter maar mijne korter.

[jelmerdewilde]

Ik heb tijdje terug een heel dynamisch fotoboek gemaakt in php, zonder database.. maar als je gewoon die gegevens in een xml-etje output, kun je ze inhalen in flash.. maar kben niet zó goed met AS dat ik dat 1,2,3 even doe... maar moet niet moeilijk zijn volgens mij :)
Maar dan hoef ik iig me geen zorgen te maken over het resizen enzo, dat wordt daar al geregeld, en het CMS is 'r ook al :P (bíjna compleet)

functies daarin bijvoorbeeld:
- albums maken/deleten/renamen (deleten en renamen moet nog afgemaakt worden)
- fotos uploaden (in des betreffend album), resizen (standard breedte en hoogte), deleten (renamen misschien .. maar inprincipe niet nodig, hij leest ze sowieso uit, en zet ze dan in een array)

misschien moet ik me daar (dit in combinatie met flash) toch eens bezig gaan houden, deze php-gegevens e.d. in flash te verwerken, dan krijg je een slick album, niet zo statisch :P

[Ea.Z]

Niet zozeer zeggen wat je wilt maken, of gemaakt hebt...
Showen die handel! :D
(ik moet er ook maar eens aan beginnen :D)

[behived]

@ Eazy
heb je het nu tegen jezelf of tegen Jelmer?? :)

[Dingetje]

Oh leuk !! .. foto albums :D

http://mosredna.atspace.com/ <- wordt aangemaakt doormiddel van xml met de bestandsnaam en tags ...
http://www.ymusic.nl/koert/ <-- druk op pictures bovenin .... maakt gebruikt van php zodat ik alleen een mapje met foto op de server hoef te zetten ...

Ik wil een van de twee nog een keer af maken en er een simpelle cms bij doen ....

[Ea.Z]

@ Eazy
heb je het nu tegen jezelf of tegen Jelmer?? :)
Daarom dus dat laatste zinnetje in mijn bericht.... :D

[vincentAMS]

Heb zelf er een in een website verwerkt is niet zo heel bijzonder,maar ben ook nog beginner.
Op zich moet het een heel eenvoudige zijn werkt met xml en er zit ook nog een director bij.
De gallery heet slideshow Hier de Slideshowpagina waar ik hem heb gekocht..gekocht ja ;-0 (http://www.slideshowpro.net/)

En hier de pagina waar die in verwerkt moet worden.
De site (http://www.eatandjam.com/) op gallery klikken.

Zoals je ziet niet echt gelukt ,krijg wel de titel als je links onder de thumbsknopje aanklikt.
maar foto's laden niet.
Nu is het volgens me hostingprovider okk verouders omdat safemode uit moet staan op de server anders werkt het niet.

Maar ja vondt het zelf een leuke

[Ea.Z]

...

Dit is een 'battle' waar we proberen de mooiste, tofste, functioneelste, whatever-ste photo gallery proberen zelf te maken... ;)
dus een gallery kopen telt niet mee :p

Voor vragen of help kan je terecht in de AS fora, of in de algemene vragen.

[alain_raap]

Mijn eigen probeersel, gemaakt met XML en php. Is nog niet helemaal af en kan nog mooier/beter. Je kan er ook video opnames in kwijt (leuk voor familiealbum bijv.). Zie hier voor de gallery (http://www.designinmotion.nl/fotoalbum/)

[Ericd]

Ik heb de gallery van de topicstarter geprobeerd... Helaas loopt het bestand niet... Weet iemand hoe dit kan komen?

Ik gebruik 7 foto's met allemaal de zelfde hoogte in dezelfde map en met de goede namen.... SNAP ET NIEEE :D

[Nidd]

Die foto's van Dingetje zijn echt supermooi!

[Go4muze]

Ik moet alleen nog een preloader voor de grote foto's toevoegen..
ian (http://www.iansnieders.nl)

[Ericd]

Ik heb de gallery van de topicstarter geprobeerd... Helaas loopt het bestand niet... Weet iemand hoe dit kan komen?

Ik gebruik 7 foto's met allemaal de zelfde hoogte in dezelfde map en met de goede namen.... SNAP ET NIEEE :D
Ik zie dat er activiteit is... Kan iemand me hier mee helpen?

[behived]

ik ook nie, want bij mijn voorbeeld loopt het wel...

dit stuk zorgt voor de loop:

//functie als foto niet bestaat
myListener.onLoadError = function () {
i=1
My_mc1.loadClip("foto"+i+".jpg",container);
i++
}

[Ericd]

ik ook nie, want bij mijn voorbeeld loopt het wel...

dit stuk zorgt voor de loop:

//functie als foto niet bestaat
myListener.onLoadError = function () {
i=1
My_mc1.loadClip("foto"+i+".jpg",container);
i++
}Als ik jouw code 1on1 kopieër werkt ie wel als losse .swf.. Maar in HTML loopt hij niet.

Is er geen manier om aan te geven dat er maar X aantal foto's zijn en dat ie dan weer opnieuw moet beginnen?

[behived]

je kan altijd iets doen in deze zin:
aantalfotos=7
if(i>7){
i=1;
}


ps: Als je mijn voorbeeld aanklikt (zie eerste post in dit topic), loopt hij daar wel?

[Nidd]

Die van Go4muze ziet er ook netjes uit... Goeie navigatie..

[behived]

@ nidd

inderdaad, ook die thumbnailtjes onder de fotos om aan te duiden dat er meerdere zijn in een reeks vind ik goed gedaan. Ik zou enkel graag meer controle krijgen over de snelheid van het scrollen (misschien een schuifbalk ofzo)

[Nidd]

Schuifbalk is een optie inderdaad. Een knopje voor NOG iets sneller vooruit misschien?

[Ericd]

je kan altijd iets doen in deze zin:
aantalfotos=7
if(i>7){
i=1;
}


ps: Als je mijn voorbeeld aanklikt (zie eerste post in dit topic), loopt hij daar wel?Yep. Die op jouw pagina werkt perfect. Ik zal morgen deze aanpassing proberen :)

[Ericd]

Misschien komt het omdat ik flash 8 gebruikt? Ik heb namelijk gewoon jouw code gekopieërt en in een map met foto's gedrukt.... na alle foto's stopt de gallery abrupt.

Kun je misschien jouw .fla sturen? Of als je helemaal niets te doen hebt de swf erbij :D

462 px bij 296 px
achtergrond: #CAE8F3

Bij voorbaat dank.

[Ericd]

Sorry dat ik zeur, maar ik kan de oplossing niet vinden en heb eigenlijk wel dringend de werkende gallery nodig... Iemand? :'(

[behived]

je kan misschien proberen om je fla als flash mx 2004 te publiceren?

[Ericd]

Ik heb de fla en een voorbeeld in een zipje gestopt. HIER (http://www.contexte.nu/peetwee/foto.html) kun je zien dat de gallery niet loopt (er zijn 3 foto's)

[Motion Style]

hey,
als ik alles test offline doet alles het zoals het moet maar als ik het dan upload naar internet werkt het helemaal niet meer :s
ik hoop dat iemand mij hierbij kan helpen

hier dan ook het bestandje

http://www.tolleneer.be/j/file.rar

[Nidd]

Post het anders even in het AS forum...

[Ericd]

Mijn probleem is opgelost...
if ( i == 7 ) {
i = 1;
}

Zelfde als behived dus al zei.. Alleen had ik zijn fix niet op de goede plek gezet :')

[Motion Style]

maar het mijne nog ni :(
ik blijf het probleem hebben als ik upload naar internet dat het ineens niet meer werkt :(

[BernardV]

Je hebt toch geen verwijzigen als c:/ etc in je swf.. maar alleen relatieve paden?

[Motion Style]

helemaal niet het enige wat er eigenlijk in de fla zit in de code :(

hier is het bestandje (http://www.tolleneer.be/j/file.rar)

[Ericd]

helemaal niet het enige wat er eigenlijk in de fla zit in de code :(

hier is het bestandje (http://www.tolleneer.be/j/file.rar)Foto's de .jpg extentie geven en niet .JPG?

[d.reurings]

Ik heb ook een fotoboek gemaakt.
Hij zit in deze site die ik ook heb gemaakt: www.rsl.nl/rental

Het zijn mapjes met een naam.
Daarzin zitten de foto's en een mapje met thumbs en een tekstbestandje met het aantal foto's en de albumnaam.
we zoeken nog een expert in php/ flash. Zou je eens een kijkje kunnen nemen op http://www.drekom.nl/typo3/index.php?id=845