浏览说明:本展示特效为分类浏览方式,即把图片分为两组进行展示(亦可理解为两类)。浏览时先点击 “庄心妍写真1”或“庄心妍写真2)任何一个图片包标签,当点开图片包后,页面即显示左右箭头图片和“收缩”字样链接,而图片包里的图片也呈一字型排开,这时先点击第一张或其中某一张图片,页面中间即显示原图,接下去可以点击左右箭头浏览,也可以点击展开的小图浏览。如要浏览图片包2,则要先点击“收缩”链接返回到图片包打开前页面,然后再点击“庄心妍写真2”图片包展开浏览。
文档代码编辑、图片制作替换及上传
1、文档代码编辑 需要编辑的文档为index.html,用记事本打开,然后找到“庄心妍写真1”修改为你要命名的分类图片包名称,同理也找到“庄心妍写真2”进行修改。 2、图片制作替换 图片放在images文件夹下的album1和album2两个文件夹里,其中album1和album2两个文件夹里分别有thumbs子文件夹,这个子文件夹里放的是小图,也就是显示页面图片包里的样图,album1和album2两个文件夹里的图片为原图,根目录下bg.jpg为底图。图片制作要求为:原图尺寸掌握在1024*768像素左右,不要太大,thumbs子文件夹里的小图控制在110*80左右。背景底图为填充方式,因此bg.jpg图片可以适当加大或缩小,至于使用1000*1000是否可以没有试过。此外,无论是原图还是小图,其数量不能超过6张,这也就意味着每个图片包里的图片总数量为6张,曾尝试过增加图片数量并添加代码,但没成功,还有待于进一步研究。 3、文件上传 文件上传空间后的目录结构要和本地一模一样,为了预防出错,最好是在上传文件前先在空间建立好目录,然后再上传,如使用FTP本地上传,则可以把整个文件夹直接拽到空间里,那样不会出错。
代码分享:
|