Notifikationer

Markér alle som læst Log ud

filia Juniormester

29. august 2010 - 15:38 Der er 3 kommentarer og
1 løsning

Lightbox på swap image?

Jeg skal lave et galleri, og jeg er åbenbart ude efter noget med Lightbox, da et stort billede gerne skal kunne åbnes ovenpå indholdet på siden.

Jeg er ikke voldsomt stiv i web, så jeg havde tænkt mig at bruge en simpel swap-image via Dreamweaver fra thumb til større billede - eller et andet javascript, jeg har i forvejen til lignende ting.
Men jeg kunne godt tænke mig, at dette større billede yderligere kan forstørres (oven-)på siden.

Er der en enkel metode til det, eller skal jeg i gang med hele Lightbox-'pakken' med vist nok 3 forskellige js-filer osv.?
Et script, der bare åbner som lightbox-forstørrelse ved f.eks. klik på det mindre billede er fint, selve galleriet kan jeg etablere på anden vis.
?:-)

Synes godt om

majbom Novice

29. august 2010 - 18:52 #1

ja, et godt bud er jo netop lightbox, som gør hvad du spørger efter - hvad er der galt med det?

Synes godt om

filia Juniormester

31. august 2010 - 21:37 #2

Den er fin nok, men ikke helt gennemskuelig for mig.
For at teste pakkeløsningen, som jeg har fundet på nettet, har jeg lavet nedenstående, som fungerer ok, dvs. der kommer en forstørrelse frem ved klik på tgal1_1.jpg.
Men 1: Jeg kan ikke finde ud af, hvor i html´en, jeg skal anbringe div´erne?:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lightbox.js"></script>
<style type="text/css">

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }
</style>

</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><a href="billeder/gal1_1.jpg" rel="lightbox"><img src="billeder/tgal1_1.jpg" width="50" height="50"></a></td>
</tr>
</table>
</body>
</html>
- - - - - -

Og 2: Bortset fra det, ville jeg helst have følgende løsning: Klik på lille billede viser større billede i en anden celle. Klik på større billede åbner Lightbox-billedet, altså endnu større.
Kan det mon lade sig gøre?
?:-)

Synes godt om

filia Juniormester

04. september 2010 - 18:59 #3

Jeg har nu hittet ud af følgende: Der skal ikke placeres div´er i html/body´en. CSS-styles bliver læst af js-scriptet, så lightboxen styles så at sige derfra.

Med swap-image og dokument.skift og sådan noget kan jeg ikke (finde ud af at) oprette links i det billede, der skiftes til.
Så den eneste mulighed jeg selv kan få øje på, hvis Lightboxen først skal være '3.led', er:
Link fra lille billede åbner større billede/(.html) i celle med iframe, og herfra kan linkes til åbning af endnu større billede ud over siden med Lightbox.

Synes godt om

filia Juniormester

05. september 2010 - 03:46 #4

. . . men det kan Lightbox ikke klare, da den åbner inde i iframen. Løsningen hedder i stedet Lytebox: http://www.dolem.com/lytebox/

- - -
Det virker fint, og det hele kan heldigvis ændres i css og js, så man f.eks. slipper for den måde, billedet åbner på med Flash og f.eks. også det farvede overlay mv.
- - -

For at linke til indholdet af iframe, skal iframen have et name, og linkene skal have target til navnet.

Iframe:
<td width="400" height="400" align="left" valign="top" border="0"><iframe name="changer" src="blaaheste.jpg" width="350" height="350" scrolling="no" frameborder="no"></iframe></td>

Tekstlink:
<p>Vis <a href="ananas_box.html" target="changer">Ananas</a></p>

Billedlink:
<p><a href="kogle_box.html" target="changer"><img src="kogle_th.jpg" width="50" height="50" /></a>

/:-)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS