Centratura dell'immagine

scegli un altro forum

Pagine (5): [ < 1 2 3 4 5 > ]

Indietro Ricarica Avanti

Autore

Discussione

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2788

ICQ :

MSN :

Skype :

ci sara qualche errore nella pagina, controlla la console degli errori, sicuro di aver insetito le 2 roghe di codice nella giusta posizione?

Segnala ad un moderatore | IP: Collegato | Permalink

18-04-2012 18:02

Clicca qui per inviare all'utente Vindav un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente Vindav

Aggiungi l'utente Vindav alla tua lista degli utenti amici

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

ho ricontrollato..
l'inserimento lo fatto subito dopo il link esterno dei java-script:

codice:

<script src="lib/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.kinetic.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#wrapper').kinetic('start', {velocity: 650, velocityY: 550});
$('#wrapper').kinetic('stop'); 
</script>

Segnala ad un moderatore | IP: Collegato | Permalink

18-04-2012 18:19

Clicca qui per inviare all'utente naps un messaggio privato

Visualizza ulteriori messaggi scritti dall'utente naps

Aggiungi l'utente naps alla tua lista degli utenti amici

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

questa è la pagina:

[CODE]<!DOCTYPE HTML>
<html>
<head>
<title>jQuery.kinetic demos</title>
<script src="lib/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.kinetic.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> $('#wrapper').kinetic('start', {velocity: 650, velocityY: 550}); $('#wrapper').kinetic('stop'); </script>
<style type="text/css">
#containerbook {
width: 970px;
}
#wrapper {
border: solid 0px #000;
height: 625px;
width: 100%;
overflow: hidden;
}

#controls span {
cursor: pointer;
}

#inner {
}
#inner img {
display: block;
width: 2000px;
}
</style>

</head>
<body>
<div id="containerbook">
<div id="wrapper">
<div id="inner">
<p><img src="prova.jpg"/></p>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$('#wrapper').kinetic();
$('#left').click(function(){
$('#wrapper').kinetic('start', { velocity: -10 });
});
$('#right').click(function(){
$('#wrapper').kinetic('start', { velocity: 10 });
});
$('#end').click(function(){
$('#wrapper').kinetic('end');
});
$('#stop').click(function(){
$('#wrapper').kinetic('stop');
});
$('#detach').click(function(){
$('#wrapper').kinetic('detach');
});
$('#attach').click(function(){
$('#wrapper').kinetic('attach');
});
</script>
</div>
</body>
</html>

Segnala ad un moderatore | IP: Collegato | Permalink

18-04-2012 18:23

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2788

ICQ :

MSN :

Skype :

non va inserito li, prova cosi:

codice:

$('#wrapper').kinetic();	
$('#left').click(function(){
$('#wrapper').kinetic('start', { velocity: -10 });
});
$('#right').click(function(){
$('#wrapper').kinetic('start', { velocity: 10 });
});
$('#end').click(function(){
$('#wrapper').kinetic('end');
});
$('#stop').click(function(){
$('#wrapper').kinetic('stop');
});
$('#detach').click(function(){
$('#wrapper').kinetic('detach');
});
$('#attach').click(function(){
$('#wrapper').kinetic('attach');
});

$('#wrapper').kinetic('start', {velocity: 650, velocityY: 550}); 
$('#wrapper').kinetic('stop');

Segnala ad un moderatore | IP: Collegato | Permalink

18-04-2012 18:41

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

non và..

Segnala ad un moderatore | IP: Collegato | Permalink

18-04-2012 18:58

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2788

ICQ :

MSN :

Skype :

non va che significa? non scrolla? non ti porta al centro dell'immagine? se non scrolla nemmeno allora significa che c'è ancora un errore nella pagina

http://jsfiddle.net/fCENj/

ho cambiato immagine per il resto è il codice che hai postato prima, mi pare sia tutto a posto

Segnala ad un moderatore | IP: Collegato | Permalink

18-04-2012 19:15

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

Vindav ,

Dopo aver ricontrollato riga per riga e rimontato passo passo il codice da te suggerito,
finalmente posso dirti che funziona a meraviglia.

Grazie tanto,

Segnala ad un moderatore | IP: Collegato | Permalink

21-04-2012 09:55

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

Ho riprovato lo script, :

codice:


$('#wrapper').kinetic(); 
$('#left').click(function(){ 
$('#wrapper').kinetic('start', { velocity: -10 });
 }); 

$('#right').click(function(){ 
$('#wrapper').kinetic('start', { velocity: 10 }); 
}); 

$('#end').click(function(){ 
$('#wrapper').kinetic('end'); 
}); 

$('#stop').click(function(){ 
$('#wrapper').kinetic('stop'); 
}); 

$('#detach').click(function(){ 
$('#wrapper').kinetic('detach'); 
}); 

$('#attach').click(function(){ 
$('#wrapper').kinetic('attach'); 
}); 

$('#wrapper').kinetic('start', {velocity: 650, velocityY: 550}); 
$('#wrapper').kinetic('stop');

un accorgimento anomalo,

premetto ho un menu a scorrimento di icone composto da img cliccando su di esse
si carica un ingrandimento centrale all'interno di un DIV;

al caricamento della pagina.. nel DIV mi viene carica la prima immagine di default al centro, mentre se poi clicco una altra immagine dal menu a scorrimento la sostituisce ma non me la mette più centrale..

codice:


<div id="containerbook">
        <div id="wrapper">
        <div id="inner"><p><img src="01.jpg" height="1954" /></p></div>
        </div>
</div>

perchè? devo far rieseguire lo script in qualche modo??

Ultima modifica ad opera dell'utente naps il 29-04-2012 alle 16:38

Segnala ad un moderatore | IP: Collegato | Permalink

29-04-2012 16:35

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2788

ICQ :

MSN :

Skype :

dovresti eseguire nuovamente le due righe di codice che ti ho segnalato

Segnala ad un moderatore | IP: Collegato | Permalink

02-05-2012 09:23

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

Rieseguire di nuovo le righe da te segnalate:

codice:

$('#wrapper').kinetic('start', {velocity: 650, velocityY: 550});
$('#wrapper').kinetic('stop');

Non riesco però a capire una cosa, se io clicco su un altra icona del menu a scorrimento
per avere una diversa immagine di ingrandimento caricata nel DIV,
la pagina al suo refresh non dovrebbe rileggere lo script di centratura e posizionarla di nuovo
al centro?

premetto anche un' altra cosa che io successivamente ho aggiunto anche lo script
per non far refreshare la pagina in modo da caricare le immagini senza che la posizione del
menu a scorrimento si riposizionasse all'inizio della prima icona.
(forse cmq può centrare poco)

codice:

function webdemo(foto)
{ 
var image = foto;
document.getElementById('inner').innerHTML='<img src=' + image + '>';

aggiunto a seguire delle due righe sopra.
e sull'href dell'icona:

codice:

<a href="java-script:;" onclick="webdemo('imgurd/viewerbook/grandi/02.jpg');">

Riassumendo ad ogni click sull'icona le due righe dovrebbero essere lette
come a seguire le righe dello script di non refresh che è posizionato alla riga successiva
della centratura..
però non funziona..

Segnala ad un moderatore | IP: Collegato | Permalink

02-05-2012 10:43

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2788

ICQ :

MSN :

Skype :

Ho modificato l'esempio di prima:

http://jsfiddle.net/fCENj/2/

ho aggiunto un link che permette di sostituire l'immagine da centrare, l'immagine caricata successivamente viene centrata anch'essa, tieni conto che andrebbero calcolati i nuovi parametri velocity, velocityY nel caso l'immagine non sia delle stesse dimensioni... dacci un occhiata.

Segnala ad un moderatore | IP: Collegato | Permalink

02-05-2012 11:34

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

sto provando,
io ho la funzione webdemo che mi richiama il percorso dell'immagine,
ho provato a scrivere così:

codice:

function webdemo(foto) 
{ 
var image = foto; 
$("#setNewImg").click(function() { 
document.getElementById('inner').innerHTML='<img src=' + image + '>'; setKinetic();
}

ma non funziona più, cliccando sull'icona non carica più l'immagine grande nel div.
forse un problema di chiusura parentesi o la function?

Segnala ad un moderatore | IP: Collegato | Permalink

02-05-2012 12:32

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2788

ICQ :

MSN :

Skype :

se non vuoi utilizzare jquery dovrebbe bastare questo:

codice:

function webdemo(foto) 
{ 
document.getElementById('inner').innerHTML='<img src=' + foto + '>'; 
setKinetic();
}

se vuoi invece utilizzare jquery devi trovare un modo per passare il parametro alla funzione, per esempio:

codice:

<a href="#" id="setNewImg" rel="imgurd/viewerbook/grandi/02.jpg">Carica nuova immagine</a>

$("#setNewImg").click(function(){
    $("#inner").html('<img src='+$(this).attr("rel")+'>');
    setKinetic();
});

Segnala ad un moderatore | IP: Collegato | Permalink

02-05-2012 14:04

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

Perdonami, e ancora grazie per la tua pazienza

non utilizzando jquery lo trovo più semplice da scrivere e capire

poi ho aggiunto un serie di function per poter provare a dare una cordinata per ogni immagine,
credo sia una pazzia ma dimmi se posso continuare così..
ho notato però che cliccando più volte sull' icona del menu l'immagine nel div continua
a spostarsi di cordinate, perchè?
anche sul tuo esempio.

codice:

            $('#wrapper').kinetic();		
            $('#left').click(function(){
                $('#wrapper').kinetic('start', { velocity: -10 });
            });
            $('#right').click(function(){
                $('#wrapper').kinetic('start', { velocity: 10 });
            });
            $('#end').click(function(){
                $('#wrapper').kinetic('end');
            });
            $('#stop').click(function(){
                $('#wrapper').kinetic('stop');
            });
            $('#detach').click(function(){
                $('#wrapper').kinetic('detach');
            });
            $('#attach').click(function(){
                $('#wrapper').kinetic('attach');
            });
			
			$('#wrapper').kinetic('start', {velocity: 650, velocityY: 550});
            $('#wrapper').kinetic('stop');
			
function webdemo1(foto1) 
{ 
var image = foto1;
document.getElementById('inner').innerHTML='<img src=' + foto1 + '>'; 
$('#wrapper').kinetic('start', {velocity: 850, velocityY: 650});
            $('#wrapper').kinetic('stop');
}
function webdemo2(foto2) 
{ 
var image = foto2;
document.getElementById('inner').innerHTML='<img src=' + foto2 + '>'; 
$('#wrapper').kinetic('start', {velocity: 650, velocityY: 550});
            $('#wrapper').kinetic('stop');
}

è da pazzi?!?..

Segnala ad un moderatore | IP: Collegato | Permalink

02-05-2012 15:44

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2788

ICQ :

MSN :

Skype :

Citazione:

Originariamente inviato da naps
ho notato però che cliccando più volte sull' icona del menu l'immagine nel div continua
a spostarsi di cordinate, perchè?
anche sul tuo esempio.

Hai ragione, non funziona bene, non me ne ero nemmeno accorto, fai sempre qualche test sul codice che ti passo perche spesso non lo provo nemmeno

Sembra che vengano mantenute in memoria le coordinate impostate la prima volta al contenitore, le coordinate passate successivamente vengono sommate alle precedenti invece di essere sovrascritte, per questo vedi muoversi l'immagine... non sono riuscito a sistemare l'esempio precedente ma seguendo una strada alternativa dovrei aver risolto, vedi questo esempio:

http://jsfiddle.net/fCENj/5/

Citazione:

Originariamente inviato da naps
è da pazzi?!?..

Beh direi proprio di si

, non è sicuramente il metodo corretto per risolvere, nel mio esempio(un po' più articolato del precedente) puoi vedere che ho immagazzinato le informazione necessarie (url immagine e coordinate) in un array di oggetti. In questo modo è semplice recuperare le informazioni dinamicamente in poche righe di codice.

Segnala ad un moderatore | IP: Collegato | Permalink

03-05-2012 09:42

Tutte le ore sono con fuso orario CET. Ora sono le 08:18.

Pagine (5): [ < 1 2 3 4 5 > ]

Ultima discussione Prossima discussione

HTML.it forumLato clientJavaScriptCentratura dell'immagine

Versione per la stampa |

Invia il thread via email |

Ricevi aggiornamenti sul thread |

Scarica il thread

ciao Unregistered

HTML.it forumLato clientJavaScriptCentratura dell'immagine

Centratura dell'immagine

HTML.it forumLato clientJavaScriptCentratura dell'immagine

Cerchi un argomento specifico e hai fretta? Usa il motore di ricerca