-
Apple’s Stylish Media Browsing as aWeb App
Anyone out there familar with Apple’s slick browsing system? Like for music it shows the album pictures and let’s you scroll through them. I want to make something like this for website purposes with javascript (I don’t have access to flash).
Anyways the main thing I was wondering is if anyone knows how to take the pictures and distort them so they look slanted at an angle. And then flip vertically and horizantally positoned beneath the image with some transparency to use it as the reflection.
Any help at all on this project would be much appreciated. I have a feeling I may be in a bit over my head.
The “Ice Cream Man“
-
14 Replies
-
This project is actually going a lot smoother than I thought it would. One question:
What is the best way to go about distorting the images to make them look turned at an agnle?
thanks
The “Ice Cream Man“
-
Try something like this in PHP
// filename of the original image
$fileName = “cow.jpg”;
// load the original image from the file
$original = imagecreatefromjpeg($fileName);// degrees to rotate the image (counter clockwise)
$angle = 90.0;
// rotate the image by $angle degrees
$rotated = imagerotate($original, $angle, 0);// print the appropriate header type
// this tells the browser we’re displaying a jpeg image
header(‘Content-type: image/jpeg’);
// use the imagejpeg() method to display the rotated image
imagejpeg($rotated);This will rotate it 45 Degrees:
// filename of the original image
$fileName = “cow.jpg”;
// degrees to rotate the image (counter clockwise)
$angle = 45.0;
// if the resulting image is not rectangular..
// .. what colour will the uncovered bits be?
$bgColour = 0xFFFFFF; // red
// load the original image from the file
$original = imagecreatefromjpeg($fileName);
// rotate the image by $angle degrees
$rotated = imagerotate($original, $angle, $bgColour);
// print the appropriate header type
// this tells the browser we’re displaying a jpeg image
header(‘Content-type: image/jpeg’);
// use the imagejpeg() method to display the rotated image
imagejpeg($rotated);I’ve never done it but I’m sure it works =)
Found the code at
https://discomoose.org/2006/04/28/rotating-pictures-with-php/Have fun!
-
Thanks Abraham. That’s really cool.
Sorry – bad communication on my part. What I’m actually trying to do is give the image a 3d perspective like this (which I did in photoshop):
The “Ice Cream Man“
-
Yea I kinda understood that in your first post though I can’t solve the problem for you – I don’t think you’re going to accomplish that effectively in javascript though it is possible. I’d say using the PHP image controls is the way to go. I’ve seen 3D worlds rendered using PHP so anything is possible.
-
Oh ok. Thanks I’ll have to check that out. By the way on the code you posted I keep getting this:
Fatal error: Call to undefined function imagecreatefromjpeg() in C:\Server\Apache2.2\htdocs\picrotate.php on line 7
Do you know what that’s all about?
thanks again.
The “Ice Cream Man“
-
What ever server you are running on doesn’t have the PHP imaging package installed on it. Google “site:php.net imagecreatefromjpeg”
Have your server admin install the package that will run these functions.
-
Hey, you might want to check this little script out. Its pretty cool..
https://www.ajaxcompilation.com/reflectionjs/Also if you google “Ajax carousel” you can find an ajax example to use for scrolling through the images
-
Yeah I’m using a reflection Javascript similar to that – it’s really awesome. I’ll look into the Ajax carousel. That should be a nice touch. Thank you very much.
Here’s one last question [hopefully :)] :
I made this javascript, which is printing a js array, a php variable (took out the “<"s so it would display): script type='text/javascript' document.write(photo[0]) /script I am then inserting that variable into another like this: $image="$dir/$java"; This is creative the link for the image. And of course it outputs the full javascript code instead of printing the array. My question is how do I get the array name to show? I'm thinking it must be done with a function() . . . The “Ice Cream Man“
-
Is this what you are attempting?
-
Sort of. And that would work except I need the output of the javscript, eg “cow.jpg” to be used in $image so that I can run the image through this:
//Gets the width and height of the image and outputs it as $theimage[0] (width) and $theimage[1]
(height)
$theimage = getimagesize($image);
$width = $theimage[0];
$height = $theimage[1];like I said I think this can be done with a function() but I don’t know – I’m not very experienced with using function()
The “Ice Cream Man“
Reply to this Discussion! Login or Sign Up