PHP e Lazyload

Atomnet · 2013-08-21T18:09:48+0200

Ciao,
ho un piccolo script per caricare immagini da cartella server per creare una galleria, avendo molteplici immagini vorrei applicare un'efetto di caricamento e caricaricare solo le immagini richieste in quel momento, ed ho trovato Lazyload ma ho visto che funziona solo con immagini dichiarate all'interno del file .html.
Posso adattarlo al mio script PHP?

Grazie.

Script PHP

PHP:

<?php
$directory = "/immagini*.jpg";
$files=glob($directory);
$files=array_map("basename", $files);
foreach($files as $ch => $file){
    echo "<li><a href=\"immagini/$file\"><img src=\"immagini/miniature/$file\" alt=\"- $ch\" /></a></li>"; 
}
?>

borgo italia · 2013-08-21T18:50:37+0200

ciao
non ho mai usato lazy, ma dando un occhio forse puoi fare così

PHP:

<?php
$directory = "/immagini*.jpg";
$files=glob($directory);
$files=array_map("basename", $files);
foreach($files as $ch => $file){
    echo "<li><a href=\"immagini/$file\"><img class=\"lazy\" src=\"img/grey.gif\" data-original=\"immagini/miniature/$file\" width=\"80\" height=\"120\" alt=\"- $ch\">
</a></li>"; 
}
?>

al massimo non funzia

Atomnet · 2013-08-22T18:07:06+0200

Ciao,
non funzia

o meglio non vengono visualizzate le immagini, viene visualizzato solo il nome ed il contenitore.

immagine:

borgo italia · 2013-08-22T20:04:28+0200

ciao
come ti ho detto non ho mai provato kazy e quindi sto andando un po' a naso.
prova a sostrtuire
src=\"img/grey.gif\" data-original=\"immagini/miniature/$file\"
con
src=\"immagini/miniature/$file\" data-original=\"immagini/miniature/$file\"
eventualmente prova anche eliminando
data-original=\"immagini/miniature/$file\"

Atomnet · 2013-08-23T17:24:03+0200

Ciao,
funziona alla perfezione!!

ma non modificando come hai detto tu ma togliendo i parametri dell'iimagine: width=\"80\" height=\"120\" (tu l'hai fatto perchè non sapevi che avevo già la dimensione dell'imagine). :fonzie:
La cosa strana però e che quando la pagina viene caricata si vede in ogni immaggine la rotella di caricamento che gira e cioè: src=\"img/grey.gif\ e le iimagini vengono visualizzate non appena la rotellinna del mouse fa u solo click.
Perchè?

borgo italia · 2013-08-23T18:09:16+0200

ciao
la "rotellina" serve per avvisare l'utente che "qualcosa" si sta caricando e non è che il sito si sia bloccato, quindi serve ed è utile (la uso simile anche io nelle mie gallery).
per il secondo problema non so dirti, da quello che ho capito di lazy le immagini si caricano un po' alla volta in funzione di come scorri la pagina quindi può essere quello

Atomnet · 2013-08-25T22:36:43+0200

Sto impazzendo non riesco a capire quale sia il problema, come dicevo sopra ovvero che mi appare la pagina con la rotellina...... mi sono accorto che aggiornando la pagina con F5 tutto funziona benissimo. Però devo sempre aggiornare prima che tutto funzioni.

borgo italia · 2013-08-26T10:10:16+0200

ciao
ho provayto a leggere, ma dovrei caricarmelo per provare, quindi provo a dire una put....ta.
da quello che dici la pagina funzia dopo F5 aggiorna quindi prova a farla aggiornare in automatico appena la richiami

PHP:

<?php
header( "refresh:0;url={$_SERVER['PHP_SELF']}" ); // o  refresh:1
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<!-- tutti i js, jq, css... -->
</head>
<body>
<!-- la parte di html+php...-->
</body>
</html>

guarda che come detto può essere una put....ta.

Atomnet · 2013-08-26T15:26:30+0200

Ciao,
allora ti posto il codice senza il php/refresh perchè me lo aggiorna in continuazione

così puoi capire meglio:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
	<head> 
		<title>Gallery</title> 

		<!-- <meta name="viewport" content="width=device-width, initial-scale=1" />  -->


		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" src="js/script.js"></script>



	<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -->	</head> 	

		
  <body>
		<div data-role="page" class="page gallery-page">
			<div data-role="header">
				<a href="gallery.html" data-icon="arrow-l" data-rel="back" data-direction="reverse">Back</a>
				<a href="index.html" data-icon="home" data-direction="reverse">Home</a>
				<h1>Titolo</h1>
			</div>
			<div data-role="content" class="full-width">
				<ul class="4gallery" id="gallery">
  
				
<?php 
$directory = "cartella/immagini/*.jpg"; 
$files=glob($directory); 
$files=array_map("basename", $files); 
foreach($files as $ch => $file){ 
    echo "<li><a href=\"cartella/immagini/$file\"><img class=\"lazy\" src=\"img/loader.gif\" data-original=\"cartella/immagini/miniature/$file\" alt=\"nome immagine $ch\"> 
</a></li>"; 
} 
?>
				
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	jQuery(document).ready(function(){
		$("img").lazyload({
				    failurelimit : 300,
		    effect : "fadeIn"
		});
	});
</script>					
				</ul>
			</div>

		</div>
		
		
	</body>
</html>

borgo italia · 2013-08-26T15:59:07+0200

cia
ora guardo, però intanto togli un doctype. ne hai uno di troppo, togli quello che hai nel mezzo

Atomnet · 2013-08-26T21:00:01+0200

Si scusa per il doppio doctype è stato un'errore nel copia incolla....

Atomnet · 2013-08-28T21:51:39+0200

Ancora niente non riesco a capire, osservando il caricamento pagina con firebug ho notato che dall'homepage cliccando sulla sezione da raggiungere la pagina cambia ma il codice in firebug no, quando faccio F5 cambia il codice e la pagina viene caricata correttamente. :incazz:

borgo italia · 2013-08-29T08:17:30+0200

ciao
dai un occhio alla pag http://www.appelsiini.net/projects/lazyload/enabled.html e guarda il codice sorgente (con FF tools=> web developper => page source).
mi sembra che tu abbia posizionato male la jq

Atomnet · 2013-08-31T23:02:12+0200

Ciao

ho provato a sistemare la jq sia jquery che lazyload, lazy l'ho messa anche nel footer ma il problema non si risolve se sposto di riga nella pagina index la jquery.com mi sballa l'homepage ma funziona quando carico la galleria.
e come se quando clicco sulla galleria invece di visualizzare la pagina non viene caricata, il codice non avanza rimane nell'index, quando faccio f5 il codice avanza e la pagina viene caricata correttamente.
Uso 2 CSS uno per index e l'altro per la galleria, secondo me' l'errore sta li ma non riesco a capire dove.

Atomnet · 4 Set 2013

Ho risolto con il caro e buono wordpress anche se per fare una homepage per richiamare degli script php mi pare un po esagerato però funziona

Cerca

Cerca

PHP e Lazyload

Atomnet

Nuovo Utente

borgo italia

Super Moderatore

Atomnet

Nuovo Utente

borgo italia

Super Moderatore

Atomnet

Nuovo Utente

borgo italia

Super Moderatore

Atomnet

Nuovo Utente

borgo italia

Super Moderatore

Atomnet

Nuovo Utente

borgo italia

Super Moderatore

Atomnet

Nuovo Utente

Atomnet

Nuovo Utente

borgo italia

Super Moderatore

Atomnet

Nuovo Utente

Atomnet

Nuovo Utente

Discussioni simili