Visualizzazione risultati 1 fino 9 di 9

Discussione: Problema con lightbox 2.6

  1. #1
    Guest

    Predefinito Problema con lightbox 2.6

    Ciao ragazzi ,sto provando lightbox 2.6 e mi piace molto,solo che ho dei seri problemi per quanto riguarda sulle modifiche ,avrei voluto cambiare immagine png della chiusura cambiando l'immagine e relativo attributo nel file lightbox.css ma ora mi sposta la freccina di cambio foto di destra giù in basso,per spiegarmi meglio ,ho messo il link,mi dareste una mano?
    vorrei anche sapere se esiste una guida in italiano su come modificarlo,quello che ho trovato in rete sono solo delle versioni precedenti.

    http://babakprov.altervista.org/lightbox.html

  2. #2
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Predefinito

    Il problema è che .lb-prev e .lb-next non riescono a stare sulla stessa riga.
    Ad esempio, se l'immagine è di 100px, lb-prev è di 51px e lb-next anche. 51+51=102, per cui non riescono a stare nei 100px.
    Tutto ciò che devi fare è modificare il file lightbox.css alla riga 111 dove trovi questo:
    Codice:
    .lb-prev, .lb-next {
      width: 49%;
      height: 100%;
      cursor: pointer;
      /* Trick IE into showing hover */
      display: block;
    }
    e cambiare width: 49% con width: 48%.

  3. #3
    Guest

    Predefinito

    Grazie mille luca,sei un grande,e per quanto riguarda quel "X" di chiusura pagina che secondo me è inguardabile?
    Anche la X ha un rapporto dimensioni con altri elementi ?

  4. #4
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Predefinito

    No quello è progettato per stare in basso a destra.
    Vuoi metterlo in alto, cambiare l'immagine o eliminarlo?

  5. #5
    Guest

    Predefinito

    Mi sembra che in alto a destra stia meglio e sia più visibile visto anche l'abitudine dei visitatori che hanno l'icona della chiusura pagina in alto a destra,che ne dici?
    Avevo provato anche a modificare l'immagine png "x" con un altra aggiungendo un "chiudi" ,modificando le dimensioni da 27x27 px a 80x27 solo che se vai a vedere img 4di4 si sposta in basso e non è più allineato bene.

  6. #6
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Predefinito

    Ecco il codice per spostare descrizione e bottone in alto in lightbox.js:
    Codice:
    Lightbox.prototype.build = function() {
      var $lightbox,
        _this = this;
    
      $("<div>", {id: 'lightboxOverlay'}).after
        (
              $('<div/>', {id: 'lightbox'}
              ).append(
    
              $('<div/>', {
                "class": 'lb-dataContainer'
              }).append($('<div/>', {
                "class": 'lb-data'
              }).append($('<div/>', {
                "class": 'lb-details'
              }).append($('<span/>', {
                "class": 'lb-caption'
              }), $('<span/>', {
                "class": 'lb-number'
              })), $('<div/>', {
                "class": 'lb-closeContainer'
              }).append($('<a/>', {
                "class": 'lb-close'
              }).append($('<img/>', {
                src: this.options.fileCloseImage
            })))
     )),
    
              $('<div/>', {"class": 'lb-outerContainer'}).append
              ( $('<div/>', {
                    "class": 'lb-container'
                  }).append($('<img/>', {
                    "class": 'lb-image'
                  }), $('<div/>', {
                    "class": 'lb-nav'
                  }).append($('<a/>', {
                    "class": 'lb-prev'
                  }), $('<a/>', {
                    "class": 'lb-next'
                  })), $('<div/>', {
                    "class": 'lb-loader'
                  }).append($('<a/>', {
                    "class": 'lb-cancel'
                  }).append($('<img/>', {
                    src: this.options.fileLoadingImage
                  }))))
              )
    
    )
        ).appendTo($('body'));
      $('#lightboxOverlay').hide().on('click', function(e) {
        _this.end();
        return false;
      });

  7. #7
    Guest

    Predefinito

    Sei un mostro :)
    Ma prima di combinare dei casini vorrei chiederti una cosa,io nella mia cartella dei file java ho un file di nome "lightbox-2.6.min.js" devo aggiungere il tuo pezzo di codice a questo file? o sostituire tutto col tuo?

  8. #8
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Predefinito

    Dai... oggi sono buono
    Sostituisci l'intero codice di lightbox-2.6.min.js con questo:
    Codice:
    (function(){var e,t,n;e=jQuery;n=function(){function e(){this.fadeDuration=500;this.fitImagesInViewport=true;this.resizeDuration=700;this.showImageNumberLabel=true;this.wrapAround=false}e.prototype.albumLabel=function(e,t){return"Image "+e+" of "+t};return e}();t=function(){function t(e){this.options=e;this.album=[];this.currentImageIndex=void 0;this.init()}t.prototype.init=function(){this.enable();return this.build()};t.prototype.enable=function(){var t=this;return e("body").on("click","a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]",function(n){t.start(e(n.currentTarget));return false})};t.prototype.build=function(){var t=this;e("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div></div>").appendTo(e("body"));this.$lightbox=e("#lightbox");this.$overlay=e("#lightboxOverlay");this.$outerContainer=this.$lightbox.find(".lb-outerContainer");this.$container=this.$lightbox.find(".lb-container");this.containerTopPadding=parseInt(this.$container.css("padding-top"),10);this.containerRightPadding=parseInt(this.$container.css("padding-right"),10);this.containerBottomPadding=parseInt(this.$container.css("padding-bottom"),10);this.containerLeftPadding=parseInt(this.$container.css("padding-left"),10);this.$overlay.hide().on("click",function(){t.end();return false});this.$lightbox.hide().on("click",function(n){if(e(n.target).attr("id")==="lightbox"){t.end()}return false});this.$outerContainer.on("click",function(n){if(e(n.target).attr("id")==="lightbox"){t.end()}return false});this.$lightbox.find(".lb-prev").on("click",function(){if(t.currentImageIndex===0){t.changeImage(t.album.length-1)}else{t.changeImage(t.currentImageIndex-1)}return false});this.$lightbox.find(".lb-next").on("click",function(){if(t.currentImageIndex===t.album.length-1){t.changeImage(0)}else{t.changeImage(t.currentImageIndex+1)}return false});return this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){t.end();return false})};t.prototype.start=function(t){var n,r,i,s,o,u,a,f,l,c,h,p,d;e(window).on("resize",this.sizeOverlay);e("select, object, embed").css({visibility:"hidden"});this.$overlay.width(e(document).width()).height(e(document).height()).fadeIn(this.options.fadeDuration);this.album=[];o=0;i=t.attr("data-lightbox");if(i){p=e(t.prop("tagName")+'[data-lightbox="'+i+'"]');for(s=f=0,c=p.length;f<c;s=++f){r=p[s];this.album.push({link:e(r).attr("href"),title:e(r).attr("title")});if(e(r).attr("href")===t.attr("href")){o=s}}}else{if(t.attr("rel")==="lightbox"){this.album.push({link:t.attr("href"),title:t.attr("title")})}else{d=e(t.prop("tagName")+'[rel="'+t.attr("rel")+'"]');for(s=l=0,h=d.length;l<h;s=++l){r=d[s];this.album.push({link:e(r).attr("href"),title:e(r).attr("title")});if(e(r).attr("href")===t.attr("href")){o=s}}}}n=e(window);a=n.scrollTop()+n.height()/10;u=n.scrollLeft();this.$lightbox.css({top:a+"px",left:u+"px"}).fadeIn(this.options.fadeDuration);this.changeImage(o)};t.prototype.changeImage=function(t){var n,r,i=this;this.disableKeyboardNav();n=this.$lightbox.find(".lb-image");this.sizeOverlay();this.$overlay.fadeIn(this.options.fadeDuration);e(".lb-loader").fadeIn("slow");this.$lightbox.find(".lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption").hide();this.$outerContainer.addClass("animating");r=new Image;r.onload=function(){var s,o,u,a,f,l,c;n.attr("src",i.album[t].link);s=e(r);n.width(r.width);n.height(r.height);if(i.options.fitImagesInViewport){c=e(window).width();l=e(window).height();f=c-i.containerLeftPadding-i.containerRightPadding-20;a=l-i.containerTopPadding-i.containerBottomPadding-110;if(r.width>f||r.height>a){if(r.width/f>r.height/a){u=f;o=parseInt(r.height/(r.width/u),10);n.width(u);n.height(o)}else{o=a;u=parseInt(r.width/(r.height/o),10);n.width(u);n.height(o)}}}return i.sizeContainer(n.width(),n.height())};r.src=this.album[t].link;this.currentImageIndex=t};t.prototype.sizeOverlay=function(){return e("#lightboxOverlay").width(e(document).width()).height(e(document).height())};t.prototype.sizeContainer=function(e,t){var n,r,i,s,o=this;s=this.$outerContainer.outerWidth();i=this.$outerContainer.outerHeight();r=e+this.containerLeftPadding+this.containerRightPadding;n=t+this.containerTopPadding+this.containerBottomPadding;this.$outerContainer.animate({width:r,height:n},this.options.resizeDuration,"swing");setTimeout(function(){o.$lightbox.find(".lb-dataContainer").width(r);o.$lightbox.find(".lb-prevLink").height(n);o.$lightbox.find(".lb-nextLink").height(n);o.showImage()},this.options.resizeDuration)};t.prototype.showImage=function(){this.$lightbox.find(".lb-loader").hide();this.$lightbox.find(".lb-image").fadeIn("slow");this.updateNav();this.updateDetails();this.preloadNeighboringImages();this.enableKeyboardNav()};t.prototype.updateNav=function(){this.$lightbox.find(".lb-nav").show();if(this.album.length>1){if(this.options.wrapAround){this.$lightbox.find(".lb-prev, .lb-next").show()}else{if(this.currentImageIndex>0){this.$lightbox.find(".lb-prev").show()}if(this.currentImageIndex<this.album.length-1){this.$lightbox.find(".lb-next").show()}}}};t.prototype.updateDetails=function(){var e=this;if(typeof this.album[this.currentImageIndex].title!=="undefined"&&this.album[this.currentImageIndex].title!==""){this.$lightbox.find(".lb-caption").html(this.album[this.currentImageIndex].title).fadeIn("fast")}if(this.album.length>1&&this.options.showImageNumberLabel){this.$lightbox.find(".lb-number").text(this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn("fast")}else{this.$lightbox.find(".lb-number").hide()}this.$outerContainer.removeClass("animating");this.$lightbox.find(".lb-dataContainer").fadeIn(this.resizeDuration,function(){return e.sizeOverlay()})};t.prototype.preloadNeighboringImages=function(){var e,t;if(this.album.length>this.currentImageIndex+1){e=new Image;e.src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){t=new Image;t.src=this.album[this.currentImageIndex-1].link}};t.prototype.enableKeyboardNav=function(){e(document).on("keyup.keyboard",e.proxy(this.keyboardAction,this))};t.prototype.disableKeyboardNav=function(){e(document).off(".keyboard")};t.prototype.keyboardAction=function(e){var t,n,r,i,s;t=27;n=37;r=39;s=e.keyCode;i=String.fromCharCode(s).toLowerCase();if(s===t||i.match(/x|o|c/)){this.end()}else if(i==="p"||s===n){if(this.currentImageIndex!==0){this.changeImage(this.currentImageIndex-1)}}else if(i==="n"||s===r){if(this.currentImageIndex!==this.album.length-1){this.changeImage(this.currentImageIndex+1)}}};t.prototype.end=function(){this.disableKeyboardNav();e(window).off("resize",this.sizeOverlay);this.$lightbox.fadeOut(this.options.fadeDuration);this.$overlay.fadeOut(this.options.fadeDuration);return e("select, object, embed").css({visibility:"visible"})};return t}();e(function(){var e,r;r=new n;return e=new t(r)})}).call(this)
    L'ho provato e funziona, controlla anche tu e vedi se è quello che volevi

  9. #9
    Guest

    Predefinito

    Beh che dire ,puoi contrallare se funziona anche sulla mia pagina
    Sei il mio mito,grazie mille :)

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •