Bonjour,
Je dois insérer une bannière de publicité sous l'image qu'affiche la Lighbox. Pour ce faire, j'ai décidé de créer dynamiquement cette publicité à l'aide de DOM, directement dans le fichier lighbox.js, au sein de la fonction initialize(). Voici cette fonction modifiée (du moins la partie que j'ai modifié) :
Sous Firefox, cela marche parfaitement. En revanche sous IE (je n'ai testé que le 7), la lightbox ne s'ouvre même plus et IE rapporte une erreur.
En fait, la seule construction de la publicité (sans insertion dans l'élément portant l'ID 'lightbox') cause l'erreur... Pensant que cela provenait du fait que des iframes étaient employées, j'ai fait la même chose avec <object></object> comme cela est expliqué dans la FAQ. Sans succès.
A l'aide !
Merci d'avance.
Modifié par kalipka (02 Jun 2008 - 13:15)
Je dois insérer une bannière de publicité sous l'image qu'affiche la Lighbox. Pour ce faire, j'ai décidé de créer dynamiquement cette publicité à l'aide de DOM, directement dans le fichier lighbox.js, au sein de la fonction initialize(). Voici cette fonction modifiée (du moins la partie que j'ai modifié) :
// initialize()
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
this.updateImageList();
this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;
this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
// If animations are turned off, it will be hidden as to prevent a flicker of a
// white 250 by 250 box.
var size = (LightboxOptions.animate ? 250 : 1) + 'px';
// Code inserts html at the bottom of the page that looks similar to this:
//
// <div id="overlay"></div>
// <div id="lightbox">
// <div id="outerImageContainer">
// <div id="imageContainer">
// <img id="lightboxImage">
// <div style="" id="hoverNav">
// <a href="#" id="prevLink"></a>
// <a href="#" id="nextLink"></a>
// </div>
// <div id="loading">
// <a href="#" id="loadingLink">
// <img src="images/loading.gif">
// </a>
// </div>
// </div>
// </div>
// <div id="imageDataContainer">
// <div id="imageData">
// <div id="imageDetails">
// <span id="caption"></span>
// <span id="numberDisplay"></span>
// </div>
// <div id="bottomNav">
// <a href="#" id="bottomNavClose">
// <img src="images/close.gif">
// </a>
// </div>
// </div>
// </div>
// </div>
var objBody = $$('body')[0];
// AJOUT ---------- Construction de la publicité -----
var div=document.createElement('div');
div.setAttribute('id','pub_overlay');
var iframe=document.createElement('iframe');
iframe.setAttribute('src','http://lien_vers_pub');
iframe.setAttribute('width','468');
iframe.setAttribute('height','60');
iframe.setAttribute('hspace','0');
iframe.setAttribute('vspace','0');
iframe.setAttribute('frameBorder','0');
iframe.setAttribute('marginHeight','0');
iframe.setAttribute('marginWidth','0');
iframe.setAttribute('scrolling','no');
var a=document.createElement('a');
a.setAttribute('href','http://lien_vers_pub');
a.setAttribute('target','_blank');
var img=document.createElement('img');
img.setAttribute('width','468');
img.setAttribute('height','60');
img.setAttribute('src','http://lien_vers_pub');
img.setAttribute('border','0');
a.appendChild(img);
iframe.appendChild(a);
div.appendChild(iframe);
// FIN AJOUT ---------- ** ------
objBody.appendChild(Builder.node('div',{id:'overlay'}));
objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
Builder.node('div',{id:'outerImageContainer'},
Builder.node('div',{id:'imageContainer'}, [
Builder.node('img',{id:'lightboxImage'}),
Builder.node('div',{id:'hoverNav'}, [
Builder.node('a',{id:'prevLink', href: '#' }),
Builder.node('a',{id:'nextLink', href: '#' })
]),
Builder.node('div',{id:'loading'},
Builder.node('a',{id:'loadingLink', href: '#' },
Builder.node('img', {src: LightboxOptions.fileLoadingImage})
)
)
])
),
Builder.node('div', {id:'imageDataContainer'},
Builder.node('div',{id:'imageData'}, [
Builder.node('div',{id:'imageDetails'}, [
Builder.node('span',{id:'caption'}),
Builder.node('span',{id:'numberDisplay'})
]),
Builder.node('div',{id:'bottomNav'},
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
)
)
])
)
]));
// AJOUT ---------- Insertion de la publicité sous la lightbox -----
document.getElementById('lightbox').appendChild(div);
// FIN AJOUT ---------- ** -----
Sous Firefox, cela marche parfaitement. En revanche sous IE (je n'ai testé que le 7), la lightbox ne s'ouvre même plus et IE rapporte une erreur.
En fait, la seule construction de la publicité (sans insertion dans l'élément portant l'ID 'lightbox') cause l'erreur... Pensant que cela provenait du fait que des iframes étaient employées, j'ai fait la même chose avec <object></object> comme cela est expliqué dans la FAQ. Sans succès.
A l'aide !
Merci d'avance.
Modifié par kalipka (02 Jun 2008 - 13:15)