need to provide an "add from existing" functionality for uploaded images. What is a basic approach to do that? Thought of displaying a modal window but thought that if there will be a lot of images it will definitely pull back the performance. Had anybody a similar task? Thanks.
I've done this once before, and the best way is to generate thumbnails for each photo to browse in a modal window. You'd also be best off by trying to have some kind of folder architecture, and even have a sort function (date added?).
Have a look at the jQuery File Tree plugin, you might be able to script something off of that (ex: every time you click an image it is append to a div on the page for a preview)
Related
My page will have a lot of images, which will take a lot of time to load and will make it very slow, so my question is
how to make the page to download and display only the pictures that are being shown in front of you, exactly the same as performing image search with google, whenever you scroll it will keep downloading and displaying the focused images.
Thanks all.
Image lazy loading
eg Lazy Load Plugin for jQuery (http://www.appelsiini.net/projects/lazyload)
Demo: http://speckyboy.com/demo/lazy/index.html
Use ajax, you can easily detect the view port by javascript and the images dimensions, so when scrolling, all you have is to send request to populate more rows of the view, this could be tables or div.
You can't do something like that in PHP.
It has be done in JQuery.
There is a plugin that does what you need, called Lazy Load.
Take a look on this site: http://www.appelsiini.net/projects/lazyload
I just need a bit of advice on what direction to go with something I am creating.
It is a simple php based webpage for our sports and social members in our office, allowing them to create, edit, view and delete events for all members to see. Events like day trips, bbq's and all kinds of things like that.
So far I have it all working as I would like, other than one thing, being the event logos.
At present, the events are all stored in a mysql database, in one table, with a column for every aspect of the event; time, date, price, venue etc etc.
I also have two columns for the event logos, one for the venue logo, and one for the general event logo.
What I need advice on, is the best way to create a page that allows a user to upload an image to the server, browse the images already uploaded, select one, and have it's file path entered into a text input when creating the event.
Could someone offer their suggestions on the best way to go about this, or offer an alternative method for selecting and inputting a logo for the event?
Thanks
The Uploadify jQuery plugin works really well for batch and/or AJAX uploads. The way I'd handle your situation would be this:
Show all images on the same page with the form, and give each image a related radio button with the image path as the button's value, so the user simply checks the image they want to use,
If the user wants to upload images, use the Uploadify plugin and it's AJAX callback functions to dynamically populate the existing list of radio buttons.
The comment I made on your question, asking wether you store images (or their file paths) was because I think it would be much easier (and cleaner) for you to retrieve a list of uploaded images by querying a database. Personally, I don't store images in a database, only their file paths, and use PHP to handle any images that need to be deleted or moved. It's easier to assing images to other entities (especially in many-to-many relationships) that way.
If you don't want to store images' data in a separate table, I guess you'd have to use PHP file system functions to get a list of files already uploaded (glob comes to mind, although there could be better functions or this).
EDIT:
There is also a very good AJAX file browser plugin - ckFinder, but I have very little experience with it and can't really comment on its workflow, but if you find it to be a more elegant solution, you should try it out.
if i could understand your question you want to associate the image with the event i.e tag the image with the event right ??
you can use jquery's attr() function to grab the src of img and put it in input field
I ended up storing the images in the database itself.
Saved some hassle on the file path side of things.
I have a photo website which gathers images from a folder with PHP, displays their thumbnails on a page and, when clicked, opens a fancybox (fancybox.net) to display the full image. I am pretty satisfied with the result but as users start posting, they start asking for new features, and problems come out since I'm not a programmer. What I would like to do is a photo commenting/rating system (like the one on facebook to get the idea, but obviously not as complex): I've been trying to add a Disqus code to each picture, but it won't get displayed in my fancyboxes...So the question is, can you give me any (easy-to-implement) ideas on how to achieve this? I don't mind using already existing softwares like disqus for comments and polldaddy for ratings, since I guess it would require me to setup a mysql database to do it on my own...
To brief it again:
I have a "thumbs" folder which are gathered on a page.
I have an "originals" folder with the full size images that are called back by the fancybox.
I would like to have comments+rating in the fancybox.
Thanks in advance for any advice you can give me.
For your fancybox implementation I'm assuming that it's just pulling the image into the lightbox, not other content (i.e. a html page). What you'd need to do is set up a page which would grab an image, and output it along with your comments + rating code, then set up your script to use that page as the fancybox URL instead of a direct link to the image.
Without more information to go on I can't really help more than that.
ps for comments the Facebook Comments plugin might be easier for a non programmer to implement than Disqus.
I would like to implement a RTE (Rich Text Editor) with the ability to upload images anywhere inside the text. My aim is to create an "add / edit news article" page, where the client can write a story with images.
I am good at PHP and Javascript programming, so I am looking for help about methods of implementing this. Do I create a custom button in this RTE to insert a previously uploaded image or some other way? How do I display those images for the user to choose? Etc.
Bonus points for:
Multiple files upload: the ability for the client to just select e.g. 10 images that are relevant to this story.
Uses some method other than Flash as a default for upload.
Uses jQuery as I use it a lot.
RTE is very lightweight. I don't care if the client has to know a few things (like markdown or something similar), I just don't like bloated RTEs.
Uses new technologies, like HTML5 and / or CSS3.
Let me clarify a few things. I know a few Javascript RTEs and have also used them in several CMSs. So I don't need links to these, I can Google "javascript RTE" myself :). However, something like #hakre said is useful as he pointed out how extensible CKEditor is, which I was not fully aware.
To give an example of the answer I'm looking for: "you can do this with CKEditor, upload images asynchronously with jquery-html5-upload, save all uploaded image filename in a Javascript array, create a new button inside CKEditor with a custom click handler, which displays an overlay with Fancybox and you show all the images (you have filenames stored in an array), user clicks an image and you insert html into the editor".
Something like that but better :) (or should I say accurate).
Anything in here that meets with your reqs? http://ckeditor.com/developer-features
You taken a look at TinyMCEor CKEditor?
The "fake answer" you gave yourself is quite accurate. You would need a RTE editor that supports custom functionality.
The logistics would go along these lines:
User presses a button
An empty div is appended to the input with a unique id
An image uploader popup will open, with pointers to the new div
A combination of jQuery / AJAX / PHP will allow the user to upload a file within the page
The filename is returned after the upload process and inserted in the originally appended div
If you are looking for the specific code for each of these steps, I would recommend finding some tutorials as this isn't something that we can write some fast example code for.
I have thought for a while over an issue with the loading of images on a website-solution that I have programmed (For fun and the experience)
The programming language used is PHP with MYSQL as the database language
It also uses javascript, but not extensively
I have recently realized that the engine I programmed, while it has it's smart solutions also carry a lot of flaws and redundant code. I have therefore decided to make a new one, now incorporating what I know, but didn't when I started the previous project.
For the new system, there will be an option to add galleries to a site, and upload images to it. I have used the javascript image viewer Lytebox before. The screen goes dark and an image appears with a "Previous" and "next" button to view the other images.
The problem is that I used groups with lytebox and the images themselves, resized as thumbs. This causes lytebox to work only when all the images have loaded. If you click a link before that, the image is shown as if you right click and choose "Show image"
Information about these images is parsed from a database using a while statement with a counter that goes from 0 to sizeof()
I'm thinking it probably isn't a good idea to have the images as the thumbs, even if you restrict the upload size. Likewise, adding thumbs at upload also seems like a hassle. It would be practical if the thumbs didn't show up before they were fully loaded.
Has anyone got any good tips. Any help would be appreciated.
Johann
Not really. What I would like to know is what route to go when creating a page that lets you upload images. Does other systems usually create thumbs-files when a user uploads a file? Is there a way to display images on the server as thumbs that doesn't require you to load the entire image?
What would also work would be to get lytebox to pop up, with a white frame and "wait" for the image. Basically everything else than opening the image as a regular link.
I had an account here before, seems like it has been reset or something. Tried logging on with both google open-ids. Wouldn't let me comment your comment so I had to do it the hard way and answer my own post :|