Centratura dell'immagine

scegli un altro forum

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

Indietro Ricarica Avanti

Autore

Discussione

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ:

MSN:

Skype:

E' molto articolato ma uno script molto potente

ma perchè non mi funziona a me

devo inserire il blocco in questo modo?

codice:

<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');
            });
			
var imgList = [
{imgUrl: 'imgurd/viewerbook/grandi/02.jpg', sLeft:650, sTop:550},
{imgUrl: 'imgurd/viewerbook/grandi/01.jpg', sLeft:550, sTop:400},
{imgUrl: 'imgurd/viewerbook/grandi/03.jpg', sLeft:300, sTop:300}
];
    
$.kinetic.callMethods.centering = function(settings, options){
            this.scrollLeft = options.sLeft;  
            this.scrollTop = options.sTop;   
};

$('#wrapper').kinetic();    
$('#wrapper').kinetic('centering',{sLeft:650,sTop:550});

$(".setNewImg").click(function(){
    el = imgList[$(this).index()-1];
    $("#inner").html("<img src="+el.imgUrl+">");
   $('#wrapper').kinetic('centering',{sLeft:el.sLeft,sTop:el.sTop});
});

</script>

codice:

<a href="#" class="setNewImg">

al caricamento la prima immagine la mette al centro,
ma poi cliccando sui link non succede nulla..

Segnala ad un moderatore | IP: Collegato | Permalink

03-05-2012 10:48

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

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2787

ICQ :

MSN :

Skype :

la chiamata al metodo kinetic puoi effettuarla una volta soltanto, la seconda chiamata levala è inutile

codice:

$.kinetic.callMethods.centering = function(settings, options){
            this.scrollLeft = options.sLeft;  
            this.scrollTop = options.sTop;   
};

$('#wrapper').kinetic(); //cancella    
$('#wrapper').kinetic('centering',{sLeft:650,sTop:550});

a parte questo il codice js è corretto, probabilmente è la parte html che non va bene

Dovresti avere n elementi nella pagina con classe setNewImg, per ogni elemento con questa classe viene associato l'elemento dell'array con stesso indice quindi per esempio, se hai tre link

<a href="#" class="setNewImg"> //elemento 1
<a href="#" class="setNewImg"> //elemento 2
<a href="#" class="setNewImg"> //elemento 3

quando verrà cliccato il primo elemento, verrà caricata la prima immagine presente nell'array e cosi via... se hai un solo link (mi sembra di capire che è il tuo caso) verrà caricata sempre la prima immagine. Insomma bisogna capire com'è composto il tuo menu, il mio è solo un esempio devi addattarlo alle tue esigenze

Segnala ad un moderatore | IP: Collegato | Permalink

03-05-2012 12:04

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 :

ti chiedo una cosa,
la variabile imgList considera l'ordine a cascata con cui sono scritti gli href sulla pagina html?
tipo quello che hai scritto:

<a href="#" class="setNewImg"> //elemento 1 (corrispone a San_Siro_UEFA.jpeg)
<a href="#" class="setNewImg"> //elemento 2 (corrispone a wembley.jpeg)
<a href="#" class="setNewImg"> //elemento 3 (corrispone a San_Siro_UEFA.jpeg)

codice:

var imgList = [
{imgUrl: 'http://www.fussballtempel.net/uefa/ITA/San_Siro_UEFA.jpeg', sLeft:650, sTop:550},
{imgUrl: 'http://the-taylors.org/jquery.kinetic/wembley.jpg', sLeft:550, sTop:400},
{imgUrl: 'http://www.fussballtempel.net/uefa/ITA/San_Siro_UEFA.jpeg', sLeft:300, sTop:300}
];
    
$.kinetic.callMethods.centering = function(settings, options){
            this.scrollLeft = options.sLeft;  
            this.scrollTop = options.sTop;   
};

$('#wrapper').kinetic();    
$('#wrapper').kinetic('centering',{sLeft:650,sTop:550});

$(".setNewImg").click(function(){
    el = imgList[$(this).index()-1];
    $("#inner").html("<img src="+el.imgUrl+">");
   $('#wrapper').kinetic('centering',{sLeft:el.sLeft,sTop:el.sTop});
});

ma non sipuò mettere una variabile nell' href più mirata?
per poi richiamare esattamente sia l'immagine che la cordinata?
sempre tipo lista..
vediamo se riesco a spiegare meglio:

codice:

function webdemo1(foto) 
{ 
$.kinetic.callMethods.centering = function(settings, options){
            this.scrollLeft = options.sLeft;  
            this.scrollTop = options.sTop;   
};
var image = foto;
el = image[$(this).index()-1];
document.getElementById('inner').innerHTML='<img src=' + el.foto + '>'; 
$('#wrapper').kinetic('centering',{sLeft:el.sLeft,sTop:el.sTop};
$('#wrapper').kinetic('start', {velocity: 850, velocityY: 650});
            
}
 

function webdemo2(foto) 
{ 
$.kinetic.callMethods.centering = function(settings, options){
            this.scrollLeft = options.sLeft;  
            this.scrollTop = options.sTop;   
};
var image = foto;
el = image[$(this).index()-1];
document.getElementById('inner').innerHTML='<img src=' + el.foto + '>'; 
$('#wrapper').kinetic('centering',{sLeft:el.sLeft,sTop:el.sTop};
$('#wrapper').kinetic('start', {velocity: 750, velocityY: 550});
            
}

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

sorry, sarà uno schifo..

Segnala ad un moderatore | IP: Collegato | Permalink

04-05-2012 15:46

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2787

ICQ :

MSN :

Skype :

Citazione:

Originariamente inviato da naps
ti chiedo una cosa,
la variabile imgList considera l'ordine a cascata con cui sono scritti gli href sulla pagina html?
tipo quello che hai scritto:

<a href="#" class="setNewImg"> //elemento 1 (corrispone a San_Siro_UEFA.jpeg)
<a href="#" class="setNewImg"> //elemento 2 (corrispone a wembley.jpeg)
<a href="#" class="setNewImg"> //elemento 3 (corrispone a San_Siro_UEFA.jpeg)

Esatto!

Citazione:

ma non sipuò mettere una variabile nell' href più mirata?
per poi richiamare esattamente sia l'immagine che la cordinata?
sempre tipo lista..

Non sono per niente sicuro di aver capito cosa vuoi fare, cmq ho modificato il solito esempio

http://jsfiddle.net/fCENj/6/

Ad ogni href ho impostato l'id in questo formato img0,img1,ecc... (parte da zero)

codice:

<a href="#" id="img1" class="setNewImg"> 
<a href="#" id="img2" class="setNewImg">
<a href="#" id="img0" class="setNewImg">

var imgList = [
{imgUrl: 'http://www.fussballtempel.net/uefa/ITA/San_Siro_UEFA.jpeg', sLeft:650, sTop:550}, --->img0
{imgUrl: 'http://the-taylors.org/jquery.kinetic/wembley.jpg', sLeft:550, sTop:400}, --->img1
{imgUrl: 'http://www.fussballtempel.net/uefa/ITA/San_Siro_UEFA.jpeg', sLeft:300, sTop:300} --->img2
];

Ultima modifica ad opera dell'utente Vindav il 04-05-2012 alle 16:50

Segnala ad un moderatore | IP: Collegato | Permalink

04-05-2012 16:37

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

non mi funziona..

ok x l' id , potrebbe andare ma manca qualcosa;

nell'HREF va bene che imposto l'id
forse è meglio passargli l'id tramite onclick="" che ne pensi?

e poi la lista si può modificare del tipo:

var id = numimg;
numimg = [01];
$('#wrapper').kinetic('centering',{sLeft:el.sLeft,sTop:el.sTop};
$('#wrapper').kinetic('start', {velocity: 750, velocityY: 550});
numimg = [02];
$('#wrapper').kinetic('centering',{sLeft:el.sLeft,sTop:el.sTop};
$('#wrapper').kinetic('start', {velocity: 750, velocityY: 550});

però qui manca la stringa del percorso dell'immagine grande
oppure gliela lascio nell'href direttamente?

<a href="http://www.fussballtempel.net/uefa/ITA/San_Siro_UEFA.jpeg" onclick="id='img1'" class="setNewImg">

codice:

<a href="#" id="img1" class="setNewImg"> 
<a href="#" id="img2" class="setNewImg">
<a href="#" id="img0" class="setNewImg">

var imgList = [
{imgUrl: 'http://www.fussballtempel.net/uefa/ITA/San_Siro_UEFA.jpeg', sLeft:650, sTop:550}, --->img0
{imgUrl: 'http://the-taylors.org/jquery.kinetic/wembley.jpg', sLeft:550, sTop:400}, --->img1
{imgUrl: 'http://www.fussballtempel.net/uefa/ITA/San_Siro_UEFA.jpeg', sLeft:300, sTop:300} --->img2
];

Segnala ad un moderatore | IP: Collegato | Permalink

05-05-2012 16:39

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

Sono arrivato ad un buon punto credo però mi manca un suggerimento:
sul click mi posiziona l'immagine alle cordinate che chiedo, ma se clicco più volte
continua a spostarla. Tu come avevi risolto questa ripetizione di spostamento?

si può adattare a questo?

codice:

$(document).ready(function() {

     $("#img3").click(function() {
     $('#wrapper').kinetic('start', {velocity: 450, velocityY: 250}); 
     var img = '<img src="imgurd/viewerbook/grandi/03.jpg">'
     $('#wrapper').kinetic('stop');
     var el = document.getElementById("inner");
     el.innerHTML = img;
     return false;
     });
});

Cosa ne pensi?
Non so se va bene anche quel return false;

Segnala ad un moderatore | IP: Collegato | Permalink

06-05-2012 04:10

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2787

ICQ :

MSN :

Skype :

sei tornato indietro, cosi non ti funzionerà mai... e poi stai cablando tutti i valori(coordinate e url immagine) all'interno della funzione, ti ho mostrato come rendere questo procedimento dinamico, io non so piu che esempi mostrarti, se continuiamo cosi andiamo avanti all'infinito...

Direi di lasciar perdere jquery anche perche mi sembra che non ci capisci molto, per non dire nulla, ti consiglio di studiarti la documentazione se in futuro vorrai utilizzare ancora jquery. Visto che per te risulta piu semplice da capire usa pure l'onclick inline passandogli le coordinate e l'url dell'immagine.

codice:

<a href="#" onclick="webdemo('http://www.fussballtempel.net/uefa/ITA/San_Siro_UEFA.jpeg',650,550)">Carica immagine 1</a>
<a href="#" onclick="webdemo('http://the-taylors.org/jquery.kinetic/wembley.jpg',550,400)">Carica immagine 2</a>
<a href="#" onclick="webdemo('http://www.fussballtempel.net/uefa/ITA/San_Siro_UEFA.jpeg',300,300)">Carica immagine 3</a>

codice:

function webdemo(urlImg,sLeft,sTop){
     var img = '<img src='+urlImg+'>'
     var el = document.getElementById("inner");
     el.innerHTML = img;
     $('#wrapper').kinetic('centering',{sLeft:sLeft,sTop:sTop});
     return false;
}

Segnala ad un moderatore | IP: Collegato | Permalink

07-05-2012 10:23

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

grazie del consiglio, infatti stavo incominciando a trovare tutta la documentazione generale
di jquery e tutorial x capire affondo la logica

comunque ho aggiornato lo script con l'ultimo codice che mi hai postato,
e posso dirti che funziona solamente quando riclicco per la seconda volta
sull'icona.

1 click = carica immagine nel div ma non centrata
2 click = mi centra perfettamente l'immagine rispettando le coordinate passate

vedendo e provando a spostare il codice di posizionamento
$('#wrapper').kinetic('centering',{sLeft:sLeft,sTop:sTop});
posso dirti a sensazione che:
l'immagine non viene posizionata la centro come
se al primo click caricando l'immagine
non arriva in tempo a leggere la proprietà di centratura.

secondo te non è possibile mettere un preloading dell'immagine
prima di var el = document.getElementById("inner"); ?

Segnala ad un moderatore | IP: Collegato | Permalink

08-05-2012 09:04

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2787

ICQ :

MSN :

Skype :

posta il link della tua pagina almeno posso vedere lo script in funzione...

Segnala ad un moderatore | IP: Collegato | Permalink

08-05-2012 09:26

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

http://www.spacesart.it/appoggio/book.html

Segnala ad un moderatore | IP: Collegato | Permalink

08-05-2012 09:52

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2787

ICQ :

MSN :

Skype :

la funzione webdemo è diversa da quella che ti ho postato

(le istruzioni vengono eseguite in ordine inverso), inoltre elimina le seguenti righe che oramai sono inutili:

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

Segnala ad un moderatore | IP: Collegato | Permalink

08-05-2012 10:34

naps
Utente di HTML.it

Registrato il: May 2001

Provenienza:

Messaggi: 465

ICQ :

MSN :

Skype :

le due righe da eliminare mi permettono di settare già la posizione
della prima immagine appena eseguo la pagina

codice:

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

ho modificato come dicevi e ho ripreso lo stesso script da te postato,
ma centra l'immagine solo dopo il secondo click.

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');
            });
						

			
			$.kinetic.callMethods.centering = function(settings, options){
            this.scrollLeft = options.sLeft;  
            this.scrollTop = options.sTop; 

  
};

function webdemo(urlImg,sLeft,sTop){
     var img = '<img src='+urlImg+'>'
     var el = document.getElementById("inner");
     el.innerHTML = img;
     $('#wrapper').kinetic('centering',{sLeft:sLeft,sTop:sTop});
     return false;
}

Segnala ad un moderatore | IP: Collegato | Permalink

08-05-2012 10:47

Vindav
Utente di HTML.it

Registrato il: Dec 2010

Provenienza:

Messaggi: 2787

ICQ :

MSN :

Skype :

Citazione:

Originariamente inviato da naps
le due righe da eliminare mi permettono di settare già la posizione
della prima immagine appena eseguo la pagina

codice:

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

Quelle istruzioni sono inutili visto che stai utilizzando il metodo centering

, le devi lavare... e ti ho già spiegato precedentemente perche non vanno bene!

Inoltre dal sorgente della tua pagina vedo ancora il codice vecchio della funzione webdemo, aggiornalo anche online.

Segnala ad un moderatore | IP: Collegato | Permalink

08-05-2012 11:19