z-index in jQuery

Printable View

29-01-2015, 23.39.21
testareasiti

z-index in jQuery

Ciao a tutti,
sto inserendo dentro ad una pagina php una gallery fatta in jquery,e sto trovando alcune difficoltà.

ho una gallery presa da internet, e l'ho posizionata sopra ad un riquadro popup, per dare l'effetto "sospeso sulla pagina",
ma ho un problema con lo zoom..rimane sotto al riquadro che io ho creato nella finestra.
So che il riquadro esiste perché spostando in un angolo l'immagine, appare il riquadro di zoom dell'immagine..
come posso fare per provare ad alzare lo z-index considerando che le istruzione che io manipolo nella pagina sono queste?

//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: '' });
//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;

});
29-01-2015, 23.41.17
miki92

Questo è errato:

Codice:

$('#zoom_03').z-index(1100)

Lo z-index in jQuery si usa con:

Codice:

.css( "zIndex", 1100);

Oppure

Codice:

.zIndex(1100);
29-01-2015, 23.49.33
testareasiti

grazie...provo subito per vedere se è proprio quello il problema...ma credo di si
29-01-2015, 23.53.21
testareasiti

purtroppo non è quello il codice..lo zoom rimane sempre fisso sotto al riquadro di popup.
Idee?
30-01-2015, 00.11.57
dreadnaut

Occhio, l'attributo css e' con il trattino:

Codice:

.css( "z-index", 1100);

mentre il metodo jQuery e' in camelcase come hai scritto sopra

Codice:

.zIndex(1100);

Vedi: http://api.jqueryui.com/zIndex/
30-01-2015, 00.22.56
testareasiti

quindi

$("#zoom_03").css("z-index",1100);
30-01-2015, 00.27.42
testareasiti

Non riesco a capire il motivo per cui, anche modificando tutti gli z-index del file .js relativi al lensflare, quelli delle classi, non riesco a far posizionare sopra quel maledetto riquadro di zoom...
30-01-2015, 00.31.25
karl94

Citazione:

Originalmente inviato da dreadnaut

Occhio, l'attributo css e' con il trattino:

Codice:

.css( "z-index", 1100);

mentre il metodo jQuery e' in camelcase come hai scritto sopra

Codice:

.zIndex(1100);

Vedi: http://api.jqueryui.com/zIndex/

In realtà la documentazione (proprio la pagina che hai riportato) suggerisce di passare al metodo css il nome in camelCase, come indicato da Miki92, ma da uno sguardo veloce del sorgente sembra che in ogni caso la conversione in camelCase venga operata internamente. Quindi dovrebbero essere corrette ambedue le forme.

Citazione:

Originalmente inviato da testareasiti

Non riesco a capire il motivo per cui, anche modificando tutti gli z-index del file .js relativi al lensflare, quelli delle classi, non riesco a far posizionare sopra quel maledetto riquadro di zoom...

Puoi riportare l'indirizzo della pagina in questione?
30-01-2015, 00.57.30
testareasiti

no perchè è in locale..posso pero fare un copia incolla della pagina cosi come l'ho fatta a e dirti dove ho preso il modello di gallery con zoom,,,

La mia pagina (css nella pagina)

Codice:

<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>jQuery elevateZoom Demo</title> <script src='js/jquery-1.8.3.min.js'></script> <script src='js/jquery.elevatezoom.js'></script> <style> /*set a border on the images to prevent shifting*/ #gallery_01 img{ border:2px solid white; z-index:1000; position :relative; padding : 0; margin :430px auto; } /*Change the colour*/ .active img{border:2px solid #333 !important; z-index :1000;} .bordatura{padding : 20px;} #zoom_03{position: relative; margin :430px auto; z-index : 1100; } body{ margin:0 auto; padding:0; text-align:center; background-color:#e6e6e6; } #main{ margin:0 auto; padding:0; background-color:#f7f7f7; /*consiglio sempre di specificare le dimensioni del main*/ width:960px; height:100%; } #contenuto{ width:100%; height:100%; margin:15px auto;} .testo{ margin:20px; width:90%;} #torna{ float:right; width:50%; height:120px; font-size:24px; margin-top:30px; } .apri{ font-size:18px; font-family:Verdana, Geneva, sans-serif; float:right; margin-right:50px;} .apri:hover{ font-size:22px; font-family:Verdana, Geneva, sans-serif; cursor:pointer;} .chiudi{ font-size:18px; color:#000; font-weight:bold; position:absolute; right:2%; top:0%; cursor:pointer;} .overlay{ background:#000; position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:100; cursor:pointer; /*Trasperenza cross browser*/ opacity: .7; filter: alpha(opacity=70); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } #box{ width:850px; height:600px; background-color:#FFF; display:none; z-index:300; position:relative; top:100px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin : 0 auto;} hr { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #CCCCCC; border-right: 0 solid #CCCCCC; border-style: solid; border-width: 1px 0 0; width:60%} </style> </head> <body> <div id="main"> <p class="apri"> » APRI L'OVERLAY</p> </div> <div class="overlay" id="overlay" style="display:none;"></div> <div id="box">  <div class="bordatura"> <img id="zoom_03" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg" style="z-index : 1100;"/> </div> <div id="gallery_01"> <a href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg"><img id="zoom_03" src="images/thumb/image1.jpg" /></a> <a href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg"><img id="zoom_03" src="images/thumb/image2.jpg" /></a> <a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg"><img id="zoom_03" src="images/thumb/image3.jpg" /></a> <a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg"><img id="zoom_03" src="images/thumb/image4.jpg" /></a> </div>  <p class="chiudi">X</p> </div> <script> $(document).ready(function() { $(".apri").click( function(){ $('#overlay').fadeIn('fast'); $('#box').fadeIn('slow'); }); $(".chiudi").click( function(){ $('#overlay').fadeOut('fast'); $('#box').hide(); }); //chiusura emergenza $("#overlay").click( function(){ $(this).fadeOut('fast'); $('#box').hide(); }); }); //initiate the plugin and pass the id of the div containing gallery images $("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: '' }); //pass the images to Fancybox $("#zoom_03").bind("click", function(e) { var ez = $('#zoom_03').data('elevateZoom'); $.fancybox(ez.getGalleryList()); return false; }); $("zoom_03").css("z-index", 1100); </script> </body> </html>

il sito dove ho preso la gallery..
il modello è quello con la gallery e lo zoom incorporato (Gallery & Lightbox)

http://www.elevateweb.co.uk/image-zoom/examples
30-01-2015, 01.01.32
karl94

Non lo potresti caricare un attimo sul tuo spazio web (con almeno qualche immagine e tutti gli script)?
30-01-2015, 01.21.40
testareasiti

ok..

vai qui

http://testareasiti.altervista.org/p...-%20Copia.html
30-01-2015, 11.38.39
karl94

Applica all'elemento .zoomContainer uno z-index maggiore o uguale a quello di #box.
30-01-2015, 12.32.24
testareasiti

ho provato e funziona...sono i debito karl...grazie.

l'altra notte sono stato sino alle 4 del mattino per cercare di capire cosa fosse...ho letto tutto il codice, modificato css, spulciato riga per riga tutto il file .js..."lens". "z-index", "zoom"..le ho provate tutte..ma mi è sfuggita "zoomContainer"...

Grazie mille.