Søg
Avatar billede 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?
Avatar billede bkp Nybegynder
10. november 2010 - 19:59 #1
Hvilken lightbox er det?
Er det en jQuery plugin?
Avatar billede 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.
});
Avatar billede 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.
});
Avatar billede kodak Mester
10. november 2010 - 20:12 #4
http://www.lokeshdhakar.com/projects/lightbox2/
Avatar billede kodak Mester
10. november 2010 - 20:27 #5
det skal ikke være et galleri det skal kun være et billede.
Avatar billede 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();">
Avatar billede kodak Mester
10. november 2010 - 20:48 #7
bare sådan skal der være noget i ()?
Avatar billede 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.
Avatar billede kodak Mester
10. november 2010 - 20:56 #9
Jeg ønsker ikke 100 filer til en funktion.
Avatar billede 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.
Avatar billede 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.
Avatar billede 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>
Avatar billede 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

;-)
Avatar billede 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..
Avatar billede 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/
Avatar billede kodak Mester
10. november 2010 - 21:37 #16
den skal bare åbne onload prøver med jQuery
Avatar billede kodak Mester
10. november 2010 - 21:51 #17
http://line-web.mine.nu/start/
Avatar billede 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!
Avatar billede 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="">
Avatar billede 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)
Avatar billede kodak Mester
11. november 2010 - 12:06 #21
#20 Yes noget der virker førstegang.
Avatar billede majbom Novice
11. november 2010 - 12:15 #22
;0)

svartid?
Avatar billede 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?
Avatar billede 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
Avatar billede 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
Avatar billede 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å.
Avatar billede 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.
Avatar billede kodak Mester
11. november 2010 - 17:52 #28
#27 Nej er ikke startet på et nyt.
Jeg detaljere.

Vil gerne undgå rammen i #20
Avatar billede 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...
Avatar billede 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.
Avatar billede majbom Novice
12. november 2010 - 06:14 #31
hvordan så koden ud til det?
Avatar billede 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.
Avatar billede kodak Mester
13. november 2010 - 14:21 #33
Har du et tip til hvad jeg gør?
Avatar billede majbom Novice
13. november 2010 - 17:13 #34
ja, jeg kigger på det senere...
Avatar billede majbom Novice
13. november 2010 - 17:24 #35
det er jo denne der skal baggrundsbillede på:

.modalDialog_contentDiv
Avatar billede 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.
Avatar billede majbom Novice
13. november 2010 - 18:49 #37
jeg kan sagtens få det til at virke på den, du må gøre noget forkert...
Avatar billede 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.
Avatar billede 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...
Avatar billede kodak Mester
13. november 2010 - 19:39 #40
Har sat z-index op på 210
Avatar billede kodak Mester
13. november 2010 - 19:41 #41
og har prøvet på 500
Avatar billede majbom Novice
13. november 2010 - 19:57 #42
så kan jeg ikke hjælpe dig...
Avatar billede 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.
Avatar billede majbom Novice
15. november 2010 - 09:03 #44
er det ikke i boksen du vil have baggrundsbillede på?
Avatar billede 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.
Avatar billede majbom Novice
15. november 2010 - 20:16 #46
sådan her:

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

?
Avatar billede kodak Mester
15. november 2010 - 21:14 #47
ja
Avatar billede 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
Avatar billede kodak Mester
15. november 2010 - 21:48 #49
Har prøvet med z-index:-10;
Avatar billede 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
Avatar billede majbom Novice
16. november 2010 - 18:58 #51
har du prøvet at ændre opacity på denne:

modalDialog_transparentDivs

?
Avatar billede kodak Mester
16. november 2010 - 22:57 #52
den er på 0.1
Avatar billede majbom Novice
22. november 2010 - 10:18 #53
hmm, så ved jeg det sq ikke...
Avatar billede kodak Mester
22. november 2010 - 19:33 #54
Så må jeg jo leve med det.
Svar!
Avatar billede majbom Novice
22. november 2010 - 19:42 #55
kommer her...
Avatar billede majbom Novice
23. november 2010 - 22:25 #56
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
Kategori
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
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
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
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
06/0419:53 installer mange programmer på en gang Af Overgaard1654 i Andet software
06/0417:48 Min hp Officejet pro 7740 skærer det nederste af billedet i word Af rosmarin i Printere
06/0413:13 Batch OCR Af KurtG i Billedbehandling
06/0410:42 AI integreret i Access Af per2edb i Access
04/0409:43 AI google.com Af Peter Olsen i Andre onlineløsninger
White papers
Flere white papers »