Make A Slide Show Photo Gallery With Possibility To Drag And Drop New Photo

I need to create a slideshow photo gallery but with ability to drag a new photo to gallery and show it in slideshow How can I do that? HTML:

Solution 1:

This question is far too broad.

Can you tell us anything about the backend you're using? (e.g. rails/PHP) If you want the images that you drag into the gallery to be persisted after a page load then you're going to need some kind of back-end system to store the information.

Where you want to be able to drag the images from? (e.g. the internet/your desktop/a list of images on the same page) This will ultimately dictate how to go about solving the problem.

Where the images will be displayed? (e.g. elsewhere on your site/just on the same page) As above, it's possible to build a simple javascript gallery - which allows images to be dragged and dropped from a list of images on the same page - using something like Knockout.js. However, it's likely that this will actually be very useful without some kind of front-end display and data persistence.

Edit:

You can certainly achieve this using Knockout.js. Here is a proof-of-concept fiddle: http://jsfiddle.net/Jr2rE/555/

It current just uses span elements with the image name, but it's a trivial task to replace these with image tags in either section, as required.

Edit (2):

Based on your fiddle, try this: http://jsfiddle.net/q40adx7y/

The issue was that you were trying to just append the image to the container (gallery) element but your gallery is dynamically built using a list of images in the 'images' array which are loaded into the 'preloadedImgs' array to be iterated through.

What I've done is to update the drop function to get the 'src' of the dropped element (i.e. the image path) and add this directly to the 'preloadedImgs' array so that it's included in the gallery as it runs.

Share