Lightbox-Effekt: Link + Hintergrund verdunkeln + Galerie

black-hat · 27.08.2011

Hallo Leute. Ich habe da mal eine Frage...

Jeder kennt doch den sog. "Lightbox"-Effekt. Also jenen effekt, dass, wenn man auf einen Bild klickt, der Huntergrund sich verdunkelt und das Bild in groß erscheint.

In diesem Sinne, möchte ich folgendes in meiner HP einbauen...

Uploaded with

im optimalen Sinne, würde das so, wie im oberen Screen aussehen...

Und jetzt kommt die frage, wie ich mir das Vorstelle...

-> Auf der Homepage ist ein normaler Textlink der sich "Photoshop" nennt.
-> Klickt man auf den Link, wird der Hintergrund schwarz und die Galerie erscheint (gewünschte Galerie, die eingebaut werden soll: )
-> Klickt man auf das X oder drückt Escape, wird das Fenster wieder geschlossen.

Frage: Wie mache ich das?

cebito · 27.08.2011

AW: Lightbox-Effekt: Link + Hintergrund verdunkeln + Galerie

Schau mal hier die externe (oder interne) Seite könnte deine Galerie sein...

black-hat · 31.08.2011

AW: Lightbox-Effekt: Link + Hintergrund verdunkeln + Galerie

x.x Also ich habe mal folgendes probiert:

-> Ich habe ganz stumpf von der Beispielseite () den Quelltext kopiert und nur lediglich den Link () bei den Links eingefügt... und passieren tut nichts... habe ich was übersehen?

HTML:

<!DOCTYPE html>

<html>

<!--
    This is a jQuery Tools standalone demo. Feel free to copy/paste.
                                                             
    http://flowplayer.org/tools/demos/
    
    Do *not* reference CSS files and images from flowplayer.org when in production  

    Enjoy!
-->

<head>
    <title>jQuery Tools standalone demo</title>

    <!-- include the Tools -->
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

     

    <!-- standalone page styling (can be removed) -->
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>    


    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-apple.css"/>
    
    <style>
    
    /* use a semi-transparent image for the overlay */
    #overlay {
        background-image:url(http://static.flowplayer.org/img/overlay/transparent.png);
        color:#efefef;
        height:800px;
    }
    
    /* container for external content. uses vertical scrollbar, if needed */
    div.contentWrap {
        height:800px;
        overflow-y:auto;
    }
    </style>
    
</head>

<body>

<!-- external page is given in the href attribute (as it should be) -->
<a href="http://www.twospy.com/galleriffic/example-2.html" rel="#overlay" style="text-decoration:none">

    <!-- remember that you can use any element inside the trigger -->
    <button type="button">Show external page in overlay</button>    
</a>


<!-- overlayed element -->

<div class="apple_overlay" id="overlay">

    <!-- the external content is loaded inside this tag -->
    <div class="contentWrap"></div>

</div>

<!-- make all links with the 'rel' attribute open overlays -->
<script>

$(function() {

    // if the function argument is given to overlay,
    // it is assumed to be the onBeforeLoad event listener
    $("a[rel]").overlay({

        mask: 'darkred',
        effect: 'apple',

        onBeforeLoad: function() {

            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");

            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        }

    });
});
</script>

</body>

</html>