Sujet Précédent Sujet Suivant

Modification lightbox .... bouton close en haut a droite

cs_petardier Messages postés 2 Date d'inscription mercredi 11 février 2009 Statut Membre Dernière intervention 1 mai 2009 - 1 mai 2009 à 13:59
cyril06300 Messages postés 1 Date d'inscription vendredi 26 septembre 2008 Statut Membre Dernière intervention 7 mai 2009 - 7 mai 2009 à 10:34
bonjour,
je souhaite modifier une light box en mettant le bouton close en haut a gauche , plutot qu'en bas.
Ainsi, quand une image est plus grande que la fenetre du navigateur, c'est intuitif pour fermer la lightbox, plutot que faire defiler vers le bas

je ne sais s'il faut modifier la css (j'ai bidouillé sans succès) ou le .css
voici les deux fichiers que j'utilise :

merci pour toute aide
cyril

lightbox.css
#lightbox{

    position: absolute;
    top:0;

    left: 0;

    width: 100%;

    z-index:10004;

    text-align: center;

    line-height: 0;

    }

 
#lightbox a img{

    border: 0;     
     
}

 
#lightbox img{

    margin:0;

    padding:0;

    position: relative;

    border: 0;

}

 
#outerImageContainer{

    position: relative;

    background-color: #fff;

    width: 250px;

    height: 250px;

    margin: 0 auto;

    }

 
#imageContainer{

    padding: 10px;

    }

 
#loading{

    position: absolute;

    top: 40%;

    left: 0%;

    height: 25%;

    width: 100%;

    text-align: center;

    line-height: 0;

    }

#hoverNav{

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    z-index:10004;

    }

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}

 
#prevLink, #nextLink{

    width: 49%;

    height: 100%;

    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */

    display: block;

    }

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

 
 
#imageDataContainer{

    font: 10px Verdana, Helvetica, sans-serif;

    background-color: #fff;

    margin: 0 auto;

    line-height: 1.4em;

    overflow: auto;

    width: 100%     
    }

 
#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }     
#imageData #caption{ font-weight: bold;    }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }             
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;    }   
 
         
#overlay{

    position: absolute;

    top: 0;

    left: 0;

    z-index:10003;

    width: 100%;

    height: 500px;

    background-color: #000;

    }

lightbox.js
var userAgent    = navigator.userAgent.toLowerCase();

var isMSIE        = /msie/.test(userAgent) && !/opera/.test(userAgent)

 
function decode_utf8(utftext) {

    var plaintext = ""; var i=0; var c=c1=c2=0;

    while(i191) && (c<224)) {

            c2 = utftext.charCodeAt(i+1);

            plaintext += String.fromCharCode(((c&31)<<6) | (c2&63));

            i+=2;

        }

        else {
            c2 utftext.charCodeAt(i+1); c3 utftext.charCodeAt(i+2);

            plaintext += String.fromCharCode(((c&15)<<12) | ((c2&63)<<6) | (c3&63));

            i+=3;

        }

       }

    return plaintext;

}

// -----------------------------------------------------------------------------------

//

//    Lightbox v2.03.3

//    by Lokesh Dhakar - http://www.huddletogether.com

//    5/21/06

//

//    For more information on this script, visit:

//    http://huddletogether.com/projects/lightbox2/

//

//    Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/

//

//    Credit also due to those who have helped, inspired, and made their code available to the public.

//    Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), Thomas Fuchs(mir.aculo.us), and others.

//

//

// -----------------------------------------------------------------------------------

/*

 
    Table of Contents

    -----------------

    Configuration

    Global Variables

 
    Extending Built-in Objects

    - Object.extend(Element)

    - Array.prototype.removeDuplicates()

    - Array.prototype.empty()

 
    Lightbox Class Declaration

    - initialize()

    - updateImageList()

    - start()

    - changeImage()

    - resizeImageContainer()

    - showImage()

    - updateDetails()

    - updateNav()

    - enableKeyboardNav()

    - disableKeyboardNav()

    - keyboardAction()

    - preloadNeighborImages()

    - end()

 
    Miscellaneous Functions

    - getPageScroll()

    - getPageSize()

    - getKey()

    - listenKey()

    - showSelectBoxes()

    - hideSelectBoxes()

    - showFlash()

    - hideFlash()

    - pause()

    - initLightbox()

 
    Function Calls

    - addLoadEvent(initLightbox)

 
*/

// -----------------------------------------------------------------------------------

 
//

//    Configuration

//

var fileLoadingImage = "images/loading.gif";

var fileBottomNavCloseImage = "images/closelabel.gif";

 
var overlayOpacity = 0.8;    // controls transparency of shadow overlay

 
var animate = false;            // toggles resizing animations

var resizeSpeed = 7;        // controls the speed of the image resizing animations (1=slowest and 10=fastest)

// modif à 15 (10 a l'origine)

var borderSize = 10;        //if you adjust the padding in the CSS, you will need to update this variable

 
// -----------------------------------------------------------------------------------

 
//

//    Global Variables

//

var imageArray = new Array;

var activeImage;

 
if(animate == true){

    overlayDuration = 0.2;    // shadow fade in/out duration

    if(resizeSpeed > 10){ resizeSpeed = 10;}

    if(resizeSpeed < 1){ resizeSpeed = 1;}

    resizeDuration = (11 - resizeSpeed) * 0.15;

} else {

    overlayDuration = 0;

    resizeDuration = 0;

}

 
// -----------------------------------------------------------------------------------

 
//

//    Additional methods for Element added by SU, Couloir

//    - further additions by Lokesh Dhakar (huddletogether.com)

//

Object.extend(Element, {

    getWidth: function(element) {

           element = $(element);

           return element.offsetWidth;

    },

    setWidth: function(element,w) {

           element = $(element);

        element.style.width = w +"px";

    },

    setHeight: function(element,h) {

           element = $(element);

        element.style.height = h +"px";

    },

    setTop: function(element,t) {

           element = $(element);

        element.style.top = t +"px";

    },

    setLeft: function(element,l) {

           element = $(element);

        element.style.left = l +"px";

    },

    setSrc: function(element,src) {

        element = $(element);

        element.src = src;

    },

    setHref: function(element,href) {

        element = $(element);

        element.href = href;

    },

    setInnerHTML: function(element,content) {

        element = $(element);

        element.innerHTML = content;

    }

});

 
// -----------------------------------------------------------------------------------

 
//

//    Extending built-in Array object

//    - array.removeDuplicates()

//    - array.empty()

//

Array.prototype.removeDuplicates = function () {

    for(i = 0; i < this.length; i++){

        for(j = this.length-1; j>i; j--){

            if(this[i][0] == this[j][0]){

                this.splice(j,1);

            }

        }

    }

}

 
// -----------------------------------------------------------------------------------

 
Array.prototype.empty = function () {

    for(i = 0; i <= this.length; i++){

        this.shift();

    }

}

 
// -----------------------------------------------------------------------------------

 
//

//    Lightbox Class Declaration

//    - initialize()

//    - start()

//    - changeImage()

//    - resizeImageContainer()

//    - showImage()

//    - updateDetails()

//    - updateNav()

//    - enableKeyboardNav()

//    - disableKeyboardNav()

//    - keyboardNavAction()

//    - preloadNeighborImages()

//    - end()

//

//    Structuring of code inspired by Scott Upton (http://www.uptonic.com/)

//

var Lightbox = Class.create();

 
Lightbox.prototype = {

 
    // 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();

 
        // Code inserts html at the bottom of the page that looks similar to this:

        //

        //   



        //   


        //       


        //           


        //               

        //                   

        //               


        //           


        //       


        //       


        //           


        //               


        //                   

        //                   

        //               


        //               


        //                    [#

        //                       

        //                    ]

        //               


        //           


        //       


        //   


 
 
        var objBody = document.getElementsByTagName("body").item(0);

 
        var objOverlay = document.createElement("div");

        objOverlay.setAttribute('id','overlay');

        objOverlay.style.display = 'none';

        objOverlay.onclick = function() { myLightbox.end(); }

        objBody.appendChild(objOverlay);

 
        var objLightbox = document.createElement("div");

        objLightbox.setAttribute('id','lightbox');

        objLightbox.style.display = 'none';

        objLightbox.onclick = function(e) {    // close Lightbox is user clicks shadow overlay

            if (!e) var e = window.event;

            var clickObj = Event.element(e).id;

            if ( clickObj == 'lightbox') {

                myLightbox.end();

            }

        };

        objBody.appendChild(objLightbox);

 
        var objOuterImageContainer = document.createElement("div");

        objOuterImageContainer.setAttribute('id','outerImageContainer');

        objLightbox.appendChild(objOuterImageContainer);

 
        // 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.

        if(animate){

            Element.setWidth('outerImageContainer', 250);

            Element.setHeight('outerImageContainer', 250);

        } else {

            Element.setWidth('outerImageContainer', 1);

            Element.setHeight('outerImageContainer', 1);

        }

 
        var objImageContainer = document.createElement("div");

        objImageContainer.setAttribute('id','imageContainer');

        objOuterImageContainer.appendChild(objImageContainer);

 
        var objLightboxImage = document.createElement("img");

        objLightboxImage.setAttribute('id','lightboxImage');

        objImageContainer.appendChild(objLightboxImage);

 
        var objHoverNav = document.createElement("div");

        objHoverNav.setAttribute('id','hoverNav');

        objImageContainer.appendChild(objHoverNav);

 
        var objPrevLink = document.createElement("a");

        objPrevLink.setAttribute('id','prevLink');

        objPrevLink.setAttribute('href','#');

        objHoverNav.appendChild(objPrevLink);

 
        var objNextLink = document.createElement("a");

        objNextLink.setAttribute('id','nextLink');

        objNextLink.setAttribute('href','#');

        objHoverNav.appendChild(objNextLink);

 
        var objLoading = document.createElement("div");

        objLoading.setAttribute('id','loading');

        objImageContainer.appendChild(objLoading);

 
        var objLoadingLink = document.createElement("a");

        objLoadingLink.setAttribute('id','loadingLink');

        objLoadingLink.setAttribute('href','#');

        objLoadingLink.onclick = function() { myLightbox.end(); return false; }

        objLoading.appendChild(objLoadingLink);

 
        var objLoadingImage = document.createElement("img");

        objLoadingImage.setAttribute('src', fileLoadingImage);

        objLoadingLink.appendChild(objLoadingImage);

 
        var objImageDataContainer = document.createElement("div");

        objImageDataContainer.setAttribute('id','imageDataContainer');

        objLightbox.appendChild(objImageDataContainer);

 
        var objImageData = document.createElement("div");

        objImageData.setAttribute('id','imageData');

        objImageDataContainer.appendChild(objImageData);

 
        var objImageDetails = document.createElement("div");

        objImageDetails.setAttribute('id','imageDetails');

        objImageData.appendChild(objImageDetails);

 
        var objCaption = document.createElement("span");

        objCaption.setAttribute('id','caption');

        objImageDetails.appendChild(objCaption);

 
        var objNumberDisplay = document.createElement("span");

        objNumberDisplay.setAttribute('id','numberDisplay');

        objImageDetails.appendChild(objNumberDisplay);

 
        var objBottomNav = document.createElement("div");

        objBottomNav.setAttribute('id','bottomNav');

        objImageData.appendChild(objBottomNav);

 
        var objBottomNavCloseLink = document.createElement("a");

        objBottomNavCloseLink.setAttribute('id','bottomNavClose');

        objBottomNavCloseLink.setAttribute('href','#');

        objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }

        objBottomNav.appendChild(objBottomNavCloseLink);

 
        var objBottomNavCloseImage = document.createElement("img");

        objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);

        objBottomNavCloseLink.appendChild(objBottomNavCloseImage);

    },

 
 
    //

    // updateImageList()

    // Loops through anchor tags looking for 'lightbox' references and applies onclick

    // events to appropriate links. You can rerun after dynamically adding images w/ajax.

    //

    updateImageList: function() {

        if (!document.getElementsByTagName){ return; }

        var anchors = document.getElementsByTagName('a');

        var areas = document.getElementsByTagName('area');

 
        // loop through all anchor tags

        for (var i=0; i 1){

            Element.show('numberDisplay');

            Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);

        }

 
        new Effect.Parallel(

            [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }),

              new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ],

            { duration: resizeDuration, afterFinish: function() {

                // update overlay size and update nav

                var arrayPageSize = getPageSize();

                Element.setHeight('overlay', arrayPageSize[1]);

                myLightbox.updateNav();

                }

            }

        );

    },

 
    //

    //    updateNav()

    //    Display appropriate previous and next hover navigation.

    //

    updateNav: function() {

 
        Element.show('hoverNav');

 
        // if not first image in set, display prev image button

        if(activeImage != 0){

            Element.show('prevLink');

            document.getElementById('prevLink').onclick = function() {

                myLightbox.changeImage(activeImage - 1); return false;

            }

        }

 
        // if not last image in set, display next image button

        if(activeImage != (imageArray.length - 1)){

            Element.show('nextLink');

            document.getElementById('nextLink').onclick = function() {

                myLightbox.changeImage(activeImage + 1); return false;

            }

        }

 
        this.enableKeyboardNav();

    },

 
    //

    //    enableKeyboardNav()

    //

    enableKeyboardNav: function() {

        document.onkeydown = this.keyboardAction;

    },

 
    //

    //    disableKeyboardNav()

    //

    disableKeyboardNav: function() {

        document.onkeydown = '';

    },

 
    //

    //    keyboardAction()

    //

    keyboardAction: function(e) {

        if (e == null) { // ie

            keycode = event.keyCode;

            escapeKey = 27;

        } else { // mozilla

            keycode = e.keyCode;

            escapeKey = e.DOM_VK_ESCAPE;

        }

 
        key = String.fromCharCode(keycode).toLowerCase();

         if((key 'x') || (key 'o') || (key == 'c') || (keycode == escapeKey)){    // close lightbox

            myLightbox.end();
        } else if((key 'p') || (keycode 37)){    // display previous image

            if(activeImage != 0){

                myLightbox.disableKeyboardNav();

                myLightbox.changeImage(activeImage - 1);

            }
        } else if((key 'n') || (keycode 39)){    // display next image

            if(activeImage != (imageArray.length - 1)){

                myLightbox.disableKeyboardNav();

                myLightbox.changeImage(activeImage + 1);

            }

        }

 
    },

 
    //

    //    preloadNeighborImages()

    //    Preload previous and next images.

    //

    preloadNeighborImages: function(){

 
        if((imageArray.length - 1) > activeImage){

            preloadNextImage = new Image();

            preloadNextImage.src = imageArray[activeImage + 1][0];

        }

        if(activeImage > 0){

            preloadPrevImage = new Image();

            preloadPrevImage.src = imageArray[activeImage - 1][0];

        }

 
    },

 
    //

    //    end()

    //

    end: function() {

        this.disableKeyboardNav();

        Element.hide('lightbox');

        new Effect.Fade('overlay', { duration: overlayDuration});

        showSelectBoxes();

        showFlash();

    }

}

 
// -----------------------------------------------------------------------------------

 
//

// getPageScroll()

// Returns array with x,y page scroll values.

// Core code from - quirksmode.com

//

function getPageScroll(){

 
    var xScroll, yScroll;

 
    if (self.pageYOffset) {

        yScroll = self.pageYOffset;

        xScroll = self.pageXOffset;

    } else if (document.documentElement && document.documentElement.scrollTop){     // Explorer 6 Strict

        yScroll = document.documentElement.scrollTop;

        xScroll = document.documentElement.scrollLeft;

    } else if (document.body) {// all other Explorers

        yScroll = document.body.scrollTop;

        xScroll = document.body.scrollLeft;

    }

 
    arrayPageScroll = new Array(xScroll,yScroll)

    return arrayPageScroll;

}

 
// -----------------------------------------------------------------------------------

 
//

// getPageSize()

// Returns array with page width, height and window width, height

// Core code from - quirksmode.com

// Edit for Firefox by pHaez

//

function getPageSize(){

 
    var xScroll, yScroll;

 
    if (window.innerHeight && window.scrollMaxY) {

        xScroll = window.innerWidth + window.scrollMaxX;

        yScroll = window.innerHeight + window.scrollMaxY;

    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac

        xScroll = document.body.scrollWidth;

        yScroll = document.body.scrollHeight;

    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

        xScroll = document.body.offsetWidth;

        yScroll = document.body.offsetHeight;

    }

 
    var windowWidth, windowHeight;

 
//    console.log(self.innerWidth);

//    console.log(document.documentElement.clientWidth);

 
    if (self.innerHeight) {    // all except Explorer

        if(document.documentElement.clientWidth){

            windowWidth = document.documentElement.clientWidth;

        } else {

            windowWidth = self.innerWidth;

        }

        windowHeight = self.innerHeight;

    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

        windowWidth = document.documentElement.clientWidth;

        windowHeight = document.documentElement.clientHeight;

    } else if (document.body) { // other Explorers

        windowWidth = document.body.clientWidth;

        windowHeight = document.body.clientHeight;

    }

 
    // for small pages with total height less then height of the viewport

    if(yScroll < windowHeight){

        pageHeight = windowHeight;

    } else {

        pageHeight = yScroll;

    }

 
//    console.log("xScroll " + xScroll)

//    console.log("windowWidth " + windowWidth)

 
    // for small pages with total width less then width of the viewport

    if(xScroll < windowWidth){

        pageWidth = xScroll;

    } else {

        pageWidth = windowWidth;

    }

//    console.log("pageWidth " + pageWidth)

 
    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)

    return arrayPageSize;

}

 
// -----------------------------------------------------------------------------------

 
//

// getKey(key)

// Gets keycode. If 'x' is pressed then it hides the lightbox.

//

function getKey(e){

    if (e == null) { // ie

        keycode = event.keyCode;

    } else { // mozilla

        keycode = e.which;

    }

    key = String.fromCharCode(keycode).toLowerCase();

 
    if(key == 'x'){

    }

}

 
// -----------------------------------------------------------------------------------

 
//

// listenKey()

//

function listenKey () {    document.onkeypress = getKey; }

 
// ---------------------------------------------------

 
function showSelectBoxes(){

    var selects = document.getElementsByTagName("select");

    for (i = 0; i != selects.length; i++) {

        selects[i].style.visibility = "visible";

    }

}

 
// ---------------------------------------------------

 
function hideSelectBoxes(){

    var selects = document.getElementsByTagName("select");

    for (i = 0; i != selects.length; i++) {

        selects[i].style.visibility = "hidden";

    }

}

 
// ---------------------------------------------------

 
function showFlash(){

    var flashObjects = document.getElementsByTagName("object");

    for (i = 0; i < flashObjects.length; i++) {

        flashObjects[i].style.visibility = "visible";

    }

 
    var flashEmbeds = document.getElementsByTagName("embed");

    for (i = 0; i < flashEmbeds.length; i++) {

        flashEmbeds[i].style.visibility = "visible";

    }

}

 
// ---------------------------------------------------

 
function hideFlash(){

    var flashObjects = document.getElementsByTagName("object");

    for (i = 0; i < flashObjects.length; i++) {

        flashObjects[i].style.visibility = "hidden";

    }

 
    var flashEmbeds = document.getElementsByTagName("embed");

    for (i = 0; i < flashEmbeds.length; i++) {

        flashEmbeds[i].style.visibility = "hidden";

    }

 
}

 
 
// ---------------------------------------------------

 
//

// pause(numberMillis)

// Pauses code execution for specified time. Uses busy code, not good.

// Help from Ran Bar-On [ran2103@gmail.com]

//

 
function pause(ms){

    var date = new Date();

    curDate = null;

    do{var curDate = new Date();}

    while( curDate - date < ms);

}

/*

function pause(numberMillis) {

    var curently = new Date().getTime() + sender;

    while (new Date().getTime();

}

*/

// ---------------------------------------------------

 
 
 
function initLightbox() { myLightbox = new Lightbox(); }

Event.observe(window, 'load', initLightbox, false);

6 réponses

Réponse 1 / 6
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
1 mai 2009 à 14:04
Bonjour,
y'a que le css, le javascript là ! non ?
alors : sans le html on ne peut rien faire.
certes, ça représente sûrement 325987765214 lignes,
mais quand il faut.....
Cordialement [mon Site] [M'écrire] Bul
0
Réponse 2 / 6
cs_petardier Messages postés 2 Date d'inscription mercredi 11 février 2009 Statut Membre Dernière intervention 1 mai 2009
1 mai 2009 à 15:44
merci pour la reponse
le html est tout simple, il appelle la fonction lightbox par :



ce que je veux modifier, c'est la structure de la lightbox
dans le css, je pense que ca se passe a ce niveau
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;    } 

<!-- Lightbox2 - Start including header stuff -->

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>

<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>

<script src="js/lightbox.js" type="text/javascript"></script>

<!-- Lightbox2 - End including header stuff -->

 
<script language="JavaScript" type="text/javascript" src="imageflow.js"></script>

 
</head>



 



     

   
 

       


            Loading images


           

       


       


         
       

       

       
       

       

       
       

       

       
       

       

       

   


   



   


           



   

   

       
       

        Portfolio
       

        [reception.html 1 ]
        [exterieur.html 2 ]
        [reception.html 3 ]
        [reception.html 4 ]
        [reception.html 5 ]
        [reception.html 6 ]

        [contact.html   contacts ]

       

   




 
 


</html>
0
Réponse 3 / 6
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
1 mai 2009 à 21:19
bonjour
 tui devrait essayer debugbarc'est une extension pour ie qui te permettra de détecte le css concerne car j'ai regarde et j'ai pense comme pour le css vue le nom mais j'ai l'impression que c'est pas ca mais tu peut essayer de le mettre en position absolute ce qui devrait avoir pour effet de le positionner en haut a gauche et voir a retirer le float right
0
Réponse 4 / 6
cs_leris Messages postés 419 Date d'inscription dimanche 31 août 2003 Statut Membre Dernière intervention 19 avril 2010 3
3 mai 2009 à 11:09
Salut,

le html est généré par le script .
voir :

// Code inserts html at the bottom of the page that looks similar to this: (....)

l'image (images/close.gif) est contenue dans un div (id="bottomNav") lui même dans le div de la lightbox

le code qui génère le html:(extrait)

var objBottomNav = document.createElement("div");
objBottomNav.setAttribute('id','bottomNav');
objImageData.appendChild(objBottomNav);

var objBottomNavCloseLink = document.createElement("a");
objBottomNavCloseLink.setAttribute('id','bottomNavClose');
objBottomNavCloseLink.setAttribute('href','#');
objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
objBottomNav.appendChild(objBottomNavCloseLink);

var objBottomNavCloseImage = document.createElement("img");
objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
},

à mon avis ça va pas etre du gateau ...

bon courage.

L.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
3 mai 2009 à 15:25
et le div lui meme est insere dans
objImageData.appendChild(objBottomNav)  miais apparement pour  bottomNav il n'y aurait pas de css il alors il se situe ailleurs
0
Réponse 6 / 6
cyril06300 Messages postés 1 Date d'inscription vendredi 26 septembre 2008 Statut Membre Dernière intervention 7 mai 2009
7 mai 2009 à 10:34
merci ...
c'est un peu obscur pour moi
l'autre solution que j'ai, c'est de rendre toute la lightbox réactive au click, et la fermer quand on click sur l'image
par contre je ne sais pas ou inserer dans le lightbox.js le onclick .....

objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Partie entière d'un nombre
Sniper_Vgaerr -
DeAtHCrAsH -

2 réponses
Redirection par header ou javascript?
Evangun -
Anthomicro -

8 réponses
Rejoignez-nous