I've a site where users upload images and I'm displaying lots of images from users back to users. Most of the images are JPG but some are PNG.
I use manually created sprites for the images I have created myself but current user images are downloaded individually which adds time to page load.
I've done a bit of reading on PHP Dynamic Sprite Create like the on the links below:
http://www.mummey.org/2008/12/csprites-a-dynamic-css-sprite-generator-in-php5/
http://net.tutsplus.com/articles/news/dynamic-sprite-framework-with-php-new-plus-tutorial/
Does anyone have this functionality working and if so how/what did they use? recommendations?
cheers
I would combine PLupload (plupload.com) with the CSS Sprite Class from PHPClasses.org (http://www.phpclasses.org/package/6560-PHP-Generate-sprite-images-and-CSS-to-use-image-styles.html).
I recommend using PLupload because of the client-side image resizing feature, which can cut down on a lot of server processing.
Related
I have a galery of users that show all of user photos. I want to have small thumbnails for each photos.
How to make it?
Also I notice some website even create thumbnail that focus on the face part of the original photos.
I don't have any code just looking for suggestions.
Im using PHP, Codeigniter, Angularjs, Jquery.
Thank you!
In your controller when receiving the file, before uploading it, you need to do some processing to it. each image you will save it in 4 or 3 sizes, it will be like this for image called imageHello.jpg:`
site.com/images/large/imageHello.jpg
site.com/images/small/imageHello.jpg
site.com/images/thump/imageHello.jpg
So basically it will be site.com/images/[size]/imageHello.jpg, in the front end side you will file the size with what you want based on the page.
for zooming you can use this library, look at this example
I'm looking to build a javascript/jquery gallery that meets the criteria below, and would love to know if there are any existing gallery modules that have all/most of these features:
1. Photo wall with zoom (single view) functionality. eg. http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/
2. Responsive, so that the photo wall images tile properly for desktop & mobile devices, and reshuffle if the user resizes their browser. eg. http://isotope.metafizzy.co/
3. (optional but desirable). If a user is on a mobile device, allow them to swipe through single-view images.
In a nutshell. A user will go to the thumbnail wall, select an image, and can then either swipe through more enlarged photos, or switch back to the wall.
The photos will be sourced from a folder on the server. Moderators are simply camera girls, who will upload images from their digital cameras to this folder via ftp - They wont resize / optimise the images, so it would be great if this could happen in the process somewhere too.
We are hosting on a PHP / Linux environment.
Have a look at jQuery Mason: http://masonry.desandro.com/
It can be used as a responsive wall.
What your asking for is not called 'zoom' (that is another effect), you seem to what what is called a lightbox. There are a lot of these, here is a comparison, http://planetozh.com/projects/lightbox-clones/
To re-size images your going to have to write some php to make use of image GD or imagemagick, here is a tutorial, http://net.tutsplus.com/tutorials/php/image-resizing-made-easy-with-php/ or possibly a script, http://shiftingpixel.com/2008/03/03/smart-image-resizer/ (or timthumb.php).
For serving them your going to have to write some php with your javascript.
There is no all in one solution for what you asking for, you're going to have to write it or hire someone to do so.
As far as I know you have to create a plugin or write you own jquery functions for getting all customized features.(that will be very good in sense of performance and maintenance)
for zooming functionality you can use some of the modal windows with ajax call or you can create.
to achieve this you have to write good css so that your photo aligned according to screen.reshuffle will be handled if you write good css.
yes you can achieve this by detecting the browser navigator and changing the css and javascript accordingly.
For pre processing images(re sizing,dynamically generating thumbanails) you can opt for php backend solutions.
And no worries you can handle images from folder via Ajax and show them as they requires.
Just a quick question:
I'm working on revamping a script that serves vehicle inventory to users.
The site receives thousands of hits per month with many pageviews per visitor.
My question is this:
I am going to have 7 images for each vehicle in the new system.
1 Main Product Photo
6 Interior Extra Photos
The 6 extras will be viewed as a thumbnail, with the ability to load the full image in a lightbox.
Now, to the question:
Should I use TimThumb (or similar) to resize the images to Thumbs on the fly, OR should I create a thumb directory and save a thumbnail for each image as it is added to the server?
I use TimThumb for the main image, and it works quite well, but I'm debating which is easier on the server for the other 6 images.
Thanks!
it might not differ while the load is low, but rebuilding thumbs on request is quite resuorce consuming. if server load matters, you should save thumbnails.
there are two ways to do this:
- generate all thumbs on image upload
- generate thumbs on first request and save them
The easiest on the server is to use javascript on the client side. Its a little slower loading for the user if there are a lot of images being served but if there are less than 10 it should be okay. Look into using jQuery and CJ Object Scaler http://plugins.jquery.com/project/cj_object_scaler
I am trying to build a system that allows a user to select an image from their own computer, and crop it using the jCrop tool from jQuery. My question is can I show the image the user has selected from their system without uploading it to a system, I dont really want to do two uploads, unless I can do the first upload silently? Any help would be great.
Thank you.
You don't have to upload twice. Just upload the image at first time
Use jCrop and send image Thumbnail's coordinates(x,y), width and height.
Resize Image according to them
AFAIK, not using JavaScript and HTML (4) at the moment.
Flash can do image processing before upload - SWFUpload for example can resize images before uploading (doesn't support cropping though), but I don't know an Open Source implementation of a Cropping tool in Flash.
It will probably also be possible using HTML 5.
However, I don't see how you would need two uploads to do this? Isn't it 1. Upload 2. Show with Cropper 3. send Crop info to PHP script that processes the uploaded file?
I know there is way of creating thumbnail from swf video files using ffmpeg to take snapshot, but is there any way out there to create thumbnail from swf games files?
No.
How would you programmatically determine the necessary key-presses to get to the part you want to capture? Intros, splash screens, main menu, keyboard/mouse controls, buttons in different locations doing different things... Too many variables to automate such a task; Each game is different.
It's simple enough to find an embedded video file in the swf container, but a "game" is a complex interaction of animated objects.