webForumDet fria alternativet

hur baka in javascript i php

10 svar · 577 visningar · startad av ullan

ullanMedlem sedan aug. 200442 inlägg
#1

Hej. håller på med ett bildgalleri och har fått ett php-script som sorterar de olika thumbnails efter årtal. Nu skulle jag vilja få dem klickbara som popups. Har förstått att man behöver använda javascript för att åstakomma det. Har hittat ett sådant här på webforum, men jag vet inte hur jag ska "baka in" det i php-koden. Den första biten har jag lagt i head-taggen, men sen vet jag inte vart jag ska åberopa scriptet, eftersom jag ju inte har någon konkret thumnail som jag kan ange i javascriptskoden.Thumbnailsen hämtas ju från en bildmapp. Den andra biten ser väl ut nåt såhär:

<a href="javascript:openimg('foton/bildensnamn.jpg')"><img src="thumbs/bildensnamn.jpg" border="0" alt="Klicka för förstoring"></a>

Såhär ser min kod ut nu:

  <?

function printimages($path) {
	$dh = opendir($path);
	if (!$dh) return;
	$breakcount = 0;
	while($file = readdir($dh)) {
		if ($file == "." && $file == "..") continue;
		$image = "$path/$file";
		if (is_file($image)) {
			// En bild som ligger i en subkatalog.
			?>
			
<html> 
<head> 

[red]<script type="text/javascript"><!--
function openimg(img){
  foto1= new Image();
  foto1.src=(img);
  Controlla(img);
}
function Controlla(img){
  if((foto1.width!=0)&&(foto1.height!=0)){
    viewFoto(img);
  }
  else{
    funzione="Controlla('"+img+"')";
    intervallo=setTimeout(funzione,20);
  }
}
function viewFoto(img){
  largh=foto1.width+20;
  altez=foto1.height+20;
  stringa="width="+largh+",height="+altez;
  finestra=window.open(img,"",stringa);
}
//--></script>[/red]
</head> 

<img height="71" width="71" src="<?= $image; ?>">
			<?		
			$breakcount++;
			if ($breakcount > 5) {
				echo "<br>";
				$breakcount = 0;
			}
		}
	}
	closedir($dh);
}

function printthumbs($dir) {

	$dh = opendir($dir);
	if (!$dh) return;

	while($file = readdir($dh)) {
		$path = "$dir/$file";
		if ($file != "." && $file != ".." && is_dir($path)) {
		// En katalog i images (troligsvis den första året du har)
			echo "<p>$file</p>";
			printimages($path);
		}

	}
	closedir($dh);

}

printthumbs("./images");

?>

Tacksam för hjälp, är väldigt mycket nybörjare.

MatteMedlem sedan aug. 20002 970 inlägg
#2

Tänk på att det är HTML/Javascript-kod du skriver ut i ditt PHP-skript.
Själva "utskriften" körs sedan i webbläsaren.

Lyft ut din <html>/<body> samt Javascript-funktioner från loopen, och lägg din länk där du nu skriver ut bilden.

ullanMedlem sedan aug. 200442 inlägg
#3

Hej och tack för ditt svar. Nu funkar det nästan! Thumbnailsen är klickbara, men den öppnar inte originalbilden, utan ytterligare en thumbnail. Har förstått ett det har med $image att göra, som hänvisar till katalogen med thumbnailsen..? Hur kan man göra så att den hittar de stora bilderna som ligger utanför images-mappes? Såhär blir det www.vallnet.nu/mp00361-p1/galleri/index.php?ishome=1&filename=17.jpg&filenumber=1

Såhär ser koden ut nu

<?

function printimages($path) {
	$dh = opendir($path);
	if (!$dh) return;
	$breakcount = 0;
	while($file = readdir($dh)) {
		if ($file == "." && $file == "..") continue;
		$image = "$path/$file";
		if (is_file($image)) {
			// En bild som ligger i en subkatalog.
			?>
			

<script type="text/javascript"><!--
function openimg(img){
  foto1= new Image();
  foto1.src=(img);
  Controlla(img);
}
function Controlla(img){
  if((foto1.width!=0)&&(foto1.height!=0)){
    viewFoto(img);
  }
  else{
    funzione="Controlla('"+img+"')";
    intervallo=setTimeout(funzione,20);
  }
}
function viewFoto(img){
  largh=foto1.width+20;
  altez=foto1.height+20;
  stringa="width="+largh+",height="+altez;
  finestra=window.open(img,"",stringa);
}
//--></script>

[red]<a href="javascript:openimg('<?= $image; ?>')">
<img height="71" width="71" src="<?= $image; ?>"></a>[/red]
			<?		
			$breakcount++;
			if ($breakcount > 8) {
				echo "<br>";
				$breakcount = 0;
			}
		}
	}
	closedir($dh);
}

function printthumbs($dir) {

	$dh = opendir($dir);
	if (!$dh) return;

	while($file = readdir($dh)) {
		$path = "$dir/$file";
		if ($file != "." && $file != ".." && is_dir($path)) {
			// En katalog i images (troligsvis den första året du har)
			echo "<p>$file</p>";
			printimages($path);
		}

	}
	closedir($dh);

}

printthumbs("./images");

?>
MatteMedlem sedan aug. 20002 970 inlägg
#4

Var ligger dina "rätta" bilder ?

Du har fortfarande inte flyttat ut javascript-funktionerna ur loopen.

ullanMedlem sedan aug. 200442 inlägg
#5

Jag vet inte om jag förstår dig rätt. De rätta bilderna ligger löst tillsammans med index.php-filen, utanför images-mappen som innehåller thumbnailsen. Ska jag kanske samla de stora bilderna i en separat mapp precis som jag gjorde med thumbnailsen?

Vad gäller javascriptfunktionerna så är jag inte heller säker på vad du menar med loopen. Menar du PHP-loopen, alltså innanför eller utanför <?> (med risk för att framstå som komplett idiot). Så som det är nu så är de ju utanför.

MatteMedlem sedan aug. 20002 970 inlägg
#6

Ha originalbilderna i en katalogstruktur likadan som dina thumbnails.
Låt den enda skillnaden i filnamnet vara att tumnaglarna har 'thumb_' som prefix.
Loopa katalogen med originalbilderna, och genom att använda en annan ursprungsmapp, samt prefixet, kan du visa dina thumbnails.

Lägg din Javascript före PHP-funktionerna tillsammans med html/head.

ullanMedlem sedan aug. 200442 inlägg
#7

Ok, om jag gör en sak i taget: Såhär ser min kod ut efter att ha flyttat Javascript-funktionen före PHP-funktionen. Var det så du menade?


<html>
<head>

<script type="text/javascript"><!--
function openimg(img){
  foto1= new Image();
  foto1.src=(img);
  Controlla(img);
}
function Controlla(img){
  if((foto1.width!=0)&&(foto1.height!=0)){
    viewFoto(img);
  }
  else{
    funzione="Controlla('"+img+"')";
    intervallo=setTimeout(funzione,20);
  }
}
function viewFoto(img){
  largh=foto1.width+20;
  altez=foto1.height+20;
  stringa="width="+largh+",height="+altez;
  finestra=window.open(img,"",stringa);
}
//--></script>

</head>

<?

function printimages($path) {
	$dh = opendir($path);
	if (!$dh) return;
	$breakcount = 0;
	while($file = readdir($dh)) {
		if ($file == "." && $file == "..") continue;
		$image = "$path/$file";
		if (is_file($image)) {
			// En bild som ligger i en subkatalog.
			?>
		
<body>
<a href="javascript:openimg('galleri/stora_bilder[red])">//Här vet jag inte vad jag ska skriva[/red]
<img height="71" width="71" src="<?= $image; ?>"></a>
</body>
</html>

			<?		
			$breakcount++;
			if ($breakcount > 8) {
				echo "<br>";
				$breakcount = 0;
			}
		}
	}
	closedir($dh);
}

function printthumbs($dir) {

	$dh = opendir($dir);
	if (!$dh) return;

	while($file = readdir($dh)) {
		$path = "$dir/$file";
		if ($file != "." && $file != ".." && is_dir($path)) {
			// En katalog i images (troligsvis den första året du har)
			echo "<p>$file</p>";
			printimages($path);
		}

	}
	closedir($dh);

}

printthumbs("./images");

?>

Sen angående thumbsen: Kan jag låta dem ligga kvar i Images-mappen, men med prefixet thumb_ framför varje enskild bild? Och räcker det om jag gör en mapp som heter typ "stora_bilder" i vilken jag lägger alla originalbilder? Men var ska jag åberopa den mappen i koden? Och hur kan den då koppla ihop varje thumb med den rättas bilden? Många frågor blir det...

MatteMedlem sedan aug. 20002 970 inlägg
#8

Om jag nu har din katalogstruktur och filnamn rätt för mig, testa med det här:

<html>
<head>

<script type="text/javascript"><!--
function openimg(img){
  foto1= new Image();
  foto1.src=(img);
  Controlla(img);
}
function Controlla(img){
  if((foto1.width!=0)&&(foto1.height!=0)){
    viewFoto(img);
  }
  else{
    funzione="Controlla('"+img+"')";
    intervallo=setTimeout(funzione,20);
  }
}
function viewFoto(img){
  largh=foto1.width+20;
  altez=foto1.height+20;
  stringa="width="+largh+",height="+altez;
  finestra=window.open(img,"",stringa);
}
//--></script>

</head>
<body>

<?php

function printimages($path) {
	$dh = opendir($path);
	if (!$dh) return;
	$breakcount = 0;
	while($file = readdir($dh)) {
		if ($file == "." && $file == "..") continue;
		$thumb = "$path/$file";
    $image = 'galleri/stora_bilder/' . basename($path) . '/' . substr($file, 6);
		if (is_file($thumb)) {
			// En bild som ligger i en subkatalog.
?>
<a href="javascript:openimg('<?=$image?>')"><img height="71" width="71" src="<?=$thumb; ?>"></a>
<?php		
			$breakcount++;
			if ($breakcount > 8) {
				echo "<br>";
				$breakcount = 0;
			}
		}
	}
	closedir($dh);
}

function printthumbs($dir) {

	$dh = opendir($dir);
	if (!$dh) return;

	while($file = readdir($dh)) {
		$path = "$dir/$file";
		if ($file != "." && $file != ".." && is_dir($path)) {
			// En katalog i images (troligsvis den första året du har)
			echo "<p>$file</p>";
			printimages($path);
		}

	}
	closedir($dh);

}

printthumbs("./images");

?>

</body>
</html>
ullanMedlem sedan aug. 200442 inlägg
#9

Hej igen. Nja, den verkar inte hitta bilden iaf, Se länken nedan

http://www.vallnet.nu/mp00361-p1/galleri/index.php

Har gjort en likadan mappstruktur som med thumbnailsen, förutom att thumbnailsen har thumb_framför.

MatteMedlem sedan aug. 20002 970 inlägg
#10

Ändra

$image = 'galleri/stora_bilder/' . basename($path) . '/' . substr($file, 6);

till

$image = 'stora_bilder/' . basename($path) . '/' . substr($file, 6);

Vi är redan i katalogen galleri.

ullanMedlem sedan aug. 200442 inlägg
#11

Nu fungerar det bortsett från lite småpill. Tack så hemskt mycket, du har varit till stor hjälp :) !!

Genererad på 374 ms · cache AV · v20260730165559-full.f96bc7eb