Notifikationer

Markér alle som læst Log ud

kodak Mester

10. november 2010 - 19:49 Der er 55 kommentarer og
1 løsning

Lightbox ved start php

Jeg har fået fat i et lightbox script men vil gerne have at lightbox åbner med siden

Ligesom i google billeder når man trykker på et billede kommer siden ferm med en lightbox som man så kan lukke.

Vil ikke have den så jeg skal trykke på et link før den kommer frem.

Og vil også gerne have baggrunden mere transparent:
Hvordan indstiller jeg det?

Synes godt om

bkp Nybegynder

10. november 2010 - 19:59 #1

Hvilken lightbox er det?
Er det en jQuery plugin?

Synes godt om

bkp Nybegynder

10. november 2010 - 20:04 #2

Du skal køre din lightbox når din side er klar / ready.

Hvis du bruger jQuery kan du gøre det således:

$(document).ready(function () {
   // kør din lightbox her.
});

Synes godt om

bkp Nybegynder

10. november 2010 - 20:07 #3

Ovenstående er selvfølgelig inde i din script sektion.

Hvis du ikke bruger jQuery (hvilket jeg klart anbefaler) kan du alligevel godt danne en event der kører når siden er klar, det kan du f.eks. gøre således:

window.addEvent('load',function(){
   // kør din lightbox her.
});

Synes godt om

kodak Mester

10. november 2010 - 20:12 #4

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

Synes godt om

kodak Mester

10. november 2010 - 20:27 #5

det skal ikke være et galleri det skal kun være et billede.

Synes godt om

bkp Nybegynder

10. november 2010 - 20:43 #6

Har kigget lidt i deres js fil, og jeg kunne forestille mig at du kan kalde den med en start() kommando, men jeg har dog ikke testet det, men prøv at køre start funktionen i din body onload event, og så er jeg spændt på om det virker.

<body onload="Lightbox.start();">

Synes godt om

kodak Mester

10. november 2010 - 20:48 #7

bare sådan skal der være noget i ()?

Synes godt om

bkp Nybegynder

10. november 2010 - 20:55 #8

Alternativt kan du bruge Ceebox, den har jeg tidligere brugt til lige netop det formål at jeg selv vil kunne starte en boks ved hjælp af denne kode:
$.fn.ceebox.popup(html,options)

Ceebox kan hentes her: http://catcubed.com/2008/12/23/ceebox-a-thickboxvideobox-mashup/

PS: Det kræver desuden jQuery.

Synes godt om

kodak Mester

10. november 2010 - 20:56 #9

Jeg ønsker ikke 100 filer til en funktion.

Synes godt om

bkp Nybegynder

10. november 2010 - 20:59 #10

Det ser ud til at du kan overføre id på den a tag som ligger omkring dit billede.

Synes godt om

kodak Mester

10. november 2010 - 21:01 #11

Den fulde ide er:

Hvis min hoved side føler en error variable skal den vise en ligtbox med tekst og billed hvor i der står hvilken fejl det er.

Eksempelvis hvis et link ikke længere eksistere skal den skrive det og vise et billede at et brudt link.

Synes godt om

kodak Mester

10. november 2010 - 21:02 #12

laver jeg følgendene gør den det med et billede hvis jeg trykker på linket:

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

Synes godt om

bkp Nybegynder

10. november 2010 - 21:09 #13

Du har faktisk 4 filer til din Lightbox

prototype.js
scriptaculous.js
lightbox.js
lightbox.css

jQuery bruger næsten alle sider på nettet, det er den nye standard, så du kommer næsten ikke uden om dette fantastiske bibliotek, desuden så ligger biblioteket ikke nødvendigvis på din server, det ligger samme sted som alle andre henter det, så når folk har hentet det en gang, så er det allerede på brugerens pc, og skal ikke hentes mere:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Ceebox bruger disse filer:
jquery.swfobject.js
jquery.ceebox-min.js
ceebox-min.css

Så det er vist kartoffel kartoffel, og faktisk tror jeg du sparer trafik med Ceebox da det største bibliotek jQuery allerede ligger på folks pc

;-)

Synes godt om

Slettet bruger

10. november 2010 - 21:10 #14

Hvis siden med scriptet virker, men kræver at du klikker på noget først, så er det samme funktion (som i linket) du skal bruge i <body onload="her()">

Hvis det er på nettet, så smid et link, så vi kan se det selv..

Synes godt om

bkp Nybegynder

10. november 2010 - 21:12 #15

Hvis det er til en dialog, hvorfor så ikke kigge på denne her, den ligner mere en dialog ;-)

http://plugins.jquery.com/project/aerowindow

DEMO: http://www.soyos.net/tl_files/demos/aero-window/

Synes godt om

kodak Mester

10. november 2010 - 21:37 #16

den skal bare åbne onload prøver med jQuery

Synes godt om

kodak Mester

10. november 2010 - 21:51 #17

http://line-web.mine.nu/start/

Synes godt om

Slettet bruger

10. november 2010 - 22:54 #18

Ahh, det ER jQuery.
- så er det umuligt at analysere (for mig og min trofaste Firebug)

Der burde være en eventhandler på A-elementet (omkring thumb'en), som lytter efter museklik (tilføjet on-the-fly af lightbox)
- men det er hverken onclick, onmousedown eller onmouseup - så deeet...

Faktisk er dette hovedårsagen til at jeg ikke bryder mig om jQuery.
- det bliver sgu så "okkult" det hele..

Selvom "aerowindow" i bkp's link ser helt urimeligt nice ud : o
- Dét ku' jeg ikke gøre bedre selv!

Synes godt om

kodak Mester

10. november 2010 - 23:32 #19

T4NK3R << Kan du få en af de 2 lightbox'e til at starte når siden starter

d.v.s vise et billede i lightbox'en når siden er startet.
Samme tempo som <body onload="">

Synes godt om

majbom Novice

11. november 2010 - 09:08 #20

noget siger mig at du bare er ude efter en modal-dialog?

umiddelbart vil jeg mene at et lightbox er overkill hvis du bare skal have en ille popup-besked...

prøv at se den her: http://www.dhtmlgoodies.com/index.html?whichScript=modal-message

(der er link til demo i øverste højre hjørne)

Synes godt om

kodak Mester

11. november 2010 - 12:06 #21

#20 Yes noget der virker førstegang.

Synes godt om

majbom Novice

11. november 2010 - 12:15 #22

;0)

svartid?

Synes godt om

kodak Mester

11. november 2010 - 14:49 #23

Jeg har et billede jeg vil have skal være baggrunden i stedet for Den sorte kant og den hvide baggrund.
Hvor ændre jeg det?

Synes godt om

kodak Mester

11. november 2010 - 15:29 #24

Og jeg har en afspiller på siden hvordan får jeg den under baggrunden Afspilleren er det eneste der er ovenover baggrunds den transparente baggrund

Synes godt om

Slettet bruger

11. november 2010 - 15:54 #25

JQuery-fri løsning:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><style>
HTML {width:100%;height:100%;}
BODY {width:100%;height:100%;padding:0;margin:0;}
.fullScreen {position:fixed; top:0px; left:0px; width:100%; height:100%; overflow:hidden;}
#baggrund {z-index:1;}
#velkomst {z-index:2;}
</style><script>
function start()
{
document.getElementById("baggrund").style.display = "none"
document.getElementById("velkomst").style.display = "none"
}
</script></head><body>

<img id="baggrund" class="fullScreen" src="baggrund.jpg">

<div id="velkomst" class="fullScreen">
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td align="center" valign="center">
<img src="velkomst.jpg" onclick="start()" title="Klik her, og lad os komme igang">
</td></tr>
</table>
</div>

Selve din side kommer her

</body></html>

Ingen eksterne filer, udover de to billeder: baggrund.jpg og velkomst.jpg

Synes godt om

kodak Mester

11. november 2010 - 16:26 #26

desværre den virker ikke
jo den laver en overlay baggrund stadig bag min afspiller.
Men der kommer ingen Tekst felt frem Eller måske gør der Under afspilleren.

#20 er bedste bud,
Mangler bare lidt rettelser.

Jeg har et billede at en mand der holder et skilt, i skiltet vil jeg have at teksten skal stå.

Synes godt om

Slettet bruger

11. november 2010 - 17:10 #27

Tekst, afspiller - er du startet på et nyt spørgsmål ?

Jeg forstod det som en "splash side" der tager pænt imod folk.
- og så forsvinder (og afslører den bagvedliggende side) når man klikker.

Synes godt om

kodak Mester

11. november 2010 - 17:52 #28

#27 Nej er ikke startet på et nyt.
Jeg detaljere.

Vil gerne undgå rammen i #20

Synes godt om

majbom Novice

11. november 2010 - 19:26 #29

altså nu er det jo ikke mere end 30 linjers css der styler den modal-dialog i #20 - det kræver ikke meget at fjerne rammen og smide et baggrundsbillede ind...

Synes godt om

kodak Mester

11. november 2010 - 20:00 #30

Har prøvet at bytte background-colour ud med background-image
Men så kommer den ikke frem.

Synes godt om

majbom Novice

12. november 2010 - 06:14 #31

hvordan så koden ud til det?

Synes godt om

kodak Mester

12. november 2010 - 12:22 #32



.modalDialog_transparentDivs{    
    filter:alpha(opacity=30);    /* Transparency */
    opacity:0.4;    /* Transparency */
    background-image:url('alert_sign.png');
    position:absolute; /* Always needed    */
}
.modalDialog_contentDiv{
    z-index:100;/* Always needed    */
    position:absolute;    /* Always needed    */
    background-color:#0F1517;    /* White background color for the message */
}
.modalDialog_contentDiv_shadow{
    z-index:90;/* Always needed    - to make it appear below the message */
    position:absolute;    /* Always needed    */
    filter:alpha(opacity=30);    /* Transparency */
    opacity:0.3;    /* Transparency */    
}

Har i '.modalDialog_contentDiv' prøvet med:
background-image:url('sign_man.png');
background-color: transparent;

Men de får begge boxen til at forsvinde helt.

Synes godt om

kodak Mester

13. november 2010 - 14:21 #33

Har du et tip til hvad jeg gør?

Synes godt om

majbom Novice

13. november 2010 - 17:13 #34

ja, jeg kigger på det senere...

Synes godt om

majbom Novice

13. november 2010 - 17:24 #35

det er jo denne der skal baggrundsbillede på:

.modalDialog_contentDiv

Synes godt om

kodak Mester

13. november 2010 - 18:14 #36

Ja det er også den jeg har prøvet på.
den første jeg har ændret baggrund på virkede og er baggrunden der mørkner det hele.

Synes godt om

majbom Novice

13. november 2010 - 18:49 #37

jeg kan sagtens få det til at virke på den, du må gøre noget forkert...

Synes godt om

kodak Mester

13. november 2010 - 19:01 #38

På min hjemme computer i Firefox viser den boxen foran min afspiller.
Men på min brors pc også i firefox gemmer den boxen bag afspilleren.

Så jeg tror på at det virker men den gør det hele bag afspilleren hvordan ændre jeg placering?

min index.php



<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<center>
<body bgcolor="#0F1517" style="margin:0;padding:0"<?php if($_REQUEST['error']) { echo ' onload="displayError(\'includes/' . $_REQUEST['error'] . '.inc\');return false"'; } else if($_REQUEST['message']) { echo ' onload="displayMessage(\'includes/' . $_REQUEST['message'] . '.php\');return false"'; } ?>>
<script type="text/javascript">
AC_FL_RunContent( 'style','display:block','codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','980','height','700','src','23863','allowfullscreen','true','menu','false','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','23863' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="display:block" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="980" height="700">
    <param name="movie" value="flash.swf">
    <param name="quality" value="high">
    <param name="menu" value="false">
    <param name="allowFullScreen" value="true" />
    <embed src="flash.swf" allowFullScreen="true" menu="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="700"></embed>
</object></noscript>

  <link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
    <link rel="stylesheet" href="css/modal-message.css" type="text/css">
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript" src="js/modal-message.js"></script>
    <script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
<script type="text/javascript">
messageObj = new DHTML_modalMessage();    // We only create one object of this class
messageObj.setShadowOffset(5);    // Large shadow


function displayError(url)
{
    
    messageObj.setSource(url);
    messageObj.setCssClassMessageBox(false);
    messageObj.setSize(350,310);
    messageObj.setShadowDivVisible(false);    // Enable shadow for these boxes
    messageObj.display();
}

function displayMessage(url)
{
    
    messageObj.setSource(url);
    messageObj.setCssClassMessageBox(false);
    messageObj.setSize(200,130);
    messageObj.setShadowDivVisible(true);    // Enable shadow for these boxes
    messageObj.display();
    
    
}

function closeMessage()
{
    messageObj.close();    
}


</script>
</center>

Og har prøvet at smide script op i toppen.

Synes godt om

majbom Novice

13. november 2010 - 19:11 #39

det virker underligt at det virker i den ene og ikke den anden...

mit bedste bud er at sætte z-index højere op på modal-boxens styles...

Synes godt om

kodak Mester

13. november 2010 - 19:39 #40

Har sat z-index op på 210

Synes godt om

kodak Mester

13. november 2010 - 19:41 #41

og har prøvet på 500

Synes godt om

majbom Novice

13. november 2010 - 19:57 #42

så kan jeg ikke hjælpe dig...

Synes godt om

kodak Mester

13. november 2010 - 21:38 #43

nu prøver jeg i IE med:

.modalDialog_transparentDivs{
filter:alpha(opacity=30); /* Transparency */
opacity:0.4; /* Transparency */
background-image:url('alert_sign.png');
position:absolute; /* Always needed */
}
.modalDialog_contentDiv{
z-index:500;/* Always needed */
position:absolute; /* Always needed */
background-color: transparent; /* White background color for the message */
}
.modalDialog_contentDiv_shadow{
z-index:500;/* Always needed - to make it appear below the message */
position:absolute; /* Always needed */
filter:alpha(opacity=30); /* Transparency */
opacity:0.3; /* Transparency */
}

Og der forsvinder det grå felt men der er stadig hvid baggrund.

Synes godt om

majbom Novice

15. november 2010 - 09:03 #44

er det ikke i boksen du vil have baggrundsbillede på?

Synes godt om

kodak Mester

15. november 2010 - 18:13 #45

http://line-web.mine.nu/index/?error=404

Jeg har et billede af en mand der holder et skilt i det skilt skal der stå teksten.

Men baggrunden bag manden stal være transparent
D.V.S Som vist bare uden den hvide baggrund bag manden.

Synes godt om

majbom Novice

15. november 2010 - 20:16 #46

sådan her:

http://majbom.com/testarea/exp/923672/

?

Synes godt om

kodak Mester

15. november 2010 - 21:14 #47

Synes godt om

kodak Mester

15. november 2010 - 21:18 #48

dette er div på flash afspilleren:

.flash-film{
z-index:20;
position:absolute;
}

men den vil ikke ned i lag

Synes godt om

kodak Mester

15. november 2010 - 21:48 #49

Har prøvet med z-index:-10;

Synes godt om

kodak Mester

15. november 2010 - 22:10 #50

Har næsten fundet løsningen:
i flash scriptet skal jeg skrive:
<param name="wmode" value="transparent">

Men syntes den er meget transparent.


.modalDialog_transparentDivs{    
    filter:alpha(opacity=40);    /* Transparency */
    opacity:0.4;    /* Transparency */
    background-color:#AAA;
    background-image:url('../alert_sign.png');
    z-index:1;
    position:absolute; /* Always needed    */
}
.modalDialog_contentDiv{
    padding:2px;
    z-index:100;/* Always needed    */
    position:absolute;    /* Always needed    */
    background-image: url('../sign_man.png');
    padding-top: 110px;
    padding-left: 100px;
}
.modalDialog_contentDiv_shadow{
    z-index:90;/* Always needed    - to make it appear below the message */
    position:absolute;    /* Always needed    */
    background-color:#555;
    filter:alpha(opacity=30);    /* Transparency */
    opacity:0.3;    /* Transparency */    
}

Virker i Chrome og Firefox
Men i IE ligner det lort

Synes godt om

majbom Novice

16. november 2010 - 18:58 #51

har du prøvet at ændre opacity på denne:

modalDialog_transparentDivs

?

Synes godt om

kodak Mester

16. november 2010 - 22:57 #52

den er på 0.1

Synes godt om

majbom Novice

22. november 2010 - 10:18 #53

hmm, så ved jeg det sq ikke...

Synes godt om

kodak Mester

22. november 2010 - 19:33 #54

Så må jeg jo leve med det.
Svar!

Synes godt om

majbom Novice

22. november 2010 - 19:42 #55

kommer her...

Synes godt om

majbom Novice

23. november 2010 - 22:25 #56

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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

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