Tooltip esce fuori dalla pagina

[mest_suc]

Salve a tutti ragazzi.. rieccomi con un nuovo problema, di cui non ne sto venendo fuori.

Ho scaricato uno script, che crea un tooltip con una immagine di preview. Tutto bene fino ad adesso. Il problema sorge quando il tooltip "sborda" dalla mia pagina web.
Mi spiego meglio:
ho una pagina piena di fotografie tutte ordinate come fosse una tabella; quando mi posiziono con il cursore su di una fotografia, mi si apre il tooltip con l'anteprima ingrandita dell'immagine sulla destra del cursore. Il problema però è, che quando mi posiziono su una fotografia impostata sulla destra della pagina, il tooltip "sborda" sulla destra, quindi non riesco a vedere l'anteprima. Vorrei che il tooltip delle fotografie sulla destra, mi si aprisse sulla sinistra, in modo tale da vederla.

Posto qui lo script trovto in rete:

/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easies...w-using-jquery
 *
 */
 
this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 15;
		yOffset = -0;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "
" + this.t : "";
		$("body").append("<p id='preview'>[img]"+ this.href +"[/img]"+ c +"</p>");								 
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("slow");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	imagePreview();
});

Qualcuno saprebbe aiutarmi? grazie mille anticipatamente.

Ivano

[cavicchiandrea]

Da quanto leggo lo script non fa la tabulazione (disposizione delle foto x riga) pertanto no saprà quale è l'ultima foto sulla destra.
L'operazione più semplice è accorciare la disposizione per riga (es: da 4 a 3).

[mest_suc]

Grazie mille per la risposta.
Facendo come dici tu (posso dati del tu?),non avrò un lavoro ordinato. Nel senso che se tolgo l'ultima colonna di destra, mi verrebbe tutto spostato sulla sinistra, senza avere una pagina centrata.. se non esistono altre soluzioni, mi sa che dovrò riorganizzarmi il lavoro..
Grazie ancora per la risposta. Buon Pomeriggio.

Ivano

[cavicchiandrea]

Nessun problema per il tu, mentre per lo spostamento sulla sinistra dipende dalla layout della pagina se tieni il contenitore delle foto centrato il problema non sussiste, altre soluzioni (se esistono) probabilmente sono più complesse.

[Xinod]

con qualche modifica diciamo che te la cavi,
anche se resta imperfetto per svariati motivi che non ho tempo di spiegarti

/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easies...w-using-jquery
 *
 */
 
this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 20;
		yOffset = -20;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "
" + this.t : "";
		$("body").append("<p id='preview'>[img]"+ this.href +"[/img]"+ c +"</p>");								 
		$("#preview").css({top:(e.pageY+yOffset)+"px",left:(e.pageX+ xOffset)+"px"}).fadeIn("slow");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		var prvH=$('#preview').height();
		var prvW=$('#preview').width();
		var totY=e.pageY-(((e.pageY+yOffset+prvH)>$(window).height())?(prvH+yOffset):-yOffset);
		var totX=e.pageX-(((e.pageX+xOffset+prvW)>$(window).width())?(prvW+xOffset):-xOffset);
		$("#preview").css({top:totY+"px",left:totX+"px"});		
};


// starting the script on page load
$(document).ready(function(){
	imagePreview();
});

ciao

[mest_suc]

Xinod, ho copiato ed incollato il tuo lavoro al posto dello script, e non funge.
Il tooltip non mi esce. Se avrai voglia e tempo, e magari ti va di ricontrollarlo, mi faresti un favore enorme. Intanto grazie, per ora seguirò il consiglio di cavicchiandrea..
Buona giornata.

Ivano

[Xinod]

mi erano sfuggite un paio di cose

$("body").append("<p id='preview'>[img]"+ this.rel +"[/img]"+ c +"</p>");

$("#screenshot").css({top:totY+"px",left:totX+"px"});
	})

[mest_suc]

Xinod scusa la mia ignoranza.. da quanto ho capito io la prima riga di codice debba essere sostituita; la seconda aggiunta. Però non so dove.. So di essere un rompiscatole...
Grazie per la collaborazione e la pazienza..

Ivano

[Xinod]

la seconda devi solo aggiungere }) dopo
$("#screenshot").css({top:totY+"px",left:totX+"px" });

[mest_suc]

Xinod io questa riga:

$("#screenshot").css({top:totY+"px",left:totX+"p x"

nel mio script non la trovo..