Lightbox mit anklickbaren Elementen

  • Hallo liebe Leute,


    bin neu hier und hoffe, dass jemand helfen kann, habe schon etliche Scripte /Posts auch in anderen Seiten durchsucht, aber leider noch nicht so ganz fündig geworden
    es geht um Folgendes: In einem einfachen Lightbox-Script sollen anklickbare Elemente funktionieren
    z. B. ein Schließen-Element und ein Rahmen (der schon integriert ist und diplay:none hat), der per Click oder Mouseover auf ein daneben liegendes <span class="rahmen"> über dem Bild erscheint, das in der Lightbox geladen wurde
    Die Funktionen habe ich alle hinbekommen, allerdings nur wenn ich sie per Lightbox anspreche oder nur beim ersten Mal per Element. Die darin liegenden Elemente kann ich zwar manipulieren aber nicht anklickbar machen.
    (als Event-Handler(?) nennt man das so?) Sorry, ich habe nicht so die Mega-Ahnung, lerne aber gerne dazu. Habe auch schon mit Variablen experimentiert, bekomme es aber nicht hin derzeit
    Hier das Script:
    //-----------lightbox img------------------------------
    $('.imglightbox_trigger').on("click", function(e) {
    e.preventDefault();
    var image_href = $(this).attr("href");
    var titeltext = $(this).attr("title");
    var maxheightvalue = $("#lightboxi").height -60;
    var rasp=$(".rahmensp").html('<img src="rahmenk.gif" width="586" height="790" alt="Unikatrahmen für ölgemälde" class="rahmenbild" />');
    var maxheightvalue2 = $(".rahmensp").height -10;
    $("#lightboxi img").css("max-height", maxheightvalue + "px");
    $(".rahmensp img").css("max-height", maxheightvalue2 + "px");
    if ($('#lightboxi').length > 0) {
    $('#contentlbi').html('<span class="hide_lb" title="schließen"><span class="x">X</span></span>'
    +'<img src="' + image_href + '" /> <span class="titext">' + titeltext + '</span>' + '<span class="rahmen">Ansicht mit Rahmen durch Mouseover</span>' + '<span class="rahmensp"><img src="rahmenk.gif" width="586" height="790" alt="Unikatrahmen für ölgemälde" class="rahmenbild" /></span>');
    $('#lightboxi').fadeIn(770);
    }
    else {
    var lightboxi =
    '<div id="lightboxi">' +
    '<span class="hide_lb" title="schließen"><span class="x">X</span></span>'+
    '<div id="contentlbi">' + //insert clicked link's href into src
    '<img src="' + image_href + '" /> <span class="titext">' + titeltext + '</span>' +
    '<span class="rahmen">Ansicht mit Rahmen durch Mouseover</span>' + '<span class="rahmensp"><img src="rahmenk.gif" width="586" height="790" alt="Unikatrahmen für ölgemälde" class="rahmenbild" /> </span>' +
    '</div>' +
    '</div>';
    $('body').append(lightboxi);


    var lightboxi = this;
    this.$lightboxi = $('#lightboxi');
    this.$rahmensp = this.$lightboxi.find('.rahmensp');
    //so funzt es nur einmal
    $('#lightboxi:has(img)').find("span.rahmen").mousemove(function() {
    /* $('.rahmen').on('mousemove', function(e) {
    e.preventDefault();*/
    var rasp=$(".rahmensp");
    var rasp=$(".rahmensp").html('<img src="rahmenk.gif" width="586" height="790" alt="Unikatrahmen für ölgemälde" class="rahmenbild" />');
    var maxheightvalue2 = $(".rahmensp").height -10;
    if(/* $(rasp).css('display') == "block" && */ $('.rahmensp').length > 0) {
    $(".rahmensp").html('<img src="rahmenk.gif" width="586" height="790" alt="Unikatrahmen für ölgemälde" class="rahmenbild" />');
    $(rasp).fadeIn(300);
    $('#lightboxi img').css({"margin": "6.3em auto", "max-height": "593px"});
    $('.rahmen img').css({"margin": "2.9em auto", "max-height": "213px"});
    } else {
    var rasp = '<span class="rahmensp">'+ rasp + '</span>';


    }
    $('#contentlbi').append(rasp);
    });


    /* so funzt es alles aber nur per lightbox und nicht per element drin
    $('#lightboxi').mousemove(function() {
    $('.x').addClass("rotatex");
    $('.rahmensp').fadeIn(300);
    $('#lightboxi img').css({"margin": "6.3em auto", "max-height": "593px"});
    $('.rahmen img').css({"margin": "2.9em auto", "max-height": "213px"});
    });
    */
    $('#lightboxi').click(function() {
    //$('.x').click(function() {
    $('#lightboxi').fadeOut(300);
    });
    $(".hide_lb").click(function(){
    $("#lightbox").hide(700);
    });
    /* $('.rahmen').mousemove(function() {
    $( ".rahmensp" ).fadeIn( 1200, function(){ $( ".rahmensp").text("Hoppla jetzt komm ich." );} );
    });
    $("#lightboxi").find("span.rahmensp").fadeIn(300);*/
    }


    });

  • Ich weiß nicht, wie es anderen geht, aber mir ist es zu viel, den gesamten Code durchzugehen. Kannst Du deine Frage für ein Element mal präziser machen: Welches Element soll geklickt werden? Was soll dann passieren? Mit welchem Element? Was meinst Du mit "per lightbox" funktioniert es?
    Hast Du kein fertiges Skript gefunden, das deine Anforderungen erfüllt?
    Hilfreich wäre es auch, wenn dein Code eingerückt wäre.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!