v5.dk logo
Kom ind og besøg vores Discord Chat-community
Bliv medlem her eller læs mere om Discord her
Kærlighed kan godt købes for penge
- vi elsker nemlig vores kunder :-)

Mere info Køb nu

Premium på v5.dk
v5.dk logo  v5.dk e-learning
Log på med Facebook
  • Log ind på v5.dk
  • Opret bruger
  • Log ind
  • v5.dk Premium
  • v5.dk Premium
  • Hvad siger vores kunder?
  • E-læring for begyndere
  • icon for WordPress 4 e-learning WordPress 4
  • icon for Office 365 e-learning Office 365
  • icon for Microsoft Word e-learning Microsoft Word
  • Bloggen for alle
  • E-læring for nørder
  • icon for PHP-programmering e-learning PHP-programmering
  • icon for iOS Programmering e-learning iOS Programmering
  • icon for Linux Server e-learning Linux Server
  • Bloggen for nørder
  • Arkiverede videoer
  • Fællesskab
  • Forum
  • Idéer og ønsker
  • Markedspladsen
  • v5.dk Premium
  • Gratis webhotel
  • Cloud-servere
  • Om v5.dk
  • Søg på v5.dk
  • Om v5.dk ApS
    • Om virksomheden
    • RSS-feeds og tjenester
    • Driftsmeddelelser
    • Presse-kit
    • Ledige jobs
    • Social Netværk
      • Facebook
      • Twitter
      • Instagram
    • Alt det andet
      • Forretningsbetingelser
      • Ophavsret og Copyright
  • Kontakt kundeservice
  • FAQ og Hjælp
    • Premium og abb.
    • Videoer og Afspiller
    • Forum og Points
    • Cloud-servers
  • Partner/Virksomhed
  • Partner-kanal
v5.dk logo mobile
  • Menu
  • Opret bruger

Pop-op billedfremviser

  • v5.dk
  • Forum
  • PHP-programmering
  • Pop-op billedfremviser
  • Sidevisninger: 2930 har set dette indlæg
Besvar #0Spørgsmål oprettet af @jens-peterkongerslev | 55 points
30 points ude 7 indlæg 6 år siden Spørgsmål besvaret
avatar
 

Hvordan laver jeg en "billedviser pop-op??
Jeg har ca. følgende filstruktur på serveren:

Kataloger
-Katalog1
--KatalogBillede.jpg
--Billed1.jpg
--Billed1_1.jpg
--Billed2.jpg
--Billed3.jpg
--Billed3_1.jpg
--Billed3_2.jpg
--Billed3_3.jpg
-Katalog2
--KatalogBillede.jpg
--Billed1.jpg
--Billed1_1.jpg
--Billed2.jpg
--Billed2_1.jpg
--Billed3.jpg

På min første side viser jeg en oversigt over alle ?KatalogBillede.jpg?
Klikker man på et KatalogBillede vises en ny side med de billeder der ligger i det valgte katalog - men kun de billeder som ikke har en underscore.

Nu vil jeg gerne kunne klikke på de viste billeder og få en pop-op med det valgte billede og mulighed for at skifte mellem de tilhørende billeder.
Altså hvis jeg har valgt Katalog 1 og klikker på Billed3, skal dette vises i pop-op?en og jeg skal så kunne skifte mellem Billed3.jpg, Billed3_1.jpg
, Billed3_2.jpg & Billed3_3.jpg

Jeg håber forklaringen er god nok til at I kan forstå mit behov, og komme med forslag eller eksempler på hvordan jeg kan løse det.
Mvh. Jens Peter

avatar
 
Besvar#1 @db Admin kommenterede for 6 år siden

Hej Jens Peter

Opgaven er godt beskrevet, så vi forstår helt præcis hvad du gerne vil opnå :-) Det du søger kaldes en Lightbox.

På denne hjemmeside kan du downloade de nødvendige filer samt finde en "Kom i gang"-guide til hvordan du opnår den ønskede funktionalitet på dine billeder, så de vises i en "lightbox"/popup.

http://lokeshdhakar.com/projects/lightbox2/

Håber dette hjælper dig videre :)


Med venlige hilsner

Daniel Bahls Signatur   Daniel Bahl (@db)
   CEO – v5.dk ApS

avatar
 
Besvar#2 @jens-peterkongerslev kommenterede for 6 år siden

 #1  Hej Daniel

Mange tak for hurtigt svar.

Det ser meget lovende ud. Dog ser det ud til at når der er flere billeder, som skal kunne vises i pop-op'en, men jeg ønsker kun at vise det første billede på "grundsiden" og så kunne klikke på det ene billede for at kunne skifte mellem de 'tilhørende' billeder.

Håber du forstår hvad jeg mener.

Mvh. Jens Peter 

Dette svar er accepteret af OP og tildelt 30 points
avatar
 
Besvar#3 @db Admin svarede for 6 år siden

Det kunne du godt lave, den nemmeste og mest simple måde at lave det på, ville være at indsætte alle billederne på siden, som eksemplet, og så skjule dem alle pånær det første:

Du kan skjule et billede vha. style="display: none;" tagget, eksempelvis:

<a href="images/image-2.jpg" data-lightbox="album1">Billede 1</a>
<a href="images/image-3.jpg" data-lightbox="album1" style="display: none;">Billede 2</a>
<a href="images/image-4.jpg" data-lightbox="album1" style="display: none;">Billede 3</a>

Med venlige hilsner

Daniel Bahls Signatur   Daniel Bahl (@db)
   CEO – v5.dk ApS

avatar
 
Besvar#4 @jens-peterkongerslev kommenterede for 6 år siden

Hej Daniel

Igen tak for hurtigt og godt svar.
Jeg kan godt være lidt betænkelig ved løsningen med at indsætte alle billederne på siden da det jo vil gøre indlæsningen af siden tungere. Men jeg kan godt se at det virker.

Jeg støder dog på et helt andet og værre problem...
Det hele ligger på en side som kaldes med en parameter som jeg laver GET på, og det giver åbenbart et problem for lightboxen, da billedet blot åbner i en helt ny side.
Jeg har prøvet at fjerne parameteren, og så virker selve lightboxen fint...

Mvh. Jens Peter 

avatar
 
Besvar#5 @db Admin kommenterede for 6 år siden

Hej Jens

Sålænge det blot er links til billeder, og ikke selve billederne - vil den ikke indlæse nogle af billeder, før du klikker på billedet. Hvis du ønsker kun at indlæse det første billede, og efterfølgende efterhånden som man klikker ind på dem, kan du gøre følgende:

<a href="images/image-1.jpg" data-lightbox="album1"><img src="images/image-1.jpg"></a>
<a href="images/image-2.jpg" data-lightbox="album1" style="display: none;"></a>
<a href="images/image-3.jpg" data-lightbox="album1" style="display: none;"></a>
<a href="images/image-4.jpg" data-lightbox="album1" style="display: none;"></a>

Det kan naturligvis også laves på andre måder, vha. f.eks. Javascript, men det her er en nem og velfungerende måde at starte ud med.

Mht. dit andet spørgsmål, forstår jeg ikke helt, kan du give et eksempel på hvad du ønsker at gøre, og hvad der skaber problemet.

 


Med venlige hilsner

Daniel Bahls Signatur   Daniel Bahl (@db)
   CEO – v5.dk ApS

avatar
 
Besvar#6 @jens-peterkongerslev kommenterede for 6 år siden

Hej Daniel

Tak for svaret - jeg sender dig lige et link i chatten, da jeg helst ikke vil have "offentliggjort" mine testsider...

Mvh. Jens Peter 

avatar
 
Besvar#7 @jens-peterkongerslev kommenterede for 6 år siden

Jeg tror jeg har fundet "synderen" det lader til at lightbox kolliderede med et andet css som benytter sig af nogle DIV classes til at bestemme placering af output....

Spørgsmålet er besvaret, men du er altid mere end velkommen til at skrive en kommentar!
avatar
 

Du er ikke logget ind

Du skal være logget ind på v5.dk før du kan benytte vores forum. Det er ganske gratis at oprette en bruger.

Opret en ny gratis bruger Log ind

Følger med i denne tråd

jens-peterkongerslev

Forum kategorier

  • Generelt
  • Guides & Howto85
  • Offtopic / Andet160
  • Microsoft Office
  • Microsoft Word13
  • Microsoft Excel4
  • Microsoft PowerPoint0
  • Web og hjemmesider
  • Wordpress17
  • Operativsystemer
  • Apple Mac OS X14
  • Apple iOS28
  • Microsoft Windows4
  • Linux16
  • Teknologier
  • Netværk og WiFi3
  • Internet-tjenester9
  • Programmering
  • PHP-programmering125
  • iPhone-/Xcode-programmering9

Aktive forum-tråde lige nu

pentobarbital kaufen ohne rezept
gras kaufen online - grasthc.com
online marketing
Køb juridiske dokumenter såsom kørekort, pas, visum, opholdstilladelse og andre dokumenter
Køb juridiske dokumenter såsom kørekort, pas, visum, opholdstilladelse og andre dokumenter
Weed online kaufen
Er det værd at have en "portfolio"-hjemmeside!?
Fejlkode i form af bip-lyde ved opstart af gammel stationær PC
Bygget med af v5.dk
© Copyright 2006-2023 • Forretningsbetingelser • Copyright • Persondata- og Cookiepolitik
v5.dk ApS - Åbogade 15 - 8200 Aarhus N - CVR: 36902833
v5.dk logo
Hej, vi hedder v5.dk og vi laver e-learning på dansk

v5.dk er sat i verden for at gøre teknologi tilgængeligt og anvendeligt for både professionelle og almindelige brugere på alle niveauer.

93 200 555
  Skriv til os
v5.dk bruger cookies til at huske dine indstillinger, livechat samt til statistik
 

Alle vores priser er inkl. moms Sikker SSL-beskyttet forbindelse

Dankort og Visa-Dankort  Visa  Mastercard og Mastercard Junior  Maestro

  • Produkter
  • v5.dk Premium
  • Cloud-servers
  • v5.dk
  • Om v5.dk
  • Kunderne siger
  • Kontakt os
  • Presse
  • Stay updated
  • RSS & tjenester
  • Søg på v5.dk
  • Sitemap