如何在另一个DIV中预览DIV？

Question

我在html/css/javascript中创建应用程序或网站,这将允许我创建幻灯片,添加一些文本,图像可能会更改每个幻灯片的颜色和样式,而不是作为整个演示文稿启动它.

到目前为止,我已经设法做了一个非常简单的布局:

http://sandbox.padsbanger.pl/ss/

我的问题是:

如何在侧边栏上创建div的动态预览以及右侧的幻灯片的完整视图？这将允许我在不同的幻灯片之间切换并对它们进行更改.

提前致谢 :)

编辑:对于这个项目我不允许使用PHP.

编辑2:

我并不打算在db中存储有关幻灯片的数据.这个应用程序的想法,它做一个演示文稿consistig几个幻灯片,然后作为演示文稿启动它全屏视图.

Answer 1

好吧,你可以这样做:

.slajd * {
  zoom: 0.25;    
  -moz-transform: scale(0.25);    
  -moz-transform-origin: 0 0;    
  -o-transform: scale(0.25);    
  -o-transform-origin: 0 0;    
  -webkit-transform: scale(0.25);    
  -webkit-transform-origin: 0 0;
}

这会将左侧"预览"窗格中的所有内容缩小到1/4大小.然后,当您单击一个时,只需将innerHTML复制到右侧窗格,因为它没有缩放/缩放样式,所以它将是完整大小.

至于连接 - 这将使所有幻灯片可点击.我建议你把它添加到document.ready某个地方的块中HEAD.

$('#leftcolumn').on('click', '.slajd', function() { 
    $('#rightcolumn').html($(this).html()); 
});