/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  e.c 1150
10  miritdk 1110
Galleri der driller meget
Fra : christina3018

Dato : 14-02-07 19:17
Hejsa

Jeg er ved at lave et galleri til min hjemmeside. Og vil gerne
lave den på følgende måde (se kode). Problemet er at lige så
snart det bliver lodret aflange billeder passer de ikke ind der
hvor billederne skal vises.

Hvordan laver jeg bedst sådan et galleri ala det der så det
fungerer med visningen.

Jeg kan ikke lægge siden ud på nettet endnu, beklager..
Men det kan ses på http://home20.inet.tele.dk/ruhaar/ Det er den
måde jeg ønsker det skal fungere på - jeg vil bare gerne have
vist de små thumps hele tiden under det store billede..

Men kan ikke helt få det til at virke når jeg prøver :(

Ind til vidre ser det sådan ud:
<html>
<link rel="stylesheet" type="text/css" href="../css/layout.css">
<link rel="stylesheet" type="text/css"
href="../css/bg_til_indhold.css">

<h2 align="center">Galleri</h2>
<p align="center">&nbsp;</p>
<div align="center">
<table width="435" border="1" align="center"
bordercolor="#000000">
<tr align="center" valign="middle">
<td colspan="3"><iframe name="picmain"
src="pics/langh_standforfasan.jpg" scrolling="no" frameborder="1"
width="435" height="300"></iframe>
</iframe></td>
</tr>
<tr>
<td bgcolor="#000000"><div align="left"><img
src="../img/arrow_prev.gif" width="13" height="17"></div></td>
<td bgcolor="#000000"><div align="center"><img
src="../img/home.gif" width="23" height="22"></div></td>
<td bgcolor="#000000"><div align="right"><img
src="../img/arrow_next.gif" width="13" height="17"></div></td>
</tr>
</table>
</div>
<p align="center">&nbsp;</p>
<div align="center">
<table width="435" border="1" align="center"
bordercolor="#000000">
<tr>
<td><div align="center"><a
href="pics/Langh_standforfasan.jpg" target="picmain"><img
src="pics/Langh_standforfasan.jpg" width="80" height="60"
border="0"></a></div></td>
<td><div align="center"><a
href="pics/Langh_standforhare.jpg" target="picmain"><img
src="pics/Langh_standforhare.jpg" width="80" height="60"
border="0"></a></div></td>
<td><div align="center"><a
href="pics/Langh_standogsekundering.jpg" target="picmain"><img
src="pics/Langh_standogsekundering.jpg" width="80" height="60"
border="0"></a></div></td>
<td><div align="center"><a href="pics/Langh_brun.jpg"
target="picmain"><img src="pics/Langh_brun.jpg" width="80"
height="60" border="0"></a></div></td>

</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</html>

--
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

 
 
Bertel Lund Hansen (14-02-2007)
Kommentar
Fra : Bertel Lund Hansen

Dato : 14-02-07 19:33
christina3018 skrev:

> Hvordan laver jeg bedst sådan et galleri ala det der så det
> fungerer med visningen.

Jeg lægger hvert billede i en div som jeg giver en fast størrelse
der er stor nok til det største billede, og så floater jeg
div'erne til venstre.

> Jeg kan ikke lægge siden ud på nettet endnu, beklager..
> Men det kan ses på http://home20.inet.tele.dk/ruhaar/

Jeg kan ikke se noget på de sider der svarer til din beskrivelse,
men det er en dårlig model. Koden er fyldt med fejl.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

Eshadon (14-02-2007)
Kommentar
Fra : Eshadon

Dato : 14-02-07 21:00
christina3018 wrote in dk.edb.internet.webdesign.html:

> Hvordan laver jeg bedst sådan et galleri ala det der så det
> fungerer med visningen.

Hej Christina. Jeg er ikke verdensmester, men har da et par tips.
Foerst og fremmest tror jeg du vil faa glaede af at bruge mere css
end tables til at lave dit layout. Tables giver hovedpine.
Derudover burde du lave rigtige "thumbnails" for dine billeder;
altsaa smaa miniaturer. Naar du bruger det samme billede men blot
resizer med witdh og height, loader browseren stadig billedet som om
det var stort - og det tager en fandens tid. Brug et program som
IrfranView hvis du har mange billeder du skal resize - men det skal
bare goeres :)

Du bruger en masse iframes - fin ide - men de bliver irriterende, og
ender enten med en super masse scrollbars, eller billeder der ikk ka
ses pga stoerrelsen og "scrolling:no"...
Jeg tror jeg har en loesning der er bedre: Javascript!

I <head> sektionen indsaetter du dette script:
   <script type="text/javascript">
function onClick(id) {
GetElement('picture').innerHTML='<img src="img/'+id+'" alt="(c)
MONDADORI">';}
   </script>
Saa laver du dine billeder (*thumbnails*), men giver dem alle en
"onclick"-funktion:
<img src="thumbnails/1.jpg" alt="" onclick="onClick('1.jpg')">
<img src="thumbnails/2.jpg" alt="" onclick="onClick('2.jpg')">
etc...

Herefter laver du det store billede med
<div id="picture"><img src="img/start.jpg" alt=""></div>
Billedet "start.jpg" er det billede der vises naar du aabner siden,
foer du trykker paa nogle thumbnails. Hvis der ikke skal vaere et
billede, skriver du istedet bare:
<div id="picture"></div>
- altsaa en tom div-container...

Det der sker nu er, at naar du trykker paa en thumbnail, aendrer
Javascriptet i toppen billedet det valgte. Ret smart :)

Haaber det virker for dig :D // Rune (Eshie)

--
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

Eshadon (14-02-2007)
Kommentar
Fra : Eshadon

Dato : 14-02-07 21:15
Den der (c)MODADORI skal selvfoejelig ikke med, undskyld.
Det samlede script vil se saadan ud:

<html>
<head>
<link ... >
<script type="text/javascript">
function onClick(id) {
GetElement('picture').innerHTML='<img src="img/'+id+'" alt=" ">';}
</script>
<style type="text/css">
..thumb {margin:8px}
</style>
</head>
<body>
<span class="thumb">
<img src="thumbnails/1.jpg" alt="" onclick="onClick('1.jpg')">
<img src="thumbnails/2.jpg" alt="" onclick="onClick('2.jpg')">
...
<img src="thumbnails/42.jpg" alt="" onclick="onClick('42.jpg')">
</span>
<div id="picture"><img src="img/start.jpg" alt=""></div>

Stadig bare et eksempel paa hvordan det ka goeres :)
//Rune

--
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

christina3018 (16-02-2007)
Kommentar
Fra : christina3018

Dato : 16-02-07 12:51
Eshadon wrote in dk.edb.internet.webdesign.html:
> Den der (c)MODADORI skal selvfoejelig ikke med, undskyld.
> Det samlede script vil se saadan ud:
>
> <html>
> <head>
> <link ... >
> <script type="text/javascript">
> function onClick(id) {
> GetElement('picture').innerHTML='<img src="img/'+id+'" alt=" ">';}
> </script>
> <style type="text/css">
> ..thumb {margin:8px}
> </style>
> </head>
> <body>
> <span class="thumb">
> <img src="thumbnails/1.jpg" alt="" onclick="onClick('1.jpg')">
> <img src="thumbnails/2.jpg" alt="" onclick="onClick('2.jpg')">
> ...
> <img src="thumbnails/42.jpg" alt="" onclick="onClick('42.jpg')">
> </span>
> <div id="picture"><img src="img/start.jpg" alt=""></div>
>
> Stadig bare et eksempel paa hvordan det ka goeres :)
> //Rune

Hej Rune
Kan godt få billederne til at blive vist i browseren. Men der står der
er en fejl og jeg kan ikke klikke på billederne så det store billede
udskiftes.

Vil du ikke forklare mig hvordan det er meningen jeg skal bygge
mappestrukturen op :S Tror det er der jeg går galt i byen.

Lige nu har jeg min side galleriet skal ligge på self. hvorfra der
skal linkes til undergallerier ("galleri fra den ting" og "galleri fra
den dato" osv osv) - Når man klikker sig ind på et undergalleri skal
selve galleriet jo så komme frem. Jeg har derfor lavet en mappe ved
siden af min galleriside, mappen hedder "galleri" og jeg har tænkt mig
den så sku indeholde en mappe for hvert undergalleri, så jeg kan finde
rundt i det.

Mvh. Christina

--
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

Jørgen Farum Jensen (17-02-2007)
Kommentar
Fra : Jørgen Farum Jensen

Dato : 17-02-07 13:18
christina3018 skrev:
> Eshadon wrote in dk.edb.internet.webdesign.html:
>> Den der (c)MODADORI skal selvfoejelig ikke med, undskyld.
>> Det samlede script vil se saadan ud:
>>
>> <html>
>> <head>
>> <link ... >
>> <script type="text/javascript">
>> function onClick(id) {
>> GetElement('picture').innerHTML='<img src="img/'+id+'" alt=" ">';}
>> </script>
>> <style type="text/css">
>> ..thumb {margin:8px}
>> </style>
>> </head>
>> <body>
>> <span class="thumb">
>> <img src="thumbnails/1.jpg" alt="" onclick="onClick('1.jpg')">
>> <img src="thumbnails/2.jpg" alt="" onclick="onClick('2.jpg')">
>> ...
>> <img src="thumbnails/42.jpg" alt="" onclick="onClick('42.jpg')">
>> </span>
>> <div id="picture"><img src="img/start.jpg" alt=""></div>
>>
>> Stadig bare et eksempel paa hvordan det ka goeres :)
>> //Rune

Det er ikke til at sige noget, når vi ikke kan se
en eksempelside, men umiddelbart forekommer ovenstående
fejlagtigt, Jeg vil tro at
GetElement('picture').innerHTML
   ='<img src="img/'+id+'" alt=" ">';
i det mindste skal være
document.getElementById('picture').innerHTML
   ='<img src="img/'+id+'" alt=" ">

for lissom at starte et sted.

Ellers har jeg syslet lidt med gallerier,
dels
http://webdesign101.dk/galleri/eksempler/galleri_1.php
og dels kapitel 19 i min nedennævnte bog, illustreret
ved
http://webdesign101.dk/cssbog/kildekode/figur1904.html



--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i websidekonstruktion:
http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.