Menu
Hi all,
How do you add HTML content to a jQuery lightbox? Please note I do not want a plugin I need to see the code that actually puts the HTML into the lightbox.
Any help much appreciated.
[CODE]<html>
<head>
<title></title>
<style type="text/css">
#overlay
{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:black no-repeat scroll center center;
}
#lightbox {
position:absolute;
height: 200px; width: 300px;
background-color: blue;
color: yellow;
font-size: 300%;
}
</style>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/JavaScript">
$(document).ready(function () {
$('a.help').click(function (e) {
$('body').css('overflow-y', 'hidden'); // hide scrollbars!
$('<div id="overlay"></div>')
.css('top', $(document).scrollTop())
.css('opacity', '0')
.animate({ 'opacity': '0.5' }, 'slow')
.appendTo('body');
$('<div id="lightbox">')
.hide()
.appendTo('body');
$('<div>').text('test test test test test')
.load(function () {
positionLightboxImage();
})
.click(function () {
removeLightbox();
})
.appendTo('#lightbox')
return false;
});
});
function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn();
}
function removeLightbox() {
$('#overlay, #lightbox')
.fadeOut('slow', function () {
$(this).remove();
$('body').css('overflow-y', 'auto'); // show scrollbars!
});
}
</script>
</head>
<body>
<a href="#" class="help">LightBox Effect</a>
</body>
</html>
[/CODE][code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Diaporama</title>
<style type="text/css">
body{padding:0;font:16px/24px Garamond;text-align:center;background:#ddd}
h1 {font-size:20px;margin:20px auto;padding:0}
#cdr {margin:20px auto;position:relative;width:130px;height:130px;background:transparent;border:1px solid black;overflow:hidden}
ul {position:relative;margin:0;padding:0;top:0;left:0;width:780px;height:130px;list-style-type:none;}
img {display:block;border:0;margin:0px;width:130px;height:30px;}
li {float:left;display:inline;width:130px;}
</style>
</head>
<body>
<h1>Schema de principe du diaporama</H1>
<div id="cdr">
<ul id="dia">
<li><img src="image1.gif" alt="1ére image n°0"><p>L'image peut être assortie d'une légende</p></li>
<li><img src="image2.gif" alt="2ème image n°1"></li>
<li><img src="image3.gif" alt="3ème image n°2"><p>Avec retour initial par reprise invisible</p></li>
<li><img src="image4.gif" alt="4ème image n°3"></li>
<li><img src="image1.gif" alt="1ére image n°4"><p>L'image peut être assortie d'une légende (bis)</p></li>
</ul>
</div>
<div id="idt"></div>
<a href="javascript:clearTimeout(tmt);okd=0;avc()" title="Afficher l'image suivante">Image suivante</a>
<a href="javascript:dpr(okd=!okd)" title="Lancer ou arrêter le diaporama">Diaporama</a>
<a href="javascript:cch()" title="Montrer ou cacher le mécanisme">Accès aux coulisses</a>
<script type="text/javascript">
/* Variables
lrg la largeur des images à reprendre pour le cadre cdr et
le container ul en la multipliant par le nombre d'image plus une (reprise de la première)
dlt le déplacement élémentaire
okd un booléen pour le diaporama : 0 arrêt 1 marche
tmt le setTimeout du diaporama
*/
var lrg=130,dlt=9,okd=0,tmt=0,nbi=4;
// lance le défilement pour afficher l'image suivante
function avc(){
// le décallage des images par rapport à la position initiale (ul est en position relative)
// que l'on décrémente tout de suite de dlt
var a=document.getElementById('dia').offsetLeft-dlt,b=a,n=0;
// le nombre de largeur d'images à ajouter pour trouver un nombre positif
// donne le numéro de l'image n et le chemin restant à parcourir b
while (b<0) {b+=lrg;n++}
// On déplace l'image
document.getElementById('dia').style.left=a+'px';
// et recommence après 20 millisecondes tant que le chemin
// restant à parcourir est supérieur à dlt
if (dlt<b-dlt) setTimeout('avc()',20);
// sinon on place l'image à venir
else {document.getElementById('dia').style.left=-lrg*n+'px';
// Retour à l'image initiale
if (n==nbi) document.getElementById('dia').style.left=0+'px'}
}
// Lance ou arrête le Diaporama
function dpr(){// okd est inversé lors de l'appel
// si oui on relance au bout de 2000 millisecondes
if (okd) {avc();tmt=setTimeout(dpr,2000)}
// sinon on tue le compteur
else clearTimeout(tmt);
}
// Récupérer le style d'un élément même s'il n'est pas défini dans le DOM
function getStyle(el,styleProp) {var x=document.getElementById(el),y;
if (x.currentStyle) y=x.currentStyle[styleProp];
else if (window.getComputedStyle) y=document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}
function cch(){var d=document.getElementById('cdr');
// Bascule pour limiter la visibilité au cadre ou au contraire rendre les dévbordements visibles
if (getStyle('cdr','overflow')!='visible') d.style.overflow='visible';
else d.style.overflow='hidden';
}
</script>
</body>
</html>[/code]0.1.9 — BETA 5.18