CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede 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.
Avatar billede 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...
Avatar billede 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? ;-)
Avatar billede 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å.
Avatar billede 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...
Avatar billede 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...
Avatar billede 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>
og 
</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...
Avatar billede 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?
Avatar billede 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>
Avatar billede ixma Nybegynder
19. juli 2010 - 23:58 #9
Ja så står der 'billede 1' dér hvor eg før havde et thumbnail
Avatar billede 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.
Avatar billede 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...
Avatar billede 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.
Avatar billede 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>
Avatar billede 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'
Avatar billede ixma Nybegynder
21. juli 2010 - 23:17 #15
- Og det er så kun første billede jeg har indsat scriptet på...
Avatar billede majbom Novice
22. juli 2010 - 07:24 #16
du har ikke gennemført step1 på siden...
Avatar billede 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.
Avatar billede 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" />
Avatar billede 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?
Avatar billede 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)
Avatar billede 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.
Avatar billede 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...
Avatar billede 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
Avatar billede 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...
Avatar billede 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.
Avatar billede 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...
Avatar billede 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.
Avatar billede ixma Nybegynder
05. august 2010 - 15:25 #28
Læg lige et svar, så jeg kan lukke.
Avatar billede majbom Novice
05. august 2010 - 17:58 #29
nååh, den smuttede i svinget, sorry - svar :)
Avatar billede ixma Nybegynder
06. august 2010 - 01:30 #30
Det var vist ikke et svar?
Avatar billede majbom Novice
06. august 2010 - 07:40 #31
hehe nej, jeg prøver lige igen :)
Avatar billede majbom Novice
06. august 2010 - 21:47 #32
tfp! :)
Avatar billede 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.

Loading billede Opret Preview

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript 2 21/05/202417:19 27/05/202410:59
Disable button efter 1. klik Af nemlig i JavaScript 2 05/05/202415:37 05/05/202416:25
Beregning af sum via PHP og SQL Af dane022 i JavaScript 3 10/02/202421:38 12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript 2 27/12/202321:42 28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript 12 19/12/202313:31 10/01/202411:04
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 10:11 LENOVO genstarter af sig selv, når jeg ser video på Facebook Af keld66 i Windows
I dag 09:37 Prosomic 65 uand8009 Af Bassine i Fjernsyn & projektorer
I går 20:46 opkaldside Af hagbartm i Mobiltelefoner
I går 16:05 win 10 vil ikke boote Af bb69 i Windows
I går 11:20 Lenovo x390 Af tobberjas i PC
White papers
Flere white papers »


Premium
Teaser billede
Rigsrevisionen kritiserer fire statslige myndigheder for dårlig it-sikkerhed: Har haft seks år til at løse problemet
Læs mere »
Microsofts nye Windows 11-funktion kaldes ”en guldgrube for hackere”
"Jeg var den sjette medarbejder, der blev ansat dengang, i dag er vi over 1000"
Twoday rykker hovedkontoret til Nordhavn: Opsiger flere lejemål og samler kontorer
Se alle »
Computerworld
Teaser billede
MobilePay ændrer på funktion få måneder efter stor opdatering
Læs mere »
Den næste version af Windows 11 er nu tilgængelig for de første brugere: Se, hvad du kan forvente
Kæmpemæssig AI-opdatering styrer mod din iPhone: Derfor bliver iOS 18 særlig interessant
Jeg havde simpelthen aldrig forestillet mig, at det nye Rejsekort ville minde om noget, der var udtænkt af IBM i 60’erne
Se alle »
CIO
Teaser billede
Energinet får igen kritik for milliardstor outsourcing: To væsentlige it-sikkerhedstiltag er ikke blevet indført til tiden
Læs mere »
Nomineret til Årets CIO: Martin Wood har skabt en leveringsmaskine hos Domstolsstyrelsen - Håber det kan inspirere andre offentlige myndigheder
Han er en af Danmarks bedste CIO’er: Topdanmarks Kasper Tjørntved Davidsen står i spidsen for digitale transformationer til milliarder af kroner
Bestyrelser på pinebænken under hackerangreb: "Altså 500.000 euro i løsesum er jo ikke så meget"
Se alle »
Job & Karriere
Teaser billede
Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024
Læs mere »
Medarbejderne fik udleveret badetøfler ved indflytningen: Kom med inden for i IBM Danmarks nye topmoderne hovedkontor
Google fyrer hele sit Python-team
Får du den løn, du fortjener? Få overblikket over hvor meget dine kolleger tjener hver måned
Se alle »
White paper
Teaser billede
Opdag fordelene ved cloud-baseret backup og recovery
Læs mere »
Sådan høster du forretningsfordelene ved Internet of Things
Det behøver ikke at gøre ondt: Sådan gør du livet lettere for kunder med multicloud
MDR: Transparent sikkerhed og overvågning i realtid
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »