z-index in jQuery

**testareasiti** · 29-01-2015, 23.39.21

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;

});

**miki92** · 29-01-2015, 23.41.17

Questo è errato:

Codice:

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

Lo z-index in jQuery si usa con:

Codice:

.css( "zIndex", 1100);

Oppure

Codice:

.zIndex(1100);

**testareasiti** · 29-01-2015, 23.49.33

grazie...provo subito per vedere se è proprio quello il problema...ma credo di si

**testareasiti** · 29-01-2015, 23.53.21

purtroppo non è quello il codice..lo zoom rimane sempre fisso sotto al riquadro di popup.
Idee?

**dreadnaut** · 30-01-2015, 00.11.57

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/

**testareasiti** · 30-01-2015, 00.22.56

quindi

$("#zoom_03").css("z-index",1100);

**testareasiti** · 30-01-2015, 00.27.42

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

**karl94** · 30-01-2015, 00.31.25

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.

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?

**testareasiti** · 30-01-2015, 00.57.30

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"> &raquo; APRI L'OVERLAY</p>



</div>
<div class="overlay" id="overlay" style="display:none;"></div><!--Overlay non toccare!-->

<div id="box">
	<!--  riquadro gallery-->
		<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>

		<!-- fine riquadro gallery -->
		<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

**karl94** · 30-01-2015, 01.01.32

Non lo potresti caricare un attimo sul tuo spazio web (con almeno qualche immagine e tutti gli script)?

**testareasiti** · 30-01-2015, 01.21.40

ok..

vai qui

http://testareasiti.altervista.org/p...-%20Copia.html

**karl94** · 30-01-2015, 11.38.39

Applica all'elemento .zoomContainer uno z-index maggiore o uguale a quello di #box.

**testareasiti** · 30-01-2015, 12.32.24

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.

Discussione: z-index in jQuery

LinkBack

Strumenti discussione

Display

z-index in jQuery

Regole di scrittura