Avatar billede hoejgaard Juniormester
26. juni 2005 - 14:40 Der er 4 kommentarer og
1 løsning

billeder som thumbnail

Hej.
Jeg har en side hvor jeg gerne vil vise nogle billeder som brugere kan lægge ind.
Jeg vil gerne ha de fylder det samme eks. 50x50 pixels, uden at de forvrænges.
Jeg er jo så nødt til at vise udsnit af billedet, da ikke billeder jo er kvadratiske :-)
Er der nogen der har et script der kan klare dette ??
Samtidig vil jeg gerne bibeholde original  billedet så hvis man klikker på udsnitsbilledet så skal det store origanale billede poppe op.
Håber på hjælp :-)
Avatar billede hoejgaard Juniormester
26. juni 2005 - 15:06 #1
Har selv fundet dette på www.php.net :

<?php
// The file
$filename = 'moon.jpg';
$percent = 1.0; // if you want to scale down first
$imagethumbsize = 50; // thumbnail size (area cropped in middle of image)
// Content type
header('Content-type: image/jpeg');

// Get new dimensions
list($width, $height) = getimagesize($filename);
$new_width = $width * $percent;
$new_height = $height * $percent;

// Resample
$image_p = imagecreatetruecolor($imagethumbsize , $imagethumbsize);  // true color for best quality
$image = imagecreatefromjpeg($filename);

// basically take this line and put in your versin the -($new_width/2) + ($imagethumbsize/2) & -($new_height/2) + ($imagethumbsize/2) for
// the 2/3 position in the 3 and 4 place for imagecopyresampled
// -($new_width/2) + ($imagethumbsize/2)
// AND
// -($new_height/2) + ($imagethumbsize/2)
// are the trick
imagecopyresampled($image_p, $image, -($new_width/2) + ($imagethumbsize/2), -($new_height/2) + ($imagethumbsize/2), 0, 0, $new_width , $new_width , $width, $height);

// Output

imagejpeg($image_p, null, 100);
?>

Jeg vil dog gerne have formindsket billedet indet der laves et kvadratisk udsnit, da men ellers ikke får et indtryk af hvad der er på udsnittet. Formindskelsen skal tage hensyn til højde/bredde forhold. Nogen der kan løse det ??
Avatar billede hoejgaard Juniormester
26. juni 2005 - 15:14 #2
Nu skal jeg så ha det lavet sådan at det er det originale billede der ppopper op når man klikker på udsnittet.. Hvordan laver man det ??
Avatar billede coderdk Praktikant
27. juni 2005 - 02:05 #3
Øhm, smid et link rundt om thumbnails'ne som laver et popupvindue med URL'en til det store billede?
Avatar billede hoejgaard Juniormester
27. juni 2005 - 17:50 #4
okay det er på plads med popupbilledet, men vil gerne have at det ikke bliver større end at det kan ses på et skærmbillede. Det gør det nemlig nu. Her er scriptet :

<Script Language="JavaScript">
// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.

// SETUPS:
// ===============================

// Set the horizontal and vertical position for the popup

PositionX = 100;
PositionY = 50;

// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)

defaultWidth  = 500;
defaultHeight = 500;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = true;

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=yes,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=ffffff scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=ffffff scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();
}}
</script>
Avatar billede hoejgaard Juniormester
05. juli 2005 - 22:19 #5
har løst problemet
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester