显示在同一页面中加载的可点击缩略图
任务:在公司内部网站上向用户展示一系列图像以供查看。
我编写了一些 javascript 来显示带有缩略图的图像列表,每个图像都可以单击并带您到大图像,但是您必须回击才能转到下一个图像,并且要求我提供一些下一个/上一个功能。我有能力做出更好的事情,但这需要时间。
我希望有人推荐一种快速而简单的方法来做到这一点:也许是一个库或一种方法。当前站点是 ASP 经典站点,但这绝对不是必需的:它可以是 ASP.Net,也可以是 php,我只关心!
当前站点看起来像这样:
Current Scope
- Image 1 Title [thumbnail] (link)
- Image 2 Title [thumbnail] (link)
- Image 3 Title [thumbnail] (link)
Alternate Scope 1 (link)
Alternate Scope 2 (link)
Alternate Scope 3 (link)
单击备用范围链接之一会折叠旧的当前范围,并查找并显示可用的图像,使其成为新的当前范围。,
我正在考虑在顶部添加一条条带/left/bottom 包含范围内所有当前图像的缩略图。单击每个图像时,它应该显示在页面的其余部分中,然后可以单击上一个/下一个或单击下一个所需的图像。
最后,为了减少页面加载时间,我将通过 ajax 化所有内容来异步加载,并预加载所有图像的大尺寸(但在单击另一个范围时停止)...
最后,虽然肯定不是必需的,因为有些图像非常大,如果能有平移和平移效果就太好了。缩放工具,而不仅仅是以全尺寸显示图像或调整大小以适合屏幕(可能只有 1024x768)。
有什么想法吗?
我并不是要求任何人为我构建这个,只是希望有人知道一个库或 html 演示页面或一系列 javascript 片段,它们可能具有我正在寻找的一些功能。 这个 javascript pan &缩放示例可能是一个好的开始......
The task: present a series of images on a corporate intranet web site to users for viewing.
I hacked together some javascript to show the list of images with thumbnails, and each image is clickable and takes you to the large image, but then you have to hit back to go to the next image, and I'm being asked to provide some next/previous functionality. I have the skills to work up something better, but that will take time.
I'm hoping someone has a recommendation for a quick and easy way to do this: perhaps a library or a method. The current site is ASP classic but that is absolutely not required: it could be ASP.Net, or php for all I care!
The current site looks something like this:
Current Scope
- Image 1 Title [thumbnail] (link)
- Image 2 Title [thumbnail] (link)
- Image 3 Title [thumbnail] (link)
Alternate Scope 1 (link)
Alternate Scope 2 (link)
Alternate Scope 3 (link)
Clicking one of the alternate scope links collapses the old current scope and looks up and displays the images available for it, making it the new current scope.,
I'm thinking about having a strip across the top/left/bottom with thumbnails of all the current images that are in scope. When clicking on each one, it should show in the rest of the page, and then either be able to click Previous/Next or click the next desired image.
Last, to reduce page load time I'm going to make loading asynchronous by ajaxifying everything and will preload the large sizes of all the images (but stop when another scope is clicked)...
Finally, while certainly not a requirement, since some of the images are very large, it would be great to have pan & zoom tools rather than just display the image at full size or resized to fit the screen (which may be only 1024x768).
Any thoughts?
I'm not asking for anyone to build this for me, just hoping someone knows of a library or html demo page or series of javascript pieces that might have some of the functionality I'm looking for. This javascript pan & zoom example could be a good start...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您似乎正在寻找图像幻灯片?有单独的类别吗?您可以在这里查看:http://www.efectorelativo.net/laboratory/noobSlide/一些灵感。
我确信您不需要 ASP 或 PHP。 JavaScript 幻灯片脚本制作起来非常简单,您可能可以在几天内制作自己的定制脚本。我不久前开始设计一个幻灯片,只需查找类名为“img_slideshow”的图像。它可能不符合您的目的,但制作起来肯定很容易。
It seems as though you are looking for an image slideshow? With separate categories? You could look here: http://www.efectorelativo.net/laboratory/noobSlide/ for some inspiration.
I'm sure you won't need ASP or PHP. JavaScript slideshow scripts are quite simple to make, and you could probably make your own customized one in a couple days. I started one a while ago that designs a slideshow just by looking for images with the classname 'img_slideshow.' It probably wouldn't fit your purposes, but was certainly easy enough to make.