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);*/
}
});