jQuery Lightbox op one page website

Status
Niet open voor verdere reacties.

Lexie2408

Gebruiker
Lid geworden
7 jan 2008
Berichten
42
Ik heb voor de website die ik ontwikkel de volgende code gebruikt: http://kyleschaeffer.com/development/lightbox-jquery-css/

Wanneer ik nu de link aanklik wordt wel de lightbox getoond, echter (aangezien ik een one page website maak) in de bovenste div en niet in de div waarop ik deze wil hebben.

Iemand enig idee hoe ik deze op de betreffende div krijg?

Website is te zien op: www.liquigit.nl, link wordt getoond op de derde pagina (Show me the lightbox)

Dank alvast
 
Als je een position: fixed; toe voegt aan je .lightbox klasse dan is hij in ieder geval te zien. Het enige nadeel is dan dat hij wel mee scrollt, maar normaal gesproken moet zo'n lightbox ook over je hele site heen staan. Ik ben bang dit de beste oplossing is die ik je kan bieden. Ok hoop dat je er wat aan hebt. Nette scroll site trouwens :)
 
Je moet het stukje van:

[js]
$('body').append(theShadow);
$('body').append(theLightbox);
[/js]

Veranderen naar:

[js]
$('#slide3').append(theShadow);
$('#slide3').append(theLightbox);
[/js]

Dit stukje staat in je scripts_tests.js bestand in de functie "lightbox".

Dan krijg je als resultaat deze code:
[js]
function lightbox(insertContent, ajaxContentUrl){

// add lightbox/shadow <div/>'s if not previously added
if($('.lightbox').size() == 0){
var theLightbox = $('<div class="lightbox"/>');
var theShadow = $('<div class="lightbox-shadow"/>');
$(theShadow).click(function(e){
closeLightbox();
});
$('#slide3').append(theShadow);
$('#slide3').append(theLightbox);
}

// remove any previously added content
$('.lightbox').empty();

// insert HTML content
if(insertContent != null){
$('.lightbox').append(insertContent);
}

// insert AJAX content
if(ajaxContentUrl != null){
// temporarily add a "Loading..." message in the lightbox
$('.lightbox').append('<p class="loading">Loading...</p>');

// request AJAX content
$.ajax({
type: 'GET',
url: ajaxContentUrl,
success:function(data){
// remove "Loading..." message and append AJAX content
$('.lightbox').empty();
$('.lightbox').append(data);
},
error:function(){
alert('AJAX Failure!');
}
});
}

// move the lightbox to the current window top + 100px
$('.lightbox').css('top', $("#slide3").scrollTop() + 100 + 'px');

// display the lightbox
$('.lightbox').show();
$('.lightbox-shadow').show();

}
[/js]

That does the trick! Resultaat:

2QiN0P0.png
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan