Gallery foto

dla86

Utente Attivo
27 Mag 2009
36
0
0
al seguente indirizzo ho inserito un codice js per realizzare una semplicissima slide di foto scorrrevoli. (http://www.pallavicini.com/abitazioni.html)

Il codice js utilizzato è il seguente

PHP:
$(document).ready(function() {
	
	//Initialize
	onMoving			= false;
	item				= $('.list li');
	itemReverse		= item.get().reverse();
	itemSize			= item.size();
	itemDisplayed	= 6;
	itemToSlide		= itemDisplayed * 9;
	currentSlide	= 1;
	page				= Math.round(itemSize/itemDisplayed);

	//Next button clicked
	$('.next').click(function() {

		if(onMoving || currentSlide >= 8) return false;
		onMoving = true, currentSlide++;		
		
		$.each(item, function() {
			
			var i 	 = $(this).index();
			var delay = i * 100;

			window.setTimeout(function (index) {
				return function () {
					item.eq(index).stop().animate({ 'right' : '+='+itemToSlide+'em' }, function() {
               	if(index >= itemSize-1) onMoving = false;
					});
				};
			} (i), delay);
		});
	});
	
	//Previous button clicked
	$('.prev').click(function() {

		if(onMoving || currentSlide == 1) return false;
		onMoving = true, currentSlide--;
		
		$.each(itemReverse, function() {
			
			var i 	 = $(this).index();
			var delay = i * 100;
			
			window.setTimeout(function (index) {
				return function () {
					$(itemReverse).eq(index).stop().animate({ 'right' : '-='+itemToSlide+'em' }, function() {
						if(index >= 0) onMoving = false;
					});
				};
			} (i), delay);      
		});
	});
});

Io vorrei che al termine dello scorrimento, la freccia rossa sulla destra scompaia. Lo stesso discorso per la freccia rossa sulla sinistra all'inizio dello scorrimento. è possibile fare ciò tramite il codice?.. grazie a tutti per i suggerimenti
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao ti sposto in JQuery

forse puoi intervenire su questa if in questo modo

Codice:
if(onMoving || currentSlide >= 8) {
            $('.next').css({
                "background-image" : "none"
            })
            return false;
        }

In pratica: se arrivi all'ultima foto togli lo sfondo al div next

Non ti assicuro la sintassi, ho appena iniziato con jquery
 

dla86

Utente Attivo
27 Mag 2009
36
0
0
ciao e grazie per l'aiuto. io di js conosco davvero poco. ho provato vari tentativi ma non riesco a conciliare il tuo codice con quello già esistente. in pratica ora c'è:
PHP:
	//Next button clicked
	$('.next').click(function() {

		if(onMoving || currentSlide >= 8) return false;
		onMoving = true, currentSlide++;
				
		
		$.each(item, function() {
			
			var i 	 = $(this).index();
			var delay = i * 100;

			window.setTimeout(function (index) {
				return function () {
					item.eq(index).stop().animate({ 'right' : '+='+itemToSlide+'em' }, function() {
               	if(index >= itemSize-1) onMoving = false;
					});
				};
			} (i), delay);
		});
	});
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
pensavo di inserirlo cosi:
PHP:
//Next button clicked
                $('.next').click(function() {
                    
                    if(onMoving || currentSlide >= 8) {
                        // questo comando dovrebbe annullare l'imagine(freccia) di background
                        $(this).css("background-image" , "none");
                        return false;
                    } 
            
                    onMoving = true, currentSlide++;        
        
                    $.each(item, function() {
            
                        var i      = $(this).index();
                        var delay = i * 100;

                        window.setTimeout(function (index) {
                            return function () {
                                item.eq(index).stop().animate({ 'right' : '+='+itemToSlide+'em' }, function() {
                                    if(index >= itemSize-1) onMoving = false;
                                });
                            };
                        } (i), delay);
                    });
                });
 
Ultima modifica:

dla86

Utente Attivo
27 Mag 2009
36
0
0
Ho inserito il codice come da te indicato ma non so come mai scompare al secondo click....

PHP:
//Next button clicked
	$('.next').click(function() {
	
		if(onMoving || currentSlide >= 8){
	
        $(this).css("background-image" , "none");
                        return false;
		}
		
		onMoving = true, currentSlide++; 		 
		
		$.each(item, function() {
			
			var i 	 = $(this).index();
			var delay = i * 100;

			window.setTimeout(function (index) {
				return function () {
					item.eq(index).stop().animate({ 'right' : '+='+itemToSlide+'em' }, function() {
               	if(index >= itemSize-1) onMoving = false;
					});
				};
			} (i), delay);
		});
	});


Mi sembra corretto il codice... ???....
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
e se provi cosi?
PHP:
//Next button clicked
    $('.next').click(function() {
    
        if(currentSlide >= 8) {
            $(this).css("background-image" , "none");
        }
        if(onMoving || currentSlide >= 8)
            return false;
        
        
        onMoving = true, currentSlide++;          
        
        $.each(item, function() {
            
            var i      = $(this).index();
            var delay = i * 100;

            window.setTimeout(function (index) {
                return function () {
                    item.eq(index).stop().animate({ 'right' : '+='+itemToSlide+'em' }, function() {
                        if(index >= itemSize-1) onMoving = false;
                    });
                };
            } (i), delay);
        });
    });
 

dla86

Utente Attivo
27 Mag 2009
36
0
0
perfetto, così funziona però una volta scomparso, se riclicco indietro dovrebbe ricomparire. ho provato in questo modo ma non funziona:

PHP:
$(document).ready(function() {
	
	//Initialize
	onMoving			= false;
	item				= $('.list li');
	itemReverse		= item.get().reverse();
	itemSize			= item.size();
	itemDisplayed	= 6;
	itemToSlide		= itemDisplayed * 9;
	currentSlide	= 1;
	page				= Math.round(itemSize/itemDisplayed);

	//Next button clicked
	$('.next').click(function() {
	
		if(currentSlide >= 7) {
            $(this).css("background-image" , "none");
        }
        if(onMoving || currentSlide >= 8)
            return false;
        
        
        onMoving = true, currentSlide++;	 
		
		$.each(item, function() {
			
			var i 	 = $(this).index();
			var delay = i * 100;

			window.setTimeout(function (index) {
				return function () {
					item.eq(index).stop().animate({ 'right' : '+='+itemToSlide+'em' }, function() {
               	if(index >= itemSize-1) onMoving = false;
					});
				};
			} (i), delay);
		});
	});
	
	//Previous button clicked
	$('.prev').click(function() {

		if(onMoving || currentSlide == 1) return false;
		onMoving = true, currentSlide--;
		
		if(currentSlide < 8) {
            $(this).css("background-image" , "../images/next.png");
        }
		
		$.each(itemReverse, function() {
			
			var i 	 = $(this).index();
			var delay = i * 100;
			
			window.setTimeout(function (index) {
				return function () {
					$(itemReverse).eq(index).stop().animate({ 'right' : '-='+itemToSlide+'em' }, function() {
						if(index >= 0) onMoving = false;
					});
				};
			} (i), delay);      
		});
	});
});

In pratica ho aggiunto:

PHP:
if(currentSlide < 8) {
            $(this).css("background-image" , "../images/next.png");
        }
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
sei nella funzione di prev quindi non puoi usare this
prova cosi
PHP:
if(currentSlide < 8) {
            $('.next').css("background-image" , "../images/next.png");
        }
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Sicuro dell'indirizzo dell'immagine?

secondo me devi togliere il ../

visto che è lo stesso indirizzo che usi nel foglio di stile essendo in un altra directory l'indirizzo dovrebbe cambiare

PHP:
   //Previous button clicked
    $('.prev').click(function() {

        if(onMoving || currentSlide == 1) return false;
        onMoving = true, currentSlide--;
        if(currentSlide < 8) {
            $('.next').css("background-image" , "images/next.png");
        }
        
        $.each(itemReverse, function() {
            
            var i      = $(this).index();
            var delay = i * 100;
            
            window.setTimeout(function (index) {
                return function () {
                    $(itemReverse).eq(index).stop().animate({ 'right' : '-='+itemToSlide+'em' }, function() {
                        if(index >= 0) onMoving = false;
                    });
                };
            } (i), delay);      
        });
    });
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
forse la sintassi giusta prevede anche url

PHP:
if(currentSlide < 8) {
            $('.next').css("background-image" , "url('../images/next.png')");
        }

prova anche senza apici singoli, al massimo non funziona
 

dla86

Utente Attivo
27 Mag 2009
36
0
0
perfetto ora funziona. grazie mille!!! :elvis:

posto il codice completo:

PHP:
$(document).ready(function() {
	
	//Initialize
	onMoving			= false;
	item				= $('.list li');
	itemReverse		= item.get().reverse();
	itemSize			= item.size();
	itemDisplayed	= 6;
	itemToSlide		= itemDisplayed * 9;
	currentSlide	= 1;
	page				= Math.round(itemSize/itemDisplayed);

	//Next button clicked
	$('.next').click(function() {
	
		if(currentSlide >= 7) {
            $(this).css("background-image" , "none");
        }
		if(currentSlide >= 1) {
            $('.prev').css("background-image" , "url('images/prev.png')");
        }   
        if(onMoving || currentSlide >= 8)
            return false;
        
        
        onMoving = true, currentSlide++;	 
		
		$.each(item, function() {
			
			var i 	 = $(this).index();
			var delay = i * 100;

			window.setTimeout(function (index) {
				return function () {
					item.eq(index).stop().animate({ 'right' : '+='+itemToSlide+'em' }, function() {
               	if(index >= itemSize-1) onMoving = false;
					});
				};
			} (i), delay);
		});
	});
	
	//Previous button clicked
	$('.prev').click(function() {
		
		if(currentSlide <= 8) {
            $('.next').css("background-image" , "url('images/next.png')");
        }
		if(currentSlide <= 2) {
            $(this).css("background-image" , "none");
        }   

		if(onMoving || currentSlide == 1) return false;
		onMoving = true, currentSlide--;
		
		
		
		$.each(itemReverse, function() {
			
			var i 	 = $(this).index();
			var delay = i * 100;
			
			window.setTimeout(function (index) {
				return function () {
					$(itemReverse).eq(index).stop().animate({ 'right' : '-='+itemToSlide+'em' }, function() {
						if(index >= 0) onMoving = false;
					});
				};
			} (i), delay);      
		});
	});
});

in pratica ho aggiunto che scompare la freccina anche a sinistra quando si torna indietro.

Ora mancherebbe solo una cosa....:evil:
non far visualizzare la freccia a sinistra appena si apre la pagina.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
prova a metterlo subito dopo ready
PHP:
$(document).ready(function() { 
     $('.prev').css("background-image" , "none"); 

......................
 

dla86

Utente Attivo
27 Mag 2009
36
0
0
perfetto, funziona!...grazie mille per l'aiuto. appena ho un attimo posto tutti i codice per la gallery completa.
 

dla86

Utente Attivo
27 Mag 2009
36
0
0
Ciao,
ho provato il codice sui vari browser ma su Internet Explorer non funziona. come mai secondo voi? grazie mille per l'aiuto!!
 

dla86

Utente Attivo
27 Mag 2009
36
0
0
ho attivato il debug su IE (non sapevo esistesse) e mi da questo errore alla riga
itemReverse = item.get().reverse();

non supporta il metodo get... se commento questa riga mi da errore alla successiva

itemSize = item.size();

non supporta il metodo size... se commenta poi mi da errori alle variabili che risultano non definitte...io non capisco nulla di js...come posso risolvere? grazieee
 

dla86

Utente Attivo
27 Mag 2009
36
0
0
ho capito il problema. item era una parola chiave di IE e non può essere utilizzato negli script. l'ho rinominata in item_
 

luigi777

Utente Attivo
14 Feb 2008
1.085
1
38
39
Massa, Italy
sei nella funzione di prev quindi non puoi usare this
prova cosi
PHP:
if(currentSlide < 8) {
            $('.next').css("background-image" , "../images/next.png");
        }

.....anche se non c'entra nulla sull'argomento di questo topic avviso all'utente che il suo sito in firma c'è questa cosa:

il mio antivirus a segnalato questo:

14/10/2012 20:08:20 Filtro HTTP FILE http://www.improvvisiamo.com JS/Iframe.FK trojan horse connessione terminata - messo in quarantena pc-luigi\luigi Minaccia rilevata all'accesso al Web dall'applicazione: D:\Program Files (x86)\Mozilla Firefox\firefox.exe.

Woo. ecco perché io odio jquery e faccio tutto mano io..

saluti.. e scusate il disturbo..
ciao e buona serata.
 

dla86

Utente Attivo
27 Mag 2009
36
0
0
.....anche se non c'entra nulla sull'argomento di questo topic avviso all'utente che il suo sito in firma c'è questa cosa:

il mio antivirus a segnalato questo:

14/10/2012 20:08:20 Filtro HTTP FILE http://www.improvvisiamo.com JS/Iframe.FK trojan horse connessione terminata - messo in quarantena pc-luigi\luigi Minaccia rilevata all'accesso al Web dall'applicazione: D:\Program Files (x86)\Mozilla Firefox\firefox.exe.

Woo. ecco perché io odio jquery e faccio tutto mano io..

saluti.. e scusate il disturbo..
ciao e buona serata.

come faccio per risolvere questo problema?...ultimamente sostituisco sempre tutto il sito che ho in locale con quello in rete ma dopo qualche giorno di nuovo lo stesso problema :( vi prego aiutatemi!
 
Discussioni simili
Autore Titolo Forum Risposte Data
T [HTML] foto gallery HTML e CSS 1
A Caricare foto in una gallery PHP 0
S Gallery con Tag foto: problema doppia chiamata ajax con JQuery jQuery 2
G gallery foto con voto PHP 1
P [Javascript] Slide gallery con frecce Javascript 2
ANDREA20 [Javascript] Slideshow Gallery Javascript 0
felino [WordPress] Gallery a tutto schermo per i dispositivi mobile WordPress 1
S [HTML] Problemi con Blueimp image gallery su Chrome e Firefox HTML e CSS 2
F [PHP] joomla - responsive photo gallery Joomla 6
felino Gallery multilingua WordPress 0
O Gallery con immagini zoomabili Javascript 1
F gallery jquery-ajax Javascript 0
I dissolvenza ed immagini anteprima in slide gallery Javascript 2
M chrome - gallery svbuilder HTML e CSS 2
I problema gallery PHP 0
I gallery visualizza la prima immagine PHP 18
E joomla e phoca gallery problemi immagine categoria Joomla 8
E phoca gallery e immagine della categoria Presentati al Forum 4
redevilduil dividere la gallery in pagine con php PHP 3
M Creare una gallery con Dreamweaver HTML e CSS 21
I car cutaways per gallery Webdesign e Grafica 0
K CMS per gallery in .NET CMS (Content Management System) 0
D Free image gallery per wordpress WordPress 4
Web Designer Avatar Gallery MyBB CMS (Content Management System) 0
K Vendo sito FOTOANNUNCI GALLERY Offerte e Richieste di Lavoro e/o Collaborazione 0
G problema utilizzo highslide-gallery Javascript 0
M [Worpress] Problema con Nextgen Gallery CMS (Content Management System) 2
B Video Gallery in PHP PHP 3
P Gallery in php PHP 1
Artemisia Jquery gallery con più box testo jQuery 0
S Aiuto! Gallery flash e xml! Presentazione aziendale Flash 1
M Pagina PHP con gallery jQuery PHP 0
M come si fa a creare una gallery con flash Flash 0
T gallery before after in flash. Flash 2
T flash gallery e rollover HTML e CSS 4
danlupo Gallery PHP 5
R Gallery con zoom Javascript 4
N vi prego aiuto con una gallery Flash 2
I Gallery con effetto fade Javascript 0
M Consiglio modifica script gallery Javascript 3
M Domanda su gallery dinamica Flash 4
C gallery come questa!!! Flash 2
P Problemi con Gallery Flash 3
A Problema script gallery Flash 0
K Gallery in FLASH, aiuto! Flash 1
F Photo Gallery in Flash Flash 4
muvadi problema con script di una gallery PHP 1
M Java Gallery problem Javascript 3
K Gallery con Applet "Lake" .... Come fare? Help ..... Javascript 1
W Wider Gallery Presenta il tuo Sito 3

Discussioni simili