Oprettet søn. d. 29. august 2010 kl. 15:38:01

200 point uddelt | 4 kommentarer

filia (10.060 point. Point ude: 0)

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.
?:-)

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet søn. d. 29. august 2010 kl. 18:52:24| #1

splazz (55.958 point)
majbom.com

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

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet tir. d. 31. august 2010 kl. 21:37:46| #2

filia (10.060 point)

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/ (...)
<html xmlns="http://www.w3.org/ (...)
<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?
?:-)

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet lør. d. 04. september 2010 kl. 18:59:36| #3

Accepteret svar!200 point tildelt

filia (10.060 point)

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.

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet søn. d. 05. september 2010 kl. 03:46:51| #4

filia (10.060 point)

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

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

/:-)

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Log ind

Opret bruger | Glemt adgangskode

Seneste spørgsmål

Tabindex!

Oprettet den 11. februar 2012 kl. 11.37

thomasfricke giver 30 point for svar | Giv et svar »

skal frem brugernavn ned og sige om den har eller ej

Oprettet den 11. februar 2012 kl. 02.44

tobrukDk giver 20 point for svar | Giv et svar »

Muligvis script-konfllikt i jquery. Min slider vises...

Oprettet den 9. februar 2012 kl. 23.00

Peterjakobsen giver 30 point for svar | Giv et svar »

Seneste guides

Installer win 7

9. februar 2012 kl. 14.11 | Læs »

Installation af Apache2, PHP5, MySQL5, Phpmyadmin og...

8. februar 2012 kl. 20.05 | Læs »

Den hurtige og effektive metoder til at knække...

4. februar 2012 kl. 23.16 | Læs »

Guide til usb internet også kaldet mobilt bredbånd

4. februar 2012 kl. 22.33 | Læs »

Den gode bruger

30. januar 2012 kl. 04.45 | Læs »

Se alle guides »

Seneste nyheder

Måske snart slut med Androids helt store problem

10. februar 2012 kl. 13.40 | Læs »

Her er fem sjove danske websider du skal kende

10. februar 2012 kl. 13.31 | Læs »

NemId sprængt: Hackere bryder ind i Danske Bank

10. februar 2012 kl. 13.06 | Læs »

Danmark kigger langt efter musikbranchens guldkalv

10. februar 2012 kl. 12.20 | Læs »

Nu kan du snart hente Windows 8

10. februar 2012 kl. 11.41 | Læs »

Se alle nyheder »

Tips & Tricks fra PC World

Her er fem sjove danske websider du skal kende

Trænger dine lattermuskler til en omgang fitness på dansk? Vi viser vej til fem websider fyldt med humor og vanvittig satire.

Læs mere »

Anmeldelser fra PC World

Test: Denne super-tablet er iPads hårdeste konkurrent

Eee Pad Transformer Prime er frygtindgydende med sin quadcore processor og evne til at trylle sig om til bærbar. Apple bør kigge i bagspejlet, for Asus' tablet-pc kommer buldrende - og gør det...

Læs mere »

Seneste blogindlæg

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...

Læs mere »