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

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%. :wink:

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 ?

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

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.

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;
  });

---

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?

Dai... oggi sono buono :=D:
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 :wink:

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