Lightbox/Popup verwenden

Deutsches Forum
1

Hallo zusammen,
ich möchte im Warenkorb die Geschenkverpackung nicht als neue Seite anzeigen lassen, sondern es soll in einem PopUp bzw. einer Lightbox erscheinen. Wie ist das möglich?
Ich verwende das Basic-Theme.
Kann mir jemand weiterhelfen?
Grüße

2

Hi m2,

du kannst ein <div id=“geschenkLayer”> erstellen mit dem CSS Attribut display: none;
und dann einen Link mit folgendem Code versehen:

$(’#geschenkLayer’).fadeIn(‘slow’);

Zum schließen einen Link in der Div Box erstellen mit faceOut();

3

ok. und wie genau binde ich das $(’#geschenkLayer’).fadeIn(‘slow’); in den link ein?

4

Als erstes muss halt das jQuery Framework eingebunden sein, normal ist das bei Oxid standard.

Dann erstellst du einen Link <a onclick="$(’#geschenkLayer’).fadeIn(‘slow’);">Link Titel</a>

und eine Divbox
<div id=“geschenkLayer”><a onclick="$(’#geschenkLayer’).fadeIn(‘slow’);">Layer schließen</a>Bild, Formular oder sowas…</div>

in deiner CSS fügst du folgendes hinzu:
#geschenkLayer {display:none;}

Evtl. auch noch background evtl. positionierung mittels absolute und einen z-index.

5

woher weiss ich dass das framework eingebunden ist? benutze die version 4.5. muss ich vorher noch was aktivieren?
der link, wo die lightbox dann erscheinen soll, ist nämlich inaktiv.

6

Im 4.5 ist es immer drin. Erkennbar im Quelltext an diesem kleinen Block:


    <script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/jquery.min.js"></script> 
<script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/jquery.ui.oxid.js"></script> 
<script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/cloud-zoom.1.0.2.js"></script> 
<script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/countdown.jquery.js"></script> <script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/jquery.jcarousellite.js"></script>
 <script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/jquery.anythingslider.js"></script> 
<script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/superfish/hoverIntent.js"></script> <script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/superfish/supersubs.js"></script> 
<script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/superfish/superfish.js"></script> 
<script type="text/javascript" src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/gui.js"></script>

Was meinst du mit “inaktiv”? Kann man den Link anklicken und etwas passiert oder eben nicht? Wenn es nur die Optik ist, dann kann man die über CSS anpassen.

7

Also im Quellecode sind die Sachen nicht zu finden.
Wie kann ich sie einfügen? Reicht ein Link? Wo mach ich das am Besten in der _header.tpl?
Es passiert nichts, wenn ich auf den Link klicke. Aber klar wenn die Sachen nicht eingebunden sind. Ist davon abhängig, dass ich das BASIC-Theme verwende?

8

Ich würde es aus dem azure-Theme nehmen und in die “_footer.tpl” packen. Header.tpl sollte aber auch funktionieren.

9

also ich hab es jetzt mal soweit geschafft, dass wenn ich auf den link klicke, dass es sich öffnet :slight_smile:

10

es wird jedoch nicht im quelltext übernommen wenn ich es in die _header.tpl oder_footer.tpl einfüge…

11

Super, es klappt so wie ich es mir vorgestellt habe. Danke ChristophH :slight_smile: