制作幻灯片放映照片库，可拖放新照片 [英] make a slide show photo gallery with possibility to drag and drop new photo

问题描述

我需要创建一个幻灯片照片库，但能够将新照片拖到图库中并以幻灯片形式显示。

我该怎么做？

>

HTML：

 < div id = 库 > 
  
< input type =buttonid =btnStartvalue =Restart gallery/> 
< input type =buttonid =btnStopvalue =Stop gallery/> 
< / div> 
  

CSS：

  #gallery 
 {
 width：620px; 
 height：378px; 
 margin：0 auto; 
 border：2px solid #ccc; 
} 
  

完整的照片库是 Here ： 这个问题太广泛了。

你能告诉我们关于你使用的后端的任何事吗？ （例如rails / PHP）如果你想要拖到图库中的图像在页面加载后被持久化，那么你将需要某种后端系统来存储信息。

您想在哪里拖动图像？ （例如，互联网/你的桌面/同一页面上的图像列表）这将最终决定如何解决问题。

在哪里显示图像？ （例如，您网站上的其他地方/只在同一页面上）如上所述，可以使用类似Knockout.js的内容来构建一个简单的JavaScript图库 - 允许图像从同一页面上的图像列表中拖放。但是，如果没有某种前端显示和数据持久性，这很可能是非常有用的。

编辑：

你可以使用Knockout.js来实现这一点。这是一个概念验证小提琴： http://jsfiddle.net/Jr2rE/555/

目前只是使用 span 元素与图片名称，但将图片标签替换为一项简单的任务（2）：

基于在你的小提琴上，试试这个： http://jsfiddle.net/q40adx7y/

问题在于您试图仅将图像追加到容器（图库）元素，但是您的图库是使用'图像'数组中的图像列表动态构建的， preloadedImgs'数组进行迭代。

我所做的是更新drop函数以获取被删除元素的'src'（即图像路径）并将其直接添加到'preloadedImgs '数组，以便它在运行时包含在画廊中。

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:

<div id="gallery">
    <img src="http://html.net/tutorials/javascript/images/1.jpg" alt="Photo gallery image" id="photo" />

    <input type="button" id="btnStart" value="Restart gallery" />
    <input type="button" id="btnStop" value="Stop gallery" />
</div>

CSS:

#gallery 
{
    width:620px;
    height:378px;
    margin: 0 auto;
    border:2px solid #ccc;
}

A full photo gallery is Here:

解决方案

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.

这篇关于制作幻灯片放映照片库，可拖放新照片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！