I want to make a html(css/js) website where I can drag photos from my computer with drag&drop and then (based on a chosen layout) to make a collage (drag&drop also) with 2 or more pictures. My question is: How can I do that?
I know how to use the draggable option or how to drag photos from one point to another in my website. Unfortunately i do not have any idea of how can i upload pictures from my computer that i want to use in my future collage or how to create those layouts (in which i put the photos).
If you know a website with these kinds of tutorials it would be good also (I coundn't find anything helpful).
Thank you so much!
you can do it with a JS library!
recently I used http://www.dropzonejs.com/ for drag and drop files uploading.
it's working fine and has some good configurations to set.
but for saving files to the server you might need some PHP as well.
Related
I've been searching for a way to implement a gallery in my first ever website (written in HTML).
I basically want to make a page with thumbnails, and, when clicking the thumbnail, a bigger picture to show up (over the gallery, not exiting the gallery), eventually with a title under it, and , when clicking the big picture, to return to the gallery (eventually with a fading effect)
The problem is that I don't even know what I should be looking for, exactly, in this case.
If you don't need to build the gallery from scratch, I recommend using one of the many libraries that you can find online.
Here's a list of some very useful JavaScript/jQuery photo galleries:
Top 10 Free Responsive Image Galleries.
Hope it helps,
Regards.
There are many libraries online that do exactly this. My first google search came up with the following PhotoSwipe. Included in the webpage is a link to their documentation and git repo. If you would like other choices, this website lists 10 libraries that do exactly what you want
I have a table set up on a website I use it to display 9 images with descriptions. I want to be able to click on an image and have it be displayed larger like in a gallery but i would like to not have it change the layout of the page.
I am just starting to work on this web page so almost any way to do this will be helpful.
Lightbox is a pretty commonly used one, but I'd suggest you try and build your own. It's not a terribly difficult thing to program and it will help you grow as a programmer.
I'm looking for a way to upload multiple images with description. Users will be uploading 1-10 images of quite a large size from cameras so it's better if the images get resized before upload.
Requirements:
browser compatible (including mobile browsers and IE), can rely on JavaScript (jQuery)
multiple files either as selection of multiple files in native file manager or at least having to click on some button to bring an input for another file
add a description to each file
resize files before upload (doesn't need to be browser compatible)
uploads on submit
keeps EXIF info or at least extracts GPS coordinates (could do it with some libraries I found)
Bonuses:
can auto-rotate image before upload (using EXIF info)
shows thumbnail of selected image
drag & drop feature
progress bar
I use PHP on backend.
I guess HTML5 canvas might be suitable here. Or some jQuery plugin like blueimp's Jquery-File-Upload. But I don't have experience with more than simple <input type="file">s so I'm asking for your suggestions.
Thanks!
Take a look at Uploadcare. Its widget meets almost all of your requirements out of the box, and you can customize it's behavior to cover remaining.
disclosure: I am one of Uploadcare developers and am posting this not to shamelessly promote the service but because it was built to solve cases like this one.
Recently I'm working with jQuery UI Carousel (1.0.2) on my Drupal website. So far so good, everything is working without a problem but I'm looking for a way to add some external controls. You know, those little dots beneath the images where the user can navigate from and pinpoint a certain slide.
I took a look to the JS file (you can see it here), but didn't find any proof of such a controls.
Right now, I was only able to write some crappy code who didn't work at all... (so I'm not gonna post it to save you some laughs :))
Anyone with some experience regarding this subject?
Thanks in advance!
I don't have specific experience with the jQuery UI Carousel module, but if you are using Views to generate the content in the carousel, you could always use Views Slideshow. It allows you to add a pager (either numbers or thumbnail images) to your slideshow (carousel).
I am attempting to build out a visual jQuery based browser for thumbnailed assets grouped by the upload date of the asset. The backend part is fine, but I'm having a really hard time finding a workable visual solution that can handle (potentially) hundreds to thousands of assets smoothly. The display of the content is not an issue as it is being handled by a lightbox, I just need to figure out a way to actually display the thumbnails.
I've been trying to interface with this plugin but have been running into a lot of problems once it gets over 100 records, everything just becomes horribly unresponsive. Ideally I want to be able to build ajax into this for loading media as needed rather than a bulk get on page load. Does anyone know of a good plugin that can be leveraged to achieve this effect or at least provide a good user interface for browsing large amounts of content?
To clarify: I have properly generated thumbnails being made when an asset is uploaded, these are what are displayed on the page, and the full size image is only loaded in the lightbox when the thumbnail is clicked. I'm just trying to determine a good way to browse a large quantity of thumbnails sorted by upload date.
It sounds like your scaling the full size images down which will ruin performance. Do the images have a small version counterpart you can use for the thumbnails?
Turns out there really wasn't a good way to implement a prebuild plugin for this situation, the best way to do it for me was to implement a jQuery UI slider and on the stop event of that I then do an ajax get to load the appropriate data into a div with vertical scrolling.
Maybe not the most elegant or prettiest solution, but it works for the situation and looks nice enough.