|
| Hjælp med opbygning af Transition Fra : Mette Abrahamsson |
Dato : 23-05-10 22:53 |
|
Jeg ville høre nogle af jer med erfaring om hjælp med at lave et
transitionscript til denne side www.acedog.dk
Pt ville det kun skulle ligge på forsiden hvor at billedet
skifter hvert X antal sekund. Noget lignende som denne side
www.irenejarnved.dk
Jeg har været på http://webdesign101.dk/showcase/adrotator/ som
er i flash men er blevet foreslået javascript istedet og ville
bede om hjælp da jeg er en del ny i dette...
På forhånd tak
Mette
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Kerim Ellentoft (23-05-2010)
| Kommentar Fra : Kerim Ellentoft |
Dato : 23-05-10 23:36 |
| | |
Rune Jensen (24-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 24-05-10 10:53 |
|
Den 24-05-2010 00:35, Kerim Ellentoft skrev:
> Mette Abrahamsson<mettesbbk@hotmail.com> skrev :
>
>> Noget lignende som denne side
>> www.irenejarnved.dk
>
> Er lavet i flash.
Det var egentlig mig, som foreslog Mette at spørge i clientside og bruge
JS i stedet for Flash. Mette har vidst Dreamveawer, ved ikke om det kan
laves med den, men jeg ville selv langt foretrække JS for Flash, da det
ikke kræver et plugin, bl.a.
Reelt er kravene jo for så vidt simple, det er en billedrotator med
transition/fade in/out og skifte af selve billedet. Det er muligt med
JS, men det er vidst ikke begynderstof at bygge fra bunden. Bl.a. vil
det så vidt jeg kan se kræve to timere.
Så måske nogle kender et færdigt script, som kan bruges..
MVH
Rune Jensen
| |
Rune Jensen (24-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 24-05-10 11:55 |
|
Den 24-05-2010 00:35, Kerim Ellentoft skrev:
> Mette Abrahamsson<mettesbbk@hotmail.com> skrev :
>> Jeg har været på http://webdesign101.dk/showcase/adrotator/ som
>> er i flash men er blevet foreslået javascript istedet og ville
>> bede om hjælp da jeg er en del ny i dette...
>
> Er lavet med javascript, hvad får dig til at tro, at der er
> Flash?
Nej, det var nok mig, som ikke citerede korrekt i en tidligere
diskussion. Jeg foreslog i første omgang Mette at bruge JFJs script til
en rotator, men jeg havde ikke overvejet, at Flash-rotaqtoren, som hun
henviste til, også har fadein/out.
Så hvis fadein/out er vigtigt for rotatoren, dur JFJs script jo ikke.
Det var derfor jeg foreslog hende så at spørge her. Fading tror jeg ikke
er noget, man skal gå i gang med som begynder, så man må kunne finde et
færdigt script. Jeg kender bare ikke noget open source, som ikke er
framework.
Men det skal Mette nok lige oplyse så, om det er vigtigt med den fading.
MVH
Rune Jensen
| |
Birger Sørensen (24-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 24-05-10 12:20 |
|
Rune Jensen sendte dette med sin computer:
> Den 24-05-2010 00:35, Kerim Ellentoft skrev:
>> Mette Abrahamsson<mettesbbk@hotmail.com> skrev :
>
>>> Jeg har været på http://webdesign101.dk/showcase/adrotator/ som
>>> er i flash men er blevet foreslået javascript istedet og ville
>>> bede om hjælp da jeg er en del ny i dette...
>>
>> Er lavet med javascript, hvad får dig til at tro, at der er
>> Flash?
>
> Nej, det var nok mig, som ikke citerede korrekt i en tidligere diskussion.
> Jeg foreslog i første omgang Mette at bruge JFJs script til en rotator, men
> jeg havde ikke overvejet, at Flash-rotaqtoren, som hun henviste til, også har
> fadein/out.
>
> Så hvis fadein/out er vigtigt for rotatoren, dur JFJs script jo ikke. Det var
> derfor jeg foreslog hende så at spørge her. Fading tror jeg ikke er noget,
> man skal gå i gang med som begynder, så man må kunne finde et færdigt script.
> Jeg kender bare ikke noget open source, som ikke er framework.
>
> Men det skal Mette nok lige oplyse så, om det er vigtigt med den fading.
>
>
> MVH
> Rune Jensen
Uden fade, er det bare at skifte src for billedelementet - og det er
simpelt i js.
Hvis png, kan man vist bruge opacity - har aldrig prøvet - men der må
så være noget med at have to <img> på samme position. Så det må blive
lidt mere kompliceret.
Det kan også gøres med CSS's clip - det har jeg leget med en gang for
længe siden - kræver så også to <img> i samme position, men er ikke så
besværligt som det lyder. Giver ikke en "rigtig" fade, men en overgang
fra eet billede til det næste. Lidt mere indviklet, men ikke mere end
det kan lade sig gøre.
Men vi er selvfølgelig nødt til at kende specifikationerne først.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Stig Johansen (24-05-2010)
| Kommentar Fra : Stig Johansen |
Dato : 24-05-10 14:31 |
|
Birger Sørensen wrote:
> Hvis png, kan man vist bruge opacity - har aldrig prøvet - men der må
> så være noget med at have to <img> på samme position. Så det må blive
> lidt mere kompliceret.
Ja (lidt(meget) mere kompliceret), for det er på den overordnede div, og
ikke img, man kan lægge opacity, og det kræver 2 stk div's med position
relative, samt underliggende position absolute, som man skifter mellem med
fade processer.
Jeg har engang strikket sådan en fadein/out process sammen, men den er nok
ikke lige til at klippe ud som en 'tutorial', og slet ikke til begyndere.
> Det kan også gøres med CSS's clip
Clip kan også bruges, men det er noget mere besvætligt, og kræver at alle
billeder er i samme størrelse (hvis det skal se nogenlunde ud).
> Men vi er selvfølgelig nødt til at kende specifikationerne først.
Præcis - hvis der kun er tale om skift af billeder, findes der nok utallige
scripts, som blot kan implementeres.
(Kvalitet/performance vil jeg ikke udtale mig om, men der er ufatteligt
meget skrammel 'out there').
--
Med venlig hilsen
Stig Johansen
| |
Birger Sørensen (24-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 24-05-10 15:42 |
|
Stig Johansen tastede følgende:
> Birger Sørensen wrote:
>
>> Hvis png, kan man vist bruge opacity - har aldrig prøvet - men der må
>> så være noget med at have to <img> på samme position. Så det må blive
>> lidt mere kompliceret.
>
> Ja (lidt(meget) mere kompliceret), for det er på den overordnede div, og
> ikke img, man kan lægge opacity, og det kræver 2 stk div's med position
> relative, samt underliggende position absolute, som man skifter mellem med
> fade processer.
>
> Jeg har engang strikket sådan en fadein/out process sammen, men den er nok
> ikke lige til at klippe ud som en 'tutorial', og slet ikke til begyndere.
>
>> Det kan også gøres med CSS's clip
>
> Clip kan også bruges, men det er noget mere besvætligt, og kræver at alle
> billeder er i samme størrelse (hvis det skal se nogenlunde ud).
>
>> Men vi er selvfølgelig nødt til at kende specifikationerne først.
>
> Præcis - hvis der kun er tale om skift af billeder, findes der nok utallige
> scripts, som blot kan implementeres.
> (Kvalitet/performance vil jeg ikke udtale mig om, men der er ufatteligt
> meget skrammel 'out there').
Opacity metoden, lider vel også en hel del under ikke at være ens for
forskellige browsere. Og vel også af, ikke at være en del af CSS2.1
Nogen speciel grund til at opacity ikke virker for billeder? Eller er
det bare sådan det er?
Jeg har hverken eksperimenteret eller forsøgt. Undrer mig bare over at
man er nødt til at bruge div'er - det er vel egentlig ret oplagt at
anvende opacity på billeder?
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Birger Sørensen (24-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 24-05-10 15:54 |
|
Stig Johansen skrev:
> Birger Sørensen wrote:
>
>> Hvis png, kan man vist bruge opacity - har aldrig prøvet - men der må
>> så være noget med at have to <img> på samme position. Så det må blive
>> lidt mere kompliceret.
>
> Ja (lidt(meget) mere kompliceret), for det er på den overordnede div, og
> ikke img, man kan lægge opacity, og det kræver 2 stk div's med position
> relative, samt underliggende position absolute, som man skifter mellem med
> fade processer.
>
> Jeg har engang strikket sådan en fadein/out process sammen, men den er nok
> ikke lige til at klippe ud som en 'tutorial', og slet ikke til begyndere.
>
>> Det kan også gøres med CSS's clip
>
> Clip kan også bruges, men det er noget mere besvætligt, og kræver at alle
> billeder er i samme størrelse (hvis det skal se nogenlunde ud).
>
>> Men vi er selvfølgelig nødt til at kende specifikationerne først.
>
> Præcis - hvis der kun er tale om skift af billeder, findes der nok utallige
> scripts, som blot kan implementeres.
> (Kvalitet/performance vil jeg ikke udtale mig om, men der er ufatteligt
> meget skrammel 'out there').
http://www.w3schools.com/Css/css_image_transparency.asp
bruger opacity på <img>, og ser ud til at virke i FF og IE8 i hvert
fald...
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (24-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 24-05-10 16:22 |
|
Den 24-05-2010 16:54, Birger Sørensen skrev:
> http://www.w3schools.com/Css/css_image_transparency.asp
> bruger opacity på <img>, og ser ud til at virke i FF og IE8 i hvert fald...
Kan man bruge opacity på baggrundsbilleder, kunne man måske fuske.. Jeg
tænker på, det er måske lettere at ændre en URL i CSS end at skifte et
IMG i HTMLen. Der er bare lige det med IE, jeg kan aldrig huske hvad den
understøtter.
MVH
Rune Jensen
| |
Rune Jensen (24-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 24-05-10 16:36 |
|
Den 24-05-2010 17:22, Rune Jensen skrev:
> Den 24-05-2010 16:54, Birger Sørensen skrev:
>
>> http://www.w3schools.com/Css/css_image_transparency.asp
>> bruger opacity på <img>, og ser ud til at virke i FF og IE8 i hvert
>> fald...
>
> Kan man bruge opacity på baggrundsbilleder, kunne man måske fuske.. Jeg
> tænker på, det er måske lettere at ændre en URL i CSS end at skifte et
> IMG i HTMLen. Der er bare lige det med IE, jeg kan aldrig huske hvad den
> understøtter.
Jeg fandt denne:
http://www.cryer.co.uk/resources/javascript/script12slideshow.htm
Men jeg ved ikke, om JSen er uptodate.
MVH
Rune Jensen
| |
Birger Sørensen (24-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 24-05-10 19:40 |
|
Stig Johansen udtrykte præcist:
> Birger Sørensen wrote:
>
>> Hvis png, kan man vist bruge opacity - har aldrig prøvet - men der må
>> så være noget med at have to <img> på samme position. Så det må blive
>> lidt mere kompliceret.
>
> Ja (lidt(meget) mere kompliceret), for det er på den overordnede div, og
> ikke img, man kan lægge opacity, og det kræver 2 stk div's med position
> relative, samt underliggende position absolute, som man skifter mellem med
> fade processer.
>
> Jeg har engang strikket sådan en fadein/out process sammen, men den er nok
> ikke lige til at klippe ud som en 'tutorial', og slet ikke til begyndere.
>
>> Det kan også gøres med CSS's clip
>
> Clip kan også bruges, men det er noget mere besvætligt, og kræver at alle
> billeder er i samme størrelse (hvis det skal se nogenlunde ud).
>
>> Men vi er selvfølgelig nødt til at kende specifikationerne først.
>
> Præcis - hvis der kun er tale om skift af billeder, findes der nok utallige
> scripts, som blot kan implementeres.
> (Kvalitet/performance vil jeg ikke udtale mig om, men der er ufatteligt
> meget skrammel 'out there').
Opacity virker fint på <img>:
http://bbsorensen.com/test/opacity/
Testet i FF og IE8.
Der skal vist mere til for at få tidligere versioner af IE med, men
burde virke i de rigtige browsere. (svjv er opacity en CSS3, og de der
har det implementeret, burde så kunne vise det, under alle
omstændigheder.)
Der er kun 2 billeder - men det burde vel være forholdsvis enkelt at
udskifte src fra et array.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Birger Sørensen (24-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 24-05-10 20:36 |
|
Birger Sørensen forklarede:
> Der er kun 2 billeder - men det burde vel være forholdsvis enkelt at udskifte
> src fra et array.
>
> Birger
Det gjorde jeg så.
Og selvom det er simpelt (bruger mangler mulighed for at afbryde og der
kunne vælges tider for hvor længe billedet vises, og hvor hurtig
transitionen tager), virker det da meget godt...
Med 54 liniers ikke optimeret kode, er der vist heller ingen grund til
at bruge framework...
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (24-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 24-05-10 21:29 |
|
Den 24-05-2010 21:36, Birger Sørensen skrev:
> Birger Sørensen forklarede:
>
>> Der er kun 2 billeder - men det burde vel være forholdsvis enkelt at
>> udskifte src fra et array.
>>
>> Birger
>
> Det gjorde jeg så.
> Og selvom det er simpelt (bruger mangler mulighed for at afbryde og der
> kunne vælges tider for hvor længe billedet vises, og hvor hurtig
> transitionen tager), virker det da meget godt...
> Med 54 liniers ikke optimeret kode, er der vist heller ingen grund til
> at bruge framework...
Det burde ikke være så svært at lave brugerstyret tid på, det er lige
før jeg tror, endda jeg kan finde ud af det.
Jeg er nok nødt til at smutte i seng nu, men jeg vil da gerne bruge lidt
tid på det i morgen.
MVH
Rune Jensen
| |
Birger Sørensen (24-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 24-05-10 23:09 |
|
Følgende er skrevet af Rune Jensen:
> Den 24-05-2010 21:36, Birger Sørensen skrev:
>> Birger Sørensen forklarede:
>>
>>> Der er kun 2 billeder - men det burde vel være forholdsvis enkelt at
>>> udskifte src fra et array.
>>>
>>> Birger
>>
>> Det gjorde jeg så.
>> Og selvom det er simpelt (bruger mangler mulighed for at afbryde og der
>> kunne vælges tider for hvor længe billedet vises, og hvor hurtig
>> transitionen tager), virker det da meget godt...
>> Med 54 liniers ikke optimeret kode, er der vist heller ingen grund til
>> at bruge framework...
>
> Det burde ikke være så svært at lave brugerstyret tid på, det er lige før jeg
> tror, endda jeg kan finde ud af det.
>
> Jeg er nok nødt til at smutte i seng nu, men jeg vil da gerne bruge lidt tid
> på det i morgen.
>
>
> MVH
> Rune Jensen
Sov godt - er selv på vej.
Hvis det skal bruges som egentlig album, er mulighed for at brugeren
kan sætte tider nok en "feature", men til andre anvendelser er det vel
ikke strengt nødvendigt. Men der skal nok være mulighed for at stoppe
fremvisningen.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Mette Abrahamsson (25-05-2010)
| Kommentar Fra : Mette Abrahamsson |
Dato : 25-05-10 14:13 |
|
Tak for alle svarende selvom jeg ikke forstod meget af dem. jeg har et program der
kan resize billeder til 4 forskellige størrelser:
Small (fits 854x480) Medium (Fits 1366x768) Large (Fits 1920x1080) Mobile device
(fits 320x480), så at få billederne til at være samme størrelse ville ikke være det
store problem, da jeg bare kan bruge det program
Jeg synes personligt at det er pænest at de overlapper hinanden, lidt som den side
Birger henviser til i et tidligere indlæg. Så det ville jeg jo selvfølgelig gerne
have, men jeg vil også meget gerne have forklaret hvordan jeg ændrer hvilke
billeder der skal køre, og hvor lang tid billedet skal vises.
Birger Sørensen wrote in dk.edb.internet.webdesign.clientside:
> Birger Sørensen forklarede:
>
> > Der er kun 2 billeder - men det burde vel være forholdsvis enkelt at udskifte
> > src fra et array.
> >
> > Birger
>
> Det gjorde jeg så.
> Og selvom det er simpelt (bruger mangler mulighed for at afbryde og der
> kunne vælges tider for hvor længe billedet vises, og hvor hurtig
> transitionen tager), virker det da meget godt...
> Med 54 liniers ikke optimeret kode, er der vist heller ingen grund til
> at bruge framework...
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Birger Sørensen (25-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 25-05-10 15:23 |
|
Den 25-05-2010, skrev Mette Abrahamsson:
> Tak for alle svarende selvom jeg ikke forstod meget af dem. jeg har et
> program der kan resize billeder til 4 forskellige størrelser:
> Small (fits 854x480) Medium (Fits 1366x768) Large (Fits 1920x1080) Mobile
> device (fits 320x480), så at få billederne til at være samme størrelse ville
> ikke være det store problem, da jeg bare kan bruge det program
>
> Jeg synes personligt at det er pænest at de overlapper hinanden, lidt som den
> side Birger henviser til i et tidligere indlæg. Så det ville jeg jo
> selvfølgelig gerne have, men jeg vil også meget gerne have forklaret hvordan
> jeg ændrer hvilke billeder der skal køre, og hvor lang tid billedet skal
> vises.
8X
Paintdotnet er et ganske udemærket gratis billedredigeringsprogram.
http://www.getpaint.net/
og det kan klippe og resize, præcis som du har brug for.
(Og har i øvrigt absolut ingenting at gør med .net - navnet til trods.
Og heller ikke med MS Paint. Faktisk er det mig en gåde, at de har
kaldt det sådan - men der er jo nok en forklaring.)
http://bbsorensen.com/test/opacity/
indeholder hele koden - både css og js. Brug Vis Kilde, og kopier de
dele du har brug for.
CSS'en skal selvfølgelig tilpasses de omgivelser du skal bruge det i.
Jeg tilføjede faktisk at der er mere end to billeder. Det eneste du
skal gøre, er at tilpasse antallet:
var imgs = new Array();
for ( var idx = 1; idx < 9; idx++) {
// =>: idx < 9 fordi mit eksempel indeholder 8 billeder.
im = new Image();
im.src = 'img'+idx+'.jpg';
imgs[ idx-1] = im;
}
Det kræver at du giver dine billeder de rigtige navn - img1.jpg er det
første. Og du skal altså ændre 9-tallet til at være een mere end det
antal billeder du har.
Det kan godt lade sig gøre med forskellige navne, også uden der er et
mønster i navnene - men så skal du angive hvert enkelt filnavn, og det
er så også nemmere at bruge en anden måde at få dem ind i arrayet på.
Det kan jeg godt forklare - hvis du har brug for det.
Resten vil selv tilpasse sig det antal du indlæser, idet det bruger
længeden af arrayet (altså antallet af billeder), til at bestemme
hvornår der skal startes forfra.
Det første i js afdelingen, er deklarering og initialisering af
variable:
var op = 0, im = null, im1 = null, im2 = null, interval = 125, disp =
3000, retning = '+', n_img = 2;
var tim = window.setTimeout( SetOp, interval);
Eftersom du ikke forstår så meget af det, skal jeg undlade en hel masse
detallier - men det er vel også meningen at du skal lære noget, så her
en kort gennemgang...
Variablen op, er et tal der angiver, hvor langt systemet er nået i et
skift. Hvis du ser i koden, kan du se, at denne værdi bliver talt enten
op eller ned. Hvis den er 0 eller 10, betyder det at et skift er
gennemført. Så længe den ikke er det, bruges en timer, med en
forsinkelse der er variablen interval. Hvis du gør interval mindre, går
skiftet hurtigere - og omvendt.
Variablen retning angiver med + eller - om op tælles op eller ned, og
den ændres tilsvarende, hver gang et skift er gennemført.
Når op bliver enten 0 eller 10, skiftes src for det billedelement der
ikke er vist, og en timer med forsinkelse disp startes. Variablen disp,
angiver altså hvor længe hvert enkelt billede vises.
Forsinkelser angives i millisekunder - hvert billede vises altså 3
sekunder (disp = 3000), før der skiftes til det næste.
Du kan så selv bestemme tiderne, ved at ændre interval og disp, til
tider der får det til at køre som du har brug for.
Håber det er forklaring nok, og svar på dine spørgsmål. Ellers spørger
du bare igen
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Stig Johansen (26-05-2010)
| Kommentar Fra : Stig Johansen |
Dato : 26-05-10 00:34 |
|
Birger Sørensen wrote:
> http://bbsorensen.com/test/opacity/
> indeholder hele koden - både css og js. Brug Vis Kilde, og kopier de
> dele du har brug for.
> CSS'en skal selvfølgelig tilpasses de omgivelser du skal bruge det i.
> Jeg tilføjede faktisk at der er mere end to billeder. Det eneste du
> skal gøre, er at tilpasse antallet:
>
> var imgs = new Array();
> for ( var idx = 1; idx < 9; idx++) {
> // =>: idx < 9 fordi mit eksempel indeholder 8 billeder.
> im = new Image();
> im.src = 'img'+idx+'.jpg';
Birger,
Nu bliver du nok pissesur på en gammel performancehaj, men det er _ikke_ den
rigtige måde at gøre det på.
Man skal ikke preloade alle billeder, men kun skifte mellem det forrige og
det nuværende, og slet ikke udtage ressoucser til 'image array'.
Sådan et 'slideshow' består at 2, og kun 2 billeder, det der bliver vist, og
det der skal vises.
Selvom det ikke er validt[1], findes der en onload på <img>, som kan bruges
til at starte timeren til næste billede.
At preloade billeder hvor det ikke er nødvendigt skuffer mig.....
[1] Man kan lave "onload='xyz'" som ikke er validt, eller man kan attache
det som en eventhandler, som ikke 'ses' af validatoren.
Men vi er nok lidt ud over 'begynderstadiet'.
--
Med venlig hilsen
Stig Johansen
| |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 03:33 |
|
Den 26-05-2010 01:33, Stig Johansen skrev:
> Man skal ikke preloade alle billeder, men kun skifte mellem det forrige og
> det nuværende, og slet ikke udtage ressoucser til 'image array'.
Det er måske fordi det så er nemmere at forstå...?
Jeg kan godt rimeligt nemt sætte mig ind i, hvordan man preloader.
> Sådan et 'slideshow' består at 2, og kun 2 billeder, det der bliver vist, og
> det der skal vises.
>
> Selvom det ikke er validt[1], findes der en onload på<img>, som kan bruges
> til at starte timeren til næste billede.
>
> At preloade billeder hvor det ikke er nødvendigt skuffer mig.....
>
> [1] Man kan lave "onload='xyz'" som ikke er validt, eller man kan attache
> det som en eventhandler, som ikke 'ses' af validatoren.
>
> Men vi er nok lidt ud over 'begynderstadiet'.
Nu har jeg lavet lidt ud fra Birgers script:
http://www.webdesigngruppen.dk
/scriptsamlng/clientside/slideshow_creator.asp
Kan man forholdsvist nemt lave det, så det bliver bedre?
MVH
Rune Jensen
| |
Birger Sørensen (26-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 26-05-10 07:32 |
|
Stig Johansen formulerede onsdag:
> Birger Sørensen wrote:
>
>> http://bbsorensen.com/test/opacity/
>> indeholder hele koden - både css og js. Brug Vis Kilde, og kopier de
>> dele du har brug for.
>> CSS'en skal selvfølgelig tilpasses de omgivelser du skal bruge det i.
>> Jeg tilføjede faktisk at der er mere end to billeder. Det eneste du
>> skal gøre, er at tilpasse antallet:
>>
>> var imgs = new Array();
>> for ( var idx = 1; idx < 9; idx++) {
>> // =>: idx < 9 fordi mit eksempel indeholder 8 billeder.
>> im = new Image();
>> im.src = 'img'+idx+'.jpg';
>
> Birger,
> Nu bliver du nok pissesur på en gammel performancehaj, men det er _ikke_ den
> rigtige måde at gøre det på.
>
> Man skal ikke preloade alle billeder, men kun skifte mellem det forrige og
> det nuværende, og slet ikke udtage ressoucser til 'image array'.
>
> Sådan et 'slideshow' består at 2, og kun 2 billeder, det der bliver vist, og
> det der skal vises.
>
> Selvom det ikke er validt[1], findes der en onload på <img>, som kan bruges
> til at starte timeren til næste billede.
>
> At preloade billeder hvor det ikke er nødvendigt skuffer mig.....
>
> [1] Man kan lave "onload='xyz'" som ikke er validt, eller man kan attache
> det som en eventhandler, som ikke 'ses' af validatoren.
>
> Men vi er nok lidt ud over 'begynderstadiet'.
Næh nej. Jeg har gjort opmærksom på, at koden ikke er optimeret.
Der er andre ting - f.eks. initialiseringen - der ikke er optimale.
Preload er vel et levn fra telefonmodemtiden. Og man kan nok nøjes med
at have sti til navnene i arrayet, i stedet for at preloade.
Det kan vel også være med til at gøre tingene en smule simplere.
Når jeg selv laver slideshow, bruger jeg faktisk onload, og ingen
overgang - altså kun eet <img>.
I og med der er overgang - og altså to <img> -, er det faktisk ikke
onload der bestemmer hvornår næste timer skal startes.
Det næste billede - det <img> der hentes nyt billede til - er ikke
synligt, og visningen skal ikke skiftes, fordi billedet er loadet, men
fordi det andet har været vist, i den tid det skal vises.
Det man kan bruge onload til, er altså at udsætte skiftet, hvis det
næste ikke er klar, når timeren siger det er tid at skifte.
Og så er vi inde i noget med at bruge flere variable, der bestemmer om
der skal skiftes eller ikke - og vist helt bestemt ude over noget
simpelt, som en begynder kan bygge videre på.
Og alternativet blev altså preload.
Det har så den fordel, at hvis et billede ikke kan findes, fortsætter
showet, hvor det vil gå i stå, hvis man anvender onload...
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 08:01 |
|
Den 26-05-2010 08:31, Birger Sørensen skrev:
> Næh nej. Jeg har gjort opmærksom på, at koden ikke er optimeret.
> Der er andre ting - f.eks. initialiseringen - der ikke er optimale.
<SNIP>
> Og så er vi inde i noget med at bruge flere variable, der bestemmer om
> der skal skiftes eller ikke - og vist helt bestemt ude over noget
> simpelt, som en begynder kan bygge videre på.
>
> Og alternativet blev altså preload.
> Det har så den fordel, at hvis et billede ikke kan findes, fortsætter
> showet, hvor det vil gå i stå, hvis man anvender onload...
Jup.
Det er også brugt nu det script ;)
Egentlig, så var det mest fordi jeg ville se, om det kunne lade sig gøre
at lave sådan en generator udfra et færdigt script. Som du selv skriver,
er det ret nemt at forstå i forvejen, så det er måske en lidt billig
baggrund.
Menaltså, jeg har haft brug for at kunne hente et billede på en anden
server, gemme det lokalt binary, og så hente dets specifikationer. Det
var den sværeste del, og helt nyt for mig, hvordan man gjorde det, og så
har jeg prøvet det nu.
Som sagt, så ved jeg ikke rigtigt hvor brugbart det er med en generator
til det, det er nok minimalt, hvor meget det letter arbejdet ift. at
skrive variablene manuelt. Og af samme grund (og fordi jeg ikke selv har
lavet scriptet) linkede jeg heller ikke direkte til det.
Hvis du kan se min IP i din LOG, er det fordi jeg har brugt din side til
at teste generatoren på.
MVH
Rune Jensen
| |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 08:35 |
|
Den 26-05-2010 09:00, Rune Jensen skrev:
> Den 26-05-2010 08:31, Birger Sørensen skrev:
>> Og alternativet blev altså preload.
>> Det har så den fordel, at hvis et billede ikke kan findes, fortsætter
>> showet, hvor det vil gå i stå, hvis man anvender onload...
>
> Jup.
>
> Det er også brugt nu det script ;)
Se, nu tænker manden jo lidt kreativtr, ikkke...
Man har en række billeder, som er fortløbende nummereret.
Hvis nu man i JSen laver en HEAD, for at se, om det næste billede
eksisterer, inden det loades, så kan man tjekke af den vej, hvornår der
skal skiftes til billede 1 igen. Så behøver man ikke angive antallet af
billeder - hvis ellers preload ikke er nødvendigt.
PS. Jeg er ikke sikker på, hvad du mener med dette:
"
i js'en skal antallet af billeder bruges i for ved preload.
Preload er ikke nødvendigt - man kan nøjes med filnavnene.
if ( retning == '+') {
op += 1;
retning = ( op > 10) ? '-' : '+';
(op > 9) skal kunne gøre det..
"
Jeg kan forstå, preload er ikke nødvendigt, men hvor skal citerede kode
sættes ind?
Og hvor tjekkes iøvrigt for, hvornår man skal skifte igen til billede 1?
MVH
Rune Jensen
| |
Birger Sørensen (26-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 26-05-10 09:01 |
|
Følgende er skrevet af Rune Jensen:
> Den 26-05-2010 09:00, Rune Jensen skrev:
>> Den 26-05-2010 08:31, Birger Sørensen skrev:
>
>>> Og alternativet blev altså preload.
>>> Det har så den fordel, at hvis et billede ikke kan findes, fortsætter
>>> showet, hvor det vil gå i stå, hvis man anvender onload...
>>
>> Jup.
>>
>> Det er også brugt nu det script ;)
>
> Se, nu tænker manden jo lidt kreativtr, ikkke...
>
> Man har en række billeder, som er fortløbende nummereret.
>
> Hvis nu man i JSen laver en HEAD, for at se, om det næste billede eksisterer,
> inden det loades, så kan man tjekke af den vej, hvornår der skal skiftes til
> billede 1 igen. Så behøver man ikke angive antallet af billeder - hvis ellers
> preload ikke er nødvendigt.
>
> PS. Jeg er ikke sikker på, hvad du mener med dette:
>
> "
> i js'en skal antallet af billeder bruges i for ved preload.
> Preload er ikke nødvendigt - man kan nøjes med filnavnene.
>
> if ( retning == '+') {
> op += 1;
> retning = ( op > 10) ? '-' : '+';
>
> (op > 9) skal kunne gøre det..
> "
>
> Jeg kan forstå, preload er ikke nødvendigt, men hvor skal citerede kode
> sættes ind?
>
> Og hvor tjekkes iøvrigt for, hvornår man skal skifte igen til billede 1?
>
>
> MVH
> Rune Jensen
Vi er clientside. Du vil checke med en ajax eller tilsvarende, for at
se om det næste billede i rækken eksisterer?
De gange jeg har programmeret slideshows, har jeg gjort det i PHP. Der
kan man lave en liste af eksisterende filnavne, som så lægges i js'en
der sendes til browseren. Det er rimelig enkelt - men kan jo altså også
kun gøres serverside...
Det jeg mente med min kommentar, var for den kode du viser. Hvis
brugeren vælger 3 billeder, nytter det ikke meget at hente 8 ind. Så
tallet i for løkken skal ændres til antal+1 for billeder. I linien
for ( var idx = 1; idx < X; idx++) { // skal X være antal+1
Blænderutinen skal tælle fra 0 til 10 og ned igen ved næste skift.
Du har (op > 10) - hvilket vil få den til at tælle fra 0 til 11.
Det gør nok ikke den store forskel, men sætter i princippet ulovlige
værdier for opacity. (1.1 for FF, 110 for IE)
Scriptet bruger variablen n_img til at vide hvilket index i arrayet,
der er det næste der skal vises. Linien
n_img = ( n_img < imgs.length-1) ? n_img+1 : 0;
tæller indexet en op, eller starter forfra, når længden af arrayet
overskrides.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 09:17 |
|
Den 26-05-2010 10:00, Birger Sørensen skrev:
> Følgende er skrevet af Rune Jensen:
>> Den 26-05-2010 09:00, Rune Jensen skrev:
>>> Den 26-05-2010 08:31, Birger Sørensen skrev:
>>
>>>> Og alternativet blev altså preload.
>>>> Det har så den fordel, at hvis et billede ikke kan findes, fortsætter
>>>> showet, hvor det vil gå i stå, hvis man anvender onload...
>>>
>>> Jup.
>>>
>>> Det er også brugt nu det script ;)
>>
>> Se, nu tænker manden jo lidt kreativtr, ikkke...
>>
>> Man har en række billeder, som er fortløbende nummereret.
>>
>> Hvis nu man i JSen laver en HEAD, for at se, om det næste billede
>> eksisterer, inden det loades, så kan man tjekke af den vej, hvornår
>> der skal skiftes til billede 1 igen. Så behøver man ikke angive
>> antallet af billeder - hvis ellers preload ikke er nødvendigt.
>>
>> PS. Jeg er ikke sikker på, hvad du mener med dette:
>>
>> "
>> i js'en skal antallet af billeder bruges i for ved preload.
>> Preload er ikke nødvendigt - man kan nøjes med filnavnene.
>>
>> if ( retning == '+') {
>> op += 1;
>> retning = ( op > 10) ? '-' : '+';
>>
>> (op > 9) skal kunne gøre det..
>> "
>>
>> Jeg kan forstå, preload er ikke nødvendigt, men hvor skal citerede
>> kode sættes ind?
>>
>> Og hvor tjekkes iøvrigt for, hvornår man skal skifte igen til billede 1?
>>
>>
>> MVH
>> Rune Jensen
>
> Vi er clientside. Du vil checke med en ajax eller tilsvarende, for at se
> om det næste billede i rækken eksisterer?
Æh, tjoh...
Tænkte bare, der ikke var så stor forskel ;)
> De gange jeg har programmeret slideshows, har jeg gjort det i PHP. Der
> kan man lave en liste af eksisterende filnavne, som så lægges i js'en
> der sendes til browseren. Det er rimelig enkelt - men kan jo altså også
> kun gøres serverside...
Jeg kan lave en afkrydsning, som hedder "Automatisk", så finder den selv
ud af det - men... Hvis der er mange billeder, skal hvert enkelt billede
hentes ned fra ekstern server, hvilket er ren ventetid, og så kan det
være hurtigere lige at tælle, hvor mange der er manuelt, og så taste det
ind. Men OK, jeg gør forsøget, så får jeg også prøvet det.
> Det jeg mente med min kommentar, var for den kode du viser. Hvis
> brugeren vælger 3 billeder, nytter det ikke meget at hente 8 ind. Så
> tallet i for løkken skal ændres til antal+1 for billeder. I linien
> for ( var idx = 1; idx < X; idx++) { // skal X være antal+1
Den er fixet (tror jeg?), der bruges nu antallet af billeder til det.
Det skal tastes i formen (som det er nu).
> Blænderutinen skal tælle fra 0 til 10 og ned igen ved næste skift.
> Du har (op > 10) - hvilket vil få den til at tælle fra 0 til 11.
> Det gør nok ikke den store forskel, men sætter i princippet ulovlige
> værdier for opacity. (1.1 for FF, 110 for IE)
Det fixer jeg. Den havde lidt problemer med at vise det i starten,
hakkede så det var en lyst, det er nok årsagen. Hvorfor den så pludselig
virker uden rettelse, ved jeg ikke, men jeg retter ned til 9.
> Scriptet bruger variablen n_img til at vide hvilket index i arrayet, der
> er det næste der skal vises. Linien
> n_img = ( n_img < imgs.length-1) ? n_img+1 : 0;
> tæller indexet en op, eller starter forfra, når længden af arrayet
> overskrides.
Ah... så du tester på længden af arrayet. OK.
MVH
Rune Jensen
| |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 09:19 |
|
Den 26-05-2010 10:17, Rune Jensen skrev:
> Jeg kan lave en afkrydsning, som hedder "Automatisk", så finder den selv
> ud af det - men... Hvis der er mange billeder, skal hvert enkelt billede
> hentes ned fra ekstern server, hvilket er ren ventetid, og så kan det
> være hurtigere lige at tælle, hvor mange der er manuelt, og så taste det
> ind. Men OK, jeg gør forsøget, så får jeg også prøvet det.
Nah... man kan vel stadig lave en head, selv om det er serverside?
Så skal kun første billede hentes.
MVH
Rune Jensen
| |
Birger Sørensen (26-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 26-05-10 10:08 |
|
Rune Jensen kom med denne ide:
> Den 26-05-2010 10:17, Rune Jensen skrev:
>
>> Jeg kan lave en afkrydsning, som hedder "Automatisk", så finder den selv
>> ud af det - men... Hvis der er mange billeder, skal hvert enkelt billede
>> hentes ned fra ekstern server, hvilket er ren ventetid, og så kan det
>> være hurtigere lige at tælle, hvor mange der er manuelt, og så taste det
>> ind. Men OK, jeg gør forsøget, så får jeg også prøvet det.
>
> Nah... man kan vel stadig lave en head, selv om det er serverside?
>
> Så skal kun første billede hentes.
>
>
> MVH
> Rune Jensen
Jeg er ikke med på, hvad du mener med "en head"..
Jeg har så "leget" lidt, med følgende ændringer:
Billeder hentes fra en anden folder.
Der er ingen preload.
Initialisering med unobtrusive event.
Det første billede vises også første gang.
Kommenteret så det skulle være mere klart hvad der foregår.
Billedserie viser nu en solnedgang i Venice, Florida, ud over Den
Mexicanske Golf, på en stille dag. (Og jeg havde ikke noget stativ, så
man kan godt blive søsyg. :/)
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 10:26 |
|
Den 26-05-2010 11:08, Birger Sørensen skrev:
> Jeg er ikke med på, hvad du mener med "en head"..
En head henter kun header. Hvis der er en header, må der også være et
billede (body). Men body har jeg ikke behov for at hente bare for at
vide, om filen eksisterer.
Sådan forstår jeg det i hvert fald...?
Koden til check via method HEAD er ASP, men forholdsvist kort:
Function CheckURL(vURL)
'On Error Resume Next
Dim xhr
Set xhr = CreateObject("MSXML2.ServerXMLHTTP.3.0")
xhr.Open "HEAD", vURL, false
xhr.Send
CheckURL = xhr.status
set xhr=nothing
End Function
Jeg looper den bare igennem fra billede 1 indtil der kommer en
fejlmeddelelse, så har jeg antal billeder. Virker ikke helt endnu, så
godt nok. Håber da, jeg er på rette spor ;)
> Jeg har så "leget" lidt, med følgende ændringer:
> Billeder hentes fra en anden folder.
> Der er ingen preload.
> Initialisering med unobtrusive event.
> Det første billede vises også første gang.
> Kommenteret så det skulle være mere klart hvad der foregår.
>
> Billedserie viser nu en solnedgang i Venice, Florida, ud over Den
> Mexicanske Golf, på en stille dag. (Og jeg havde ikke noget stativ, så
> man kan godt blive søsyg. :/)
Jeg kigger på det...
Og tak for det Birger, det er sgu meget sjovt at lege med IRL.
MVH
Rune jensen
| |
Birger Sørensen (26-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 26-05-10 10:48 |
|
Rune Jensen skrev:
> Den 26-05-2010 11:08, Birger Sørensen skrev:
>
>> Jeg er ikke med på, hvad du mener med "en head"..
>
> En head henter kun header. Hvis der er en header, må der også være et billede
> (body). Men body har jeg ikke behov for at hente bare for at vide, om filen
> eksisterer.
>
> Sådan forstår jeg det i hvert fald...?
>
> Koden til check via method HEAD er ASP, men forholdsvist kort:
>
> Function CheckURL(vURL)
> 'On Error Resume Next
> Dim xhr
> Set xhr = CreateObject("MSXML2.ServerXMLHTTP.3.0")
> xhr.Open "HEAD", vURL, false
> xhr.Send
> CheckURL = xhr.status
> set xhr=nothing
> End Function
>
> Jeg looper den bare igennem fra billede 1 indtil der kommer en
> fejlmeddelelse, så har jeg antal billeder. Virker ikke helt endnu, så godt
> nok. Håber da, jeg er på rette spor ;)
OK. Jeg troede du var i JS.
Bruger du noget tilsvarende, til at hente billedinformationer? Jeg
kender ikke ASP godt. Men umiddelbart skal CSS'en også ændret så div'en
om billederne passer til billed størrelsen.
Og lige nu, er der lidt problemer med antallet på din side, hvis man
nummererer sine billeder med lige mange cifre, som en serie f.eks. fra
img01.jpg ... img 15.jpg, bliver de sidste 6 ( 10-15) ikke vist.
8X
> Jeg kigger på det...
>
> Og tak for det Birger, det er sgu meget sjovt at lege med IRL.
YW
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 11:06 |
|
Den 26-05-2010 11:48, Birger Sørensen skrev:
> OK. Jeg troede du var i JS.
I og for sig kunne man vel godt smække det loop i en serverside og så
kalde den med JS. Det ville give til brugervenligheden
> Bruger du noget tilsvarende, til at hente billedinformationer?
Jeg overvejede det lige. For nu henter jeg hele billedet for derefter at
finde højde/bredde.
Men de informationer må vel stå i header, jeg ved så bare ikke, om det
der object, jeg bruger så stadig kan finde de oplysninger.
Jeg bruger en slags plug in til at finde højde/bredde.
> Jeg
> kender ikke ASP godt. Men umiddelbart skal CSS'en også ændret så div'en
> om billederne passer til billed størrelsen.
Ja, jeg har lagt ind, så man kan ændre rammebredden. Jeg har også
forbedret CSSen.
> Og lige nu, er der lidt problemer med antallet på din side, hvis man
> nummererer sine billeder med lige mange cifre, som en serie f.eks. fra
> img01.jpg ... img 15.jpg, bliver de sidste 6 ( 10-15) ikke vist.
Nej, for denne vil kigge efter ét tal, ikke to. Her må man nok blive
enig med sig selv om, om der skal en "placeholder" zero på eller ej som
udgangspunkt. Jeg kan selvfølgelig lide efter det nul med en instr, hvis
det er. Det er værd at forsøge. Selve udregningen skal så også bare
udbygges lidt, så man tager højde for om der er eller ikke er
foranstillet nul.
Det initielle billede ledes efter et 1-tal som udgangsopunkt. Så kan man
arbejde sig bagud, og se, om der er placeholders. Måske.
MVH
Rune Jensen
| |
Birger Sørensen (26-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 26-05-10 11:15 |
|
Rune Jensen har bragt dette til os:
> Den 26-05-2010 11:48, Birger Sørensen skrev:
>
>> OK. Jeg troede du var i JS.
>
> I og for sig kunne man vel godt smække det loop i en serverside og så kalde
> den med JS. Det ville give til brugervenligheden
>
>> Bruger du noget tilsvarende, til at hente billedinformationer?
>
> Jeg overvejede det lige. For nu henter jeg hele billedet for derefter at
> finde højde/bredde.
>
> Men de informationer må vel stå i header, jeg ved så bare ikke, om det der
> object, jeg bruger så stadig kan finde de oplysninger.
>
> Jeg bruger en slags plug in til at finde højde/bredde.
>
> > Jeg
>> kender ikke ASP godt. Men umiddelbart skal CSS'en også ændret så div'en
>> om billederne passer til billed størrelsen.
>
> Ja, jeg har lagt ind, så man kan ændre rammebredden. Jeg har også forbedret
> CSSen.
>
>> Og lige nu, er der lidt problemer med antallet på din side, hvis man
>> nummererer sine billeder med lige mange cifre, som en serie f.eks. fra
>> img01.jpg ... img 15.jpg, bliver de sidste 6 ( 10-15) ikke vist.
>
> Nej, for denne vil kigge efter ét tal, ikke to. Her må man nok blive enig med
> sig selv om, om der skal en "placeholder" zero på eller ej som udgangspunkt.
> Jeg kan selvfølgelig lide efter det nul med en instr, hvis det er. Det er
> værd at forsøge. Selve udregningen skal så også bare udbygges lidt, så man
> tager højde for om der er eller ikke er foranstillet nul.
>
> Det initielle billede ledes efter et 1-tal som udgangsopunkt. Så kan man
> arbejde sig bagud, og se, om der er placeholders. Måske.
>
>
> MVH
> Rune Jensen
Jeg kender ikke ASP.
I PHP kan man hente billedets dimensioner ud af filen, uden at skulle
læse hele filen.
Så mon ikke det kan gøres i ASP også.
Når du så laver din "header", kan den vel returnere størrelsen, når
billedet findes..
Ligner en rigtig løsning på foranstillede 0'er.
Du behøver vel kun gøre det på den første, så kender du antallet af
cifre, og kan adapte tilsvarende.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 10:59 |
|
Den 26-05-2010 11:25, Rune Jensen skrev:
> Den 26-05-2010 11:08, Birger Sørensen skrev:
>
>> Jeg er ikke med på, hvad du mener med "en head"..
>
> En head henter kun header. Hvis der er en header, må der også være et
> billede (body). Men body har jeg ikke behov for at hente bare for at
> vide, om filen eksisterer.
>
> Sådan forstår jeg det i hvert fald...?
>
> Koden til check via method HEAD er ASP, men forholdsvist kort:
>
> Function CheckURL(vURL)
> 'On Error Resume Next
> Dim xhr
> Set xhr = CreateObject("MSXML2.ServerXMLHTTP.3.0")
> xhr.Open "HEAD", vURL, false
> xhr.Send
> CheckURL = xhr.status
> set xhr=nothing
> End Function
>
> Jeg looper den bare igennem fra billede 1 indtil der kommer en
> fejlmeddelelse, så har jeg antal billeder. Virker ikke helt endnu, så
> godt nok. Håber da, jeg er på rette spor ;)
Jo, nu virker det, lader det til.
Hvis jeg skriver absolut sti som:
http://bbsorensen.com/test/opacity/img1. jpg
så påstår den, hvis jeg trykker find automatisk, at du har otte billeder.
Der skal muligvis laves noget ekstra kode-halløj ved overgangen fra 9
til 10, kan se, du har 0 foran et af billederne. Det vil denne nok
opfatte som 010. Tror jeg. Men jeg kan fuske lidt.
(og så havde jeg lige nedetid fra nettet på 8 et halvt minut??? Så lang
tid har det da ikke varet før ;) )
MVH
Rune Jensen
| |
Birger Sørensen (26-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 26-05-10 11:03 |
| | |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 11:10 |
|
Den 26-05-2010 12:02, Birger Sørensen skrev:
> Den 26-05-2010, skrev Rune Jensen:
> 8X
>> Jo, nu virker det, lader det til.
>>
>> Hvis jeg skriver absolut sti som:
>> http://bbsorensen.com/test/opacity/img1. jpg
>>
>> så påstår den, hvis jeg trykker find automatisk, at du har otte billeder.
> 8X
>
> Det ligner et meget kvalificeret gæt Der er otte jpg filer i den
> folder.
Lyder godt ;)
Det burde virke med gif og PNG også nu.
Jeg kigger på det med placeholders.
MVH
Rune Jensen
| |
Birger Sørensen (26-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 26-05-10 11:09 |
|
Rune Jensen udtrykte præcist:
> Hvis jeg skriver absolut sti som:
> http://bbsorensen.com/test/opacity/img1. jpg
>
> så påstår den, hvis jeg trykker find automatisk, at du har otte billeder.
>
> Der skal muligvis laves noget ekstra kode-halløj ved overgangen fra 9 til 10,
> kan se, du har 0 foran et af billederne. Det vil denne nok opfatte som 010.
> Tror jeg. Men jeg kan fuske lidt.
>
> (og så havde jeg lige nedetid fra nettet på 8 et halvt minut??? Så lang tid
> har det da ikke varet før ;) )
>
>
> MVH
> Rune Jensen
Prøvede med
http://bbsorensen.com/test/opacity/sunset/sunset01. jpg
- og den siger 9, men der er 13. Det er nummerering, der kikser.
Kan ikke umiddelbart se en løsning på den. Man kan jo nummerere med op
til mange cifre, og med eller uden 0'erne. Og den er nok ikke lige til
at kode sig ud af - med mindre man spørger brugeren, som må formodes at
vide det.
Men det er da et mindre problem, og det ser ud til at virke.
Har ikke prøvet med billeder i andre størrelser - om CSS'en tilpasses.
(Rammestørrelsen bruges ikke - der er 1px, uanset hvad man beder om)
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 11:13 |
|
Den 26-05-2010 12:08, Birger Sørensen skrev:
> Men det er da et mindre problem, og det ser ud til at virke.
Jeg tænker.
> Har ikke prøvet med billeder i andre størrelser - om CSS'en tilpasses.
> (Rammestørrelsen bruges ikke - der er 1px, uanset hvad man beder om)
Ah, så er "noget" gået galt. Det virkede lige før...
MVH
Rune Jensen
| |
Birger Sørensen (26-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 26-05-10 11:21 |
|
Rune Jensen forklarede:
> Den 26-05-2010 12:08, Birger Sørensen skrev:
>
>> Men det er da et mindre problem, og det ser ud til at virke.
>
> Jeg tænker.
>
>> Har ikke prøvet med billeder i andre størrelser - om CSS'en tilpasses.
>> (Rammestørrelsen bruges ikke - der er 1px, uanset hvad man beder om)
>
> Ah, så er "noget" gået galt. Det virkede lige før...
>
>
> MVH
> Rune Jensen
Ja det ser ikke rigtigt ud her.
Sådan som CSS'en er sat sammen, er div'en 22 større end billederne, der
er placeret i 10, 10 inde i dem (22, fordi billederne også har en
border - jeg har en rød og en blå, og det var egentlig for at kunne se
hvilket af de der lige nu blev vist) - og det giver så div'ens baggrund
synlig i 10px hele vejen rundt om billedet.
Det har jeg også på din side, og både div og billeder har 1px border.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (26-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 26-05-10 11:34 |
|
Den 26-05-2010 12:21, Birger Sørensen skrev:
> Ja det ser ikke rigtigt ud her.
> Sådan som CSS'en er sat sammen, er div'en 22 større end billederne, der
> er placeret i 10, 10 inde i dem (22, fordi billederne også har en border
> - jeg har en rød og en blå, og det var egentlig for at kunne se hvilket
> af de der lige nu blev vist) - og det giver så div'ens baggrund synlig i
> 10px hele vejen rundt om billedet.
>
> Det har jeg også på din side, og både div og billeder har 1px border.
Hvilken browser?
Jeg har genindsat den røde og blå border, og der lader ikke til at være
fejl i Opera og FF.
Er det en anden URL som valg til førstebillede end den, som kommer op,
når man henter siden almindeligt?
MVH
Rune Jensen
| |
Birger Sørensen (26-05-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 26-05-10 14:47 |
|
Den 26-05-2010, skrev Rune Jensen:
> Den 26-05-2010 12:21, Birger Sørensen skrev:
>
>> Ja det ser ikke rigtigt ud her.
>> Sådan som CSS'en er sat sammen, er div'en 22 større end billederne, der
>> er placeret i 10, 10 inde i dem (22, fordi billederne også har en border
>> - jeg har en rød og en blå, og det var egentlig for at kunne se hvilket
>> af de der lige nu blev vist) - og det giver så div'ens baggrund synlig i
>> 10px hele vejen rundt om billedet.
>>
>> Det har jeg også på din side, og både div og billeder har 1px border.
>
> Hvilken browser?
> Jeg har genindsat den røde og blå border, og der lader ikke til at være fejl
> i Opera og FF.
>
> Er det en anden URL som valg til førstebillede end den, som kommer op, når
> man henter siden almindeligt?
>
>
> MVH
> Rune Jensen
FF 3.6.3
Det er det link du gav tidligere - kan ikke komme til siden fra
/scriptsamling. Der findes kun "Ikke orettet", ud over
Tabelsortering...
Rammerne på <img> er nu rød/blå - men ingen af dem er 5px, og afstanden
mellem img og div border, stadig 10px.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Jørgen Farum Jensen (26-05-2010)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 26-05-10 13:02 |
|
Mette Abrahamsson skrev:
> Tak for alle svarende selvom jeg ikke forstod meget af dem. jeg har et program der
> kan resize billeder til 4 forskellige størrelser:
> Small (fits 854x480) Medium (Fits 1366x768) Large (Fits 1920x1080) Mobile device
> (fits 320x480), så at få billederne til at være samme størrelse ville ikke være det
> store problem, da jeg bare kan bruge det program
Det er ikke tilstrækkeligt. Det billede du nu
har til venstre på din side er 226 * 250 pixel.
Vil du have et diasshow i stedet for et fast
billede, skal de øvrige billeder have samme
størrelse, og du er nødt til at croppe/resize
dine øvrige billeder til det samme.
(Forskellig billedstørrelser kan godt lade
sig gøre, men det er teknisk en smule vanske-
ligere og virker visuelt også meget forvirrende
på beskueren).
Download og installer dog Paintnet som Rune
foreslå, det er et fortrinligt program til den
slags operationer.
> Jeg synes personligt at det er pænest at de overlapper hinanden, lidt som den side
> Birger henviser til i et tidligere indlæg. Så det ville jeg jo selvfølgelig gerne
> have, men jeg vil også meget gerne have forklaret hvordan jeg ændrer hvilke
> billeder der skal køre, og hvor lang tid billedet skal vises.
Den bedste måde at fortære en hel ko på er
at spise én bøf ad gangen. Det nytter jo
ikke noget at kopiere det ene eller det andet
script, hvis du ikke har den mindste idé
om hvordan det fungerer. Jeg vil ubeskedent
sige, at min artikel
http://webdesign101.dk/showcase/adrotator/
forklarer alle ting omkring et autostartende
billedshow, men det kræver altså at
man læser artiklen og forholder sig konkret
til det man ikke forstår.
Transition effekter er Eye Candy, som
du kan tilføje når du i øvrigt har
bragt din side i orden og fået et
banalt slideshow til at køre.
Du lærer forhåbentlig af det hele,
hvis du nøjes med ét skridt ad gangen.
> Birger Sørensen wrote in dk.edb.internet.webdesign.clientside:
>> Birger Sørensen forklarede:
>>
>>> Der er kun 2 billeder - men det burde vel være forholdsvis enkelt at udskifte
>>> src fra et array.
Al respekt, Rune, Birger og Stig, men jeg
synes i er lidt langt fremme i skoene i
forhold til en åbenbar novice.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Mette Abrahamsson (27-05-2010)
| Kommentar Fra : Mette Abrahamsson |
Dato : 27-05-10 20:38 |
|
Jeg vil læse lidt på det og håbe jeg forstår størstedelen :)
Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.clientside:
> Mette Abrahamsson skrev:
> > Tak for alle svarende selvom jeg ikke forstod meget af dem. jeg har et program der
> > kan resize billeder til 4 forskellige størrelser:
> > Small (fits 854x480) Medium (Fits 1366x768) Large (Fits 1920x1080) Mobile device
> > (fits 320x480), så at få billederne til at være samme størrelse ville ikke være det
> > store problem, da jeg bare kan bruge det program
>
> Det er ikke tilstrækkeligt. Det billede du nu
> har til venstre på din side er 226 * 250 pixel.
> Vil du have et diasshow i stedet for et fast
> billede, skal de øvrige billeder have samme
> størrelse, og du er nødt til at croppe/resize
> dine øvrige billeder til det samme.
>
> (Forskellig billedstørrelser kan godt lade
> sig gøre, men det er teknisk en smule vanske-
> ligere og virker visuelt også meget forvirrende
> på beskueren).
>
> Download og installer dog Paintnet som Rune
> foreslå, det er et fortrinligt program til den
> slags operationer.
>
>
> > Jeg synes personligt at det er pænest at de overlapper hinanden, lidt som den side
> > Birger henviser til i et tidligere indlæg. Så det ville jeg jo selvfølgelig gerne
> > have, men jeg vil også meget gerne have forklaret hvordan jeg ændrer hvilke
> > billeder der skal køre, og hvor lang tid billedet skal vises.
>
> Den bedste måde at fortære en hel ko på er
> at spise én bøf ad gangen. Det nytter jo
> ikke noget at kopiere det ene eller det andet
> script, hvis du ikke har den mindste idé
> om hvordan det fungerer. Jeg vil ubeskedent
> sige, at min artikel
> http://webdesign101.dk/showcase/adrotator/
> forklarer alle ting omkring et autostartende
> billedshow, men det kræver altså at
> man læser artiklen og forholder sig konkret
> til det man ikke forstår.
>
> Transition effekter er Eye Candy, som
> du kan tilføje når du i øvrigt har
> bragt din side i orden og fået et
> banalt slideshow til at køre.
> Du lærer forhåbentlig af det hele,
> hvis du nøjes med ét skridt ad gangen.
>
> > Birger Sørensen wrote in dk.edb.internet.webdesign.clientside:
> >> Birger Sørensen forklarede:
> >>
> >>> Der er kun 2 billeder - men det burde vel være forholdsvis enkelt at udskifte
> >>> src fra et array.
>
> Al respekt, Rune, Birger og Stig, men jeg
> synes i er lidt langt fremme i skoene i
> forhold til en åbenbar novice.
>
> --
>
> Med venlig hilsen
> Jørgen Farum Jensen
> Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
> Webdesign med stylesheets: http://webdesign101.dk/cssbog/
> ..
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Rune Jensen (27-05-2010)
| Kommentar Fra : Rune Jensen |
Dato : 27-05-10 22:23 |
|
Den 27-05-2010 21:38, Mette Abrahamsson skrev:
> Jeg vil læse lidt på det og håbe jeg forstår størstedelen :)
Du må undskylde, Mette hvis det flød lidt ud i nørdsnak, det var nok min
skyld..
Men stil endelig spørgsmål igen, hvis det er. Jeg skal ikke blande mig
mere her, da det egentlig ikke er mit område (jeg er ikke
javascript-ekspert) - jeg lod mig bare rive med ;) Jeg er ikke ude på at
forvirre debatten og gøre det vanskeligere for dig.
Ellers, så følg de råd, som folk giver her, så lærer du rigtigt meget.
Når der så er noget, du ikke forstår, så spør igen.
MVH
Rune Jensen
| |
Stig Johansen (25-05-2010)
| Kommentar Fra : Stig Johansen |
Dato : 25-05-10 01:59 |
|
Birger Sørensen wrote:
> Opacity virker fint på <img>:
Det var ikke min mening at antyde, at det ikke virker på <img>.
Mit galleri har både overkrifter og tekster, så hvis disse skal fades
ind/ud, er det på den overordnede div.
Det var bare det jeg mente med 'div' en.
> http://bbsorensen.com/test/opacity/
> Testet i FF og IE8.
> Der skal vist mere til for at få tidligere versioner af IE med,
Miit virker også i IE6, hvor det hedder noget med filters.alpha.opacity og
angives i %'er.
Jeg har noget bøvl med min winPC, så jeg kan ikke klippe/klistre noget kode.
--
Med venlig hilsen
Stig Johansen
| |
|
|