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

RasmusRR Nybegynder

25. maj 2013 - 21:46 Der er 6 kommentarer og
1 løsning

Flere lightbox's fra samme script.

Jeg har fundet et script på nettet til lightbox's

http://www.tonylea.com/2011/how-to-create-your-own-jquery-lightbox/#content

Er der en der kan hjælpe med at rette det til, så jeg kan have mere end en lightbox på min side?

Synes godt om

keysersoze Guru

25. maj 2013 - 22:21 #1

benyt forskellige id'er eller klasser og så er du kørende.

Synes godt om

RasmusRR Nybegynder

25. maj 2013 - 22:34 #2

Kan du give et eksempel?

Jeg har selv forsøgt, men kan ikke få det til at virke..

Synes godt om

keysersoze Guru

26. maj 2013 - 08:45 #3

lad os se hvad du har forsøgt.

Synes godt om

RasmusRR Nybegynder

26. maj 2013 - 11:04 #4

Her er et af de MANGE forsøg :-/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<html>
<head>
<title>Quick Simple Light Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">

body
{
font-family: Helvetica, Arial;
}

.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}

.box
{
position:absolute;
top:20%;
left:30%;
width:500px;
height:300px;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}

.close
{
float:right;
margin-right:6px;
cursor:pointer;
}

</style>

<script type="text/javascript">

$(document).ready(function(){

$('.lightbox').click(function(){
$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});

$('.close').click(function(){
close_box();
});

$('.backdrop').click(function(){
close_box();
});

});

function close_box()
{
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
});
}

</script>

</head>
<body>

<a href="#lightbox1" rel="nofollow">Open Lightbox1</a><br>
<a href="#lightbox2" rel="nofollow">Open Lightbox2</a>
<div id="lightbox1" class="box"><div class="close">x</div>This is lightbox 1</div>
<div id="lightbox2" class="box"><div class="close">x</div>This is lightbox 2</div>

</body>
</html>

</body>
</html>

Synes godt om

keysersoze Guru

27. maj 2013 - 23:55 #5

når du ændrer og tilføjer elementer med bestemte id'er eller class'er skal din javascript tilsvarende tilpasses. så ændrer du class="ligntbox" til class="lightbox1" skal din js tilsvarende tilpasses fra $('.lightbox') til $('.lightbox1').

Når det så er sagt ligner din markup heller ikke eksemplet og så vil du slet ikke kunne forvente at det virker.

Synes godt om

RasmusRR Nybegynder

08. juni 2013 - 23:03 #6

Så fik jeg det til at virke :-)

Opret bare et svar

Synes godt om

keysersoze Guru

13. juni 2013 - 20:03 #7

svar

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