Question

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

我该怎么做？

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;
}

完整的照片库是Here：

Answer 1

这个问题太广泛了。

您能告诉我们您正在使用的后端的任何信息吗？（例如rails / PHP）如果你想在页面加载后将你拖动到图库中的图像保留下来，那么你将需要某种后端系统来存储信息。

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

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

修改

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

当前只使用带有图像名称的span元素，但根据需要将这些元素替换为任一部分中的图像标记是一项微不足道的任务。

修改（2）：

根据您的小提琴，试试这个：http://jsfiddle.net/q40adx7y/

问题在于您尝试将图像附加到容器（图库）元素，但是您的图库是使用“images”数组中的图像列表动态构建的，这些图像被加载到“preloadedImgs”数组中迭代通过。

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

制作幻灯片放映照片库，可以拖放新照片

1 个答案: