I'm looking for some easy to implement gallery for my site.
The best option for me would be gallery that has those futures.
Number of stars shows how important is that for me.
Load all images from directory **
Resize images to fit to gallery area (landscape, portrait) *
Show images title *
easy to implement **
Works on all browsers *
galleria! (honest) It took me 3 hours to set up a complete slideshow with Picasa from scratch. Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices. It supports all of your requirements.
docs here
Related
It seems that Sonata Media has only two strategies when it comes to cropping/resizing the uploaded image, Sonata\MediaBundle\Resizer\SimpleResizer and Sonata\MediaBundle\Resizer\SquareResizer. Both these strategies are automatic, meaning that the users don't have a say in how they want the image to be resized/croppped.
I would like to give the user an option to select the portion of the image that is more relevant, kind like the jQuery Image Cropper library used by GenemuFormBundle, but I don't even know where to start. Will I need to create my own Admin class instead of using Sonata\MediaBundle\Admin\BaseMediaAdmin? Has anyone write a bundle that I can use? How do you manage your galleries usually?
You should look at ComurImageBundle. It's far easier than Sonata Media, doesn't create anything in database and lets you upload with jquery file uploader, crop with jcrop and other useful things.
I wrote a simple admin extension that give you the ability to customize the images by format. It's actually a Work In Progress that needs some test, documentation and refactoring, but it does the job, it's lightweight and it's shipped with a resizer to handle fixed dimensions.
You can find it here: https://github.com/julien-maitan/sonata-media-crop
If you are using sonata media bundle with sonata admin, there is a picasa photo editor already in place in media edit form.
Please check.
Recently stumbled upon a stock video footage site http://www.pond5.com/stock-video-footage/1/*.html , and saw that they had a preview of a video when the user hovered over a thumbnail. I want to recreate this, because it seems like useful practice and it will allow me to workout my web developing muscles.
I would like to be able to preview a video when a user hovers over a thumbnail.
For example like pond5.com. Audio is not necessary, but I would like it to look smooth like a video rather than a video preview that contains a frame every 5 seconds.
On pond5.com, I originally thought they used a gif, but it plays very smoothly. Some also contain audio. As far as I thought, audio can't be used in .GIFs
Is this a case where I would have to just upload a 2nd video for the preview?
Thank you for any help.
Pond5, the website you specifically mentioned, creates a video thumbnail with watermark and lowered quality and stores it. It is then played back using JavaScript to dynamically load a div element that contains the flash player. So no GIFs are involved. You do need to upload a 2nd video, but the steps to this project are as follows:
Server-side video thumbnail/watermarking: Not sure if there are any PHP packages that are up to the task on this one. I would write a more powerful program in C++ or C#. If you go with C#, quick and easy solution would be Microsoft Expression Encoder.
Flash/Silverlight/HTML5 video player: To play the video.
Client-side JavaScript: To load the fancy popup and the aforementioned video player. Note that you might need to use PHP and a database engine to load the thumbnail URL for the video requested.
This is what Pond5, and what many other stock-footage sites use, and the basic outline of what you would need to do to achieve similar results.
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.
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.
I have built a website using php and simple HTML/CSS for a client. In its simplest form : The website allows users to upload pictures and view them in a virtual art gallery. Basically I just placed images against a background image that looks like a art gallery wall.
The client wants a 3d website now, where the user can "walk through rooms and view pictures on walls, etc."
I'm wondering what's the best way to create a 3d environment that will allow me to use php to dynamically change the layout of the walls. I have been thinking of using html5 canvas.
I'm open to pretty much anything. Thanks!
You can try WebGL, Adobe Flash/Flex, Silverlight or Java applets for that.
For all approaches, you likely will have a "loader program" (or "engine") which then fetches the room description via RPC from your PHP-based backend, along with image URI and other stuff you need. This way, there is no need to change your program again just for updating the rooms or images.