CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

ixma Nybegynder

17. juli 2010 - 18:25 Der er 31 kommentarer og
1 løsning

Simpelt script til fotogalleri

Hejsa,

Har et helt simpelt foto galleri. 20 thumbnails i table lavet i Dreamweaver. Jeg kunne godt tænke mig, at få dem til at åbne på en lidt lækker måde og ikke bare i et nyt browservindue. Jeg tænker på noget som i første eksempel (med gummibåden) her: http://highslide.com/

Det program er alt for kompliceret til mig. Jeg kan stort set ikke andet end bruge Dreamweaver samt copy/paste scripter. Og jeg har slet ikke brug for 98% af de ting det program kan.

Jeg har siddet i timevis og søgt efter noget brugbart, men alt jeg finder frem til er store og (for mig) uoverskuelige løsninger. Jeg har tidligere på et andet website copy-pastet et helt simpelt script på 4-5 linjer, som gjorde det jeg ønskede med billederne og virkede upåklageligt. Nu kan jeg desværre ikke finde det. Men så jeg ved altså, at det kan gøres simpelt.

Så... Et simpelt script til at åbne mine thumbnails op på en lækker måde? Kan godt lide hvis der ikke er krydser og tekster og alæt muligt på billeder, men at man bare lukket det ved at klikke på det.

Håber vildt meget på brugbar hjælp, så smider en god stak point.

Synes godt om

majbom Novice

17. juli 2010 - 20:01 #1

hvad med det her: http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm?

det er ret nemt at sætte op...

Synes godt om

danco Nybegynder

17. juli 2010 - 21:07 #2

Som Splazz siger er Lightbox en simple og flot måde at præsentere dine billeder på.
Der findes op til flere forskellige udgaver på nettet som ligger til fri download.
Langt de fleste af dem kræver blot en CSS og JS fil for at fungere.
Bliver det så meget lettere? ;-)

Synes godt om

ixma Nybegynder

18. juli 2010 - 12:37 #3

Tak. Har siddet og rodet med det, men kan simpelthen ikke finde ud af det. Det er væsentligt mere kompliceret end det script jeg engang havde.

Instrukser til den slags er jo altid til folk, der ved en smule. Jeg aner ikke hvor det HTML skal sættes ind. Alt hvad jeg har prøvet virker ikke.

Hvis jeg forsøger at sætte thumbnail link linjen ind:

<a href="images/image-1.jpg" rel="lightbox" title="my caption" rev="http://www.dynamicdrive.com">image #1</a>

Og fjerner title="my caption" rev="http://www.dynamicdrive.com">image #1

Så siger Dreamweaver at der mangler tags.

Kan heller ikke se der står nogen steder, hvad der skal uploades til serveren og hvor det skal ligge.

Så det er sikkert ynkeligt nemt for Jer, fordi I har en grundidé. Jeg søger nok mere noget copy/paste med instruktion til dummies, som en som jeg kan forstå.

Synes godt om

majbom Novice

18. juli 2010 - 17:14 #4

synes nu ellers ikke det kan være ret meget nemmere, der står på siden, hvordan du skal sætte det ind i din fil og du kan jo så se hvilke filer der skal uploades og hvor til...

Synes godt om

ixma Nybegynder

18. juli 2010 - 21:46 #5

Som jeg ser det står der kun hvad der skal skrives ind på siden. Ikke hvor.

Jeg er sikker på det må virke latterligt nemt på Jer. Ville ønske den slags var så nemt for mig.

Forklarede ovenfor hvor den glipper mellem mig og det øjensynligt så nemme script...

Synes godt om

majbom Novice

18. juli 2010 - 22:23 #6

hvor:

Taget fra siden
Step 1: Insert the below code in the HEAD section of your page:

altså imellem

<head>

</head>

og:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

sætter du ind, hvor du vil have billederne vist...

du laver en mappe i samme mappe, som siden liger i, og kalder "js", hvor du skal uploade .js-filerne til- desuden laver du en mappe der hedder "css", hvor du uploader .css-filen til...

Synes godt om

ixma Nybegynder

19. juli 2010 - 22:24 #7

og:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

sætter du ind, hvor du vil have billederne vist...

---

Hvor jeg vil have billederne vist? Jeg forstår det ikke, og må have sat det forkert ind.

Du må gerne guide idioten endnu mere. Har en række thumbnails i et table således:

<td><img src="photo_havana_centro_habana_01t.jpg" alt="photo_havana_sunset" width="190" height="127" border="1" class="borderwhite" onclick="MM_openBrWindow('photo_havana_centro_habana_01.html','HavanaCubaCentroHabana01','width=800,height=533')" /></td>
<td><img src="photo_havana_centro_habana_02t.jpg" alt="photo_havana_sunset" width="190" height="127" border="1" class="borderwhite" /></td>
<td><img src="photo_havana_centro_habana_03t.jpg" alt="photo_havana_sunset_" width="190" height="127" border="1" class="borderwhite" /></td>
<td><img src="photo_havana_centro_habana_04t.jpg" alt="photo_havana_sunset" width="190" height="127" border="1" class="borderwhite" /></td>

Hvor skal det så sættes ind?

Synes godt om

majbom Novice

19. juli 2010 - 22:47 #8

<td><a href="photo_havana_centro_habana_01t.jpg" title="photo_havana_sunset" rel="lightbox[havana_sunset]">billede 1</a></td>

Synes godt om

ixma Nybegynder

19. juli 2010 - 23:58 #9

Ja så står der 'billede 1' dér hvor eg før havde et thumbnail

Synes godt om

ixma Nybegynder

20. juli 2010 - 00:00 #10

Jeg fatter ikke om den selv bruger originalbilledet til at lave et thumbnail eller om HTML linjen både skal indeholde thumb plus original.

Tak for hjælpen, men som jeg har forsøgt at sige er jeg totalt novice. At du skriver en sætning hjælper mig ikke vildt, når jeg ikke ved hvor præcist den skal ind og hvad der skal rettes i den.

Synes godt om

majbom Novice

20. juli 2010 - 08:32 #11

arh det gik osse lige for stærkt dér...

"billede 1" skifter du ud med dit img-tag (med din thumbnail) og href'en skal indeholde fullsize-billedet...

Synes godt om

ixma Nybegynder

20. juli 2010 - 23:23 #12

Det fik jeg så rodet rundt med i en halv time uden resultat. Men det her er jo også blevet totalt forvirrende...

Måske kunne du bare ændre denne linje for mig, så den står korrekt og skulle virke?

<td><img src="photo_havana_centro_habana_02t.jpg" alt="photo_havana_sunset" width="190" height="127" border="1" class="borderwhite" /></td>

Jeg skal ikke have noget title/tekst på billederne.

Synes godt om

majbom Novice

21. juli 2010 - 06:55 #13

<td><a href="photo_havana_centro_habana_01t.jpg" title="photo_havana_sunset" rel="lightbox[havana_sunset]"><img src="dit_thumbnail.jpg" alt="havana" border="0"></td>

Synes godt om

ixma Nybegynder

21. juli 2010 - 23:16 #14

Nu kom jeg et skridt videre. Nu ser siden i det mindste normal ud og der åbner endda et billede, når jeg trykker på thumbnailet. Men det åbner bare i vinduet, så ser ikke ud til at javascriptet virker.

Du må gerne tage et kig:

http://www.dobbelv.dk/gallery_photo_havana_centro_habana_01.html

- Og se om du kan se hvad der er galt.

Jeg har javescript filerne i en mappe på serveren der hedder 'js' og css filerne i en mappe der hedder 'css'

Synes godt om

ixma Nybegynder

21. juli 2010 - 23:17 #15

- Og det er så kun første billede jeg har indsat scriptet på...

Synes godt om

majbom Novice

22. juli 2010 - 07:24 #16

du har ikke gennemført step1 på siden...

Synes godt om

ixma Nybegynder

25. juli 2010 - 22:30 #17

Jo, det har jeg. Men tror en af vores misforståelser bunder i, at du referer til nogle andre instructions end dem der er på siden du linkede til... Måske en anden version af Lightbox?

Jeg har indsat de head-tags som der er angivet i instrukserne.

Synes godt om

majbom Novice

25. juli 2010 - 22:45 #18

det kan jeg ikke se, dit head-segment ser sådan her ud:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tomas Willemoes : Writer Etcetera</title>
<style type="text/css">
<!--
body {
    background-color: #000000;
}
.border {
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
}
.borderwhite {
    border: thin solid #FFFFFF;
}
-->
</style>
</head>

og på siden står der at du skal indsætte:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Synes godt om

ixma Nybegynder

30. juli 2010 - 18:30 #19

Hej. Du har fuldstændigt ret. Jeg sad og kiggede på en anden side end den originale, sorry.

Nu virker det - næsten! :-)

http://www.dobbelv.dk/gallery_photo_havana_centro_habana_01.html

To spørgsmål - fohåbentligt de sidste:

1. Der er ingen tekst hvor der står 'close' på billedet. Man skal sidde og rode rundt for at finde punktet at trykke på. Ved du hvad der er galt eller skal der bare ændres en farve på den tekst? I så fald hvordan?

2. Fotoet åbner ret langt nede på siden, så man skal scrolle ned for at det i sin helhed. Og i øvrigt trykke på close-knappen. Ved du hvordan man får det til at åbne i midten af skærmen, så hele billedet er med?

Synes godt om

majbom Novice

30. juli 2010 - 21:08 #20

1. du har nok ikke billedet liggende...
den bruger en gif der hedder images/closelabel.gif, og så bruger den desuden en animeret gif når den loader: images/loading.gif

2. hos mig åbner den ikke ret langt fra toppen (omkring 40px vil jeg tro), men det kan være du skal lave fullsize-billedet lidt mindre? hos mig fylder det hele højden i min browser (jeg sidder så osse på en laptop med 1200x800 eller noget i den stil)

Synes godt om

ixma Nybegynder

31. juli 2010 - 00:16 #21

Kigger lige på det snarest. Skal nok huske dine point når det hele virker, og beklager jeg ind imellem er væk i længere tid før jeg vender tilbage.

Synes godt om

ixma Nybegynder

31. juli 2010 - 16:51 #22

1. Yes, det vart images mappen, som klovnen ikke havde uploadet. Den del virker nu, tak.

2. Hos mig åbner den vel ca. 2 cm fra toppen, og så er den nederste halve centimeter gemt udenfor browseren. Det er møgdumt. Sidder selv på laptop med 1280x800.

Der er ikke en måde man kan få den til at åbne en centimeter længere oppe? Nu ændrede jeg billedet fra 800x533 til 750x500 og synes det er ret småt, og med den kæmpe hvide ramme i bunden af billedet står det gudhjælpemig stadig for langt nede og udenfor browseren.

Kan man cutte noget af det hvide i bunden? Prøv at tage et kig på siden igen...

Synes godt om

majbom Novice

31. juli 2010 - 22:47 #23

jeg har ikke lige kigget på det, men skal nok se på det...

jeg tror den tager udgangspunkt i hvor billedet er på siden

Synes godt om

ixma Nybegynder

31. juli 2010 - 23:25 #24

Hvis ikke man kan få den højere op (den åbner samme sted lige meget hvor billedet er på siden se rdte ud til), kan man så redigere i den store hvide ramme? Eller bliver denne ramme hentet et andet sted på nettet? Den ligger jo ikke i images mappen...

Synes godt om

ixma Nybegynder

04. august 2010 - 00:38 #25

Venter spændt om du får kigget på det. Ville være fedt hvis jeg kunne få det færdigt.

Synes godt om

majbom Novice

04. august 2010 - 22:22 #26

det er ikke bare sådan lige...

du kan prøve at ændre på 10-tallet i denne linje:

var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);

i filen prototype.js og se om det giver den ønskede effekt...

Synes godt om

ixma Nybegynder

05. august 2010 - 15:24 #27

Nu er det godt nok i filen lightbox.js, så det tog mig noget tid at finde ud af, men det virker!

Super. Tak.

Synes godt om

ixma Nybegynder

05. august 2010 - 15:25 #28

Læg lige et svar, så jeg kan lukke.

Synes godt om

majbom Novice

05. august 2010 - 17:58 #29

nååh, den smuttede i svinget, sorry - svar :)

Synes godt om

ixma Nybegynder

06. august 2010 - 01:30 #30

Det var vist ikke et svar?

Synes godt om

majbom Novice

06. august 2010 - 07:40 #31

hehe nej, jeg prøver lige igen :)

Synes godt om

majbom Novice

06. august 2010 - 21:47 #32

tfp! :)

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
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
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

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