Lente d'ingrandimento con jquery e asp

**nilats** · 18-12-2010, 21:21

salve a tutti.

allora ho una pagina scritta con ruby e asp, collegata ad un DB access,
che funziona bene.in pratica appena scelgo una immagine dal menu a tendina
si carica l'immagine relativa estratta dal DB.siccome si tratta di documenti
antichi vorrei fornire agli utenti la possibilità di una lente per ingrandire e leggere
meglio la scrittura.ho trovato un buono script fatto con jquery
solo che non riesco a integrarlo nella pagina.in pratica appena carico la pagina funziona solo che non c'è nessuna lente

aiuti in proposito?
ciauz
posto la pagina e lo script jquery

pagina asp e ruby:

codice:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
        <script type="text/javascript" src="../js/iZoom.js"></script> 
        <script type="text/javascript"> 
            $('document').ready(function(){
                $('#myPic1').iZoom({diameter:500});
                $('#myPic2').iZoom({borderColor:'green', borderWidth:3});
                $('#myPic3').iZoom({borderColor:'#f00', borderStyle:'double', borderWidth: '3px'});
            });
        </script> 
</head>

<%
    Dim id
	Dim OBJdbConnection
    id = Request.QueryString("id")
    Call CnOpen()
    Dim SQL
    SQL = "SELECT * FROM serie "
    SQL = SQL & "WHERE id_fondo = " & id & " "
    SQL = SQL & "ORDER BY serie ASC"
    rs.Open SQL, cn, 1
    If rs.EOF Then
	
    Else
	
sql="select * from serie where id_fondo =" & id
Set OBJdbConnection=Server.CreateObject("ADODB.Connection")
OBJdbConnection.open"driver={Microsoft Access Driver (*.mdb)};dbq="&server.mapPath ("../database/archivio_digitale.mdb")
Set Rs=OBJdbConnection.Execute(sql)
sql="SELECT * from serie where id_fondo ='id' "
serie=rs("serie")
descrizione=rs("descrizione")	
%>
<%=descrizione%>
<div align="center">
  

</p>
  

[img]../img_dig/<%=rs([/img]" alt="immagine" /></p>
  




    " alt="scarica il file in formato.rar"/>Scarica il file in media risoluzione

      </p>
</div>
<p align="center">
<p align="center">
  
  <%
    End If
    rs.Close
    Call CnClose()
%>

script jquery

codice:

(function($){
	$.fn.iZoom = function(options){
          options = $.extend({
                         'diameter':150,
                         'borderColor':'#ccc',
                         'borderWidth':'1px',
                         'borderStyle':'solid'
                    },options || {});	    
		var $this = $(this); var loupe = $this; var wrpImage; var lWidth; var lHeight; var sWidth; var sHeight; var sBorderLeft; var sBorderTop;
		$this.mouseenter(function(e){
			$this.css('cursor','crosshair'); sWidth = $this.width(); sHeight = $this.height(); sBorderLeft = $this.css('border-left-width').replace('px',''); sBorderTop = $this.css('border-top-width').replace('px','');
						
			var lImage = new Image();
			lImage.src = $this.attr('src');
			lWidth = lImage.width;
			lHeight = lImage.height;
			
            loupe = $('<div>').css({
				position: 'absolute',
				width: options.diameter,
				height: options.diameter,
				'border-width': options.borderWidth,
                'border-style':  options.borderStyle,
                'border-color': options.borderColor,
				overflow: 'hidden',
				'z-index': '1000',
				'-moz-border-radius': options.diameter/2,
                '-khtml-border-radius': options.diameter/2,
                'border-radius': options.diameter/2,
				background: '#fff url('+lImage.src+') no-repeat'
			}).attr('id','iLoupe');				
				
			$('body').append(loupe);
			
		}).mousemove(function(e){
			var sxPointer = e.pageX - $this.offset().left - parseInt($this.css('padding-left'));
			var syPointer = e.pageY - $this.offset().top - parseInt($this.css('padding-top'));
		
			loupe.css({
				left: e.pageX+10,
				top: e.pageY+10
			});

			var sxPointerPer = sxPointer/sWidth*100;
			var syPointerPer = syPointer/sHeight*100;
			sxPointerPer = Math.round(sxPointerPer*Math.pow(10,10))/Math.pow(10,10);
			syPointerPer = Math.round(syPointerPer*Math.pow(10,10))/Math.pow(10,10);
			
			var sXPointer = Math.round(((sxPointerPer/100*lWidth)*Math.pow(10,0))/Math.pow(10,0));
			var sYPointer = Math.round(((syPointerPer/100*lHeight)*Math.pow(10,0))/Math.pow(10,0));

			(sxPointer>=0 && sxPointer<=sWidth && syPointer>=0 && syPointer<=sHeight) ? loupe.css({"background-position":(-sXPointer+options.diameter/2)+"px "+(-sYPointer+options.diameter/2)+"px"}) : false;
		}).mouseleave(function(){
			loupe.remove();
		});
	};	
})(jQuery);

**nilats** · 19-12-2010, 21:57

nessuno s'avanza

Discussione: Lente d'ingrandimento con jquery e asp

Strumenti discussione

Ricerca discussione

Visualizza

Lente d'ingrandimento con jquery e asp

Permessi di invio