电子相册(html+css+js+jq) |
您所在的位置：网站首页 › 电子相册照片顺序咋样改掉 › 电子相册(html+css+js+jq) |
电子相册(html+css+js+jq)
|
2020-10-31 文章首发于知乎文章 电子相册(html+css+js+jq)——批量读取本地图片并动态添加到页面中（下） 作者:落雨湿红尘（也就是我） 导语本文介绍了作者自己在编写电子相册时，批量读取本地图片的一种方法供大家参考。大致方法流程是 a.运用c语言实现文件读取并形成xml文件 b.再编写js代码对xml文件进行解析并构造元素结点 c.把构造好的元素结点放到html页面中的某个容器标签中
关于作者实现的电子相册效果，可查看以下知乎回答预览 你见过最有新意的七夕礼物是什么？
该电子相册用来展示用户导入的照片(这里的照片是指经过相机拍摄而成的照片经过ps处理后，一般为jpg格式)，用户可以在指定的文件夹下批量导入、导出图片，或者按需重命名、增删图片。该电子相册系统能读取这些变化，并动态的更改展示页面，完美地做到静态页面所不能达到的效果。
对动态添加图片的介绍分为（上）（下）两部分 上篇，讲的是c语言程序读取相册文件夹下的图片名并保存的xml文件的过程 此为下篇，讲述如何编写js代码解析xml文件并构造元素，并将其动态添加到前端页面中 js读取解析xml文件在上篇中，我们用c语言写了一个load.exe来读取一个文件夹下（仍以9_HongKong文件夹为例）的所有图片
并将这些图片的名字保存到了9_HongKong.xml文件中
在解析这个xml文件，并构造相应元素之前，有必要先说明一下，对于元素的构造，需要考虑你自己使用的一些工具插件的要求格式 例如，我这里使用了jQuery侧边栏式lightbox图片画廊插件 它是一个通过侧边栏的形式，呈现图片大图的画廊插件，其要求的html结构为
由此可以看到，我们需要一个带有href,data-strip-caption,data-strip-group属性的标签元素，其内嵌套一个带有src属性的 而在html文件中，为了方便管理所有图片的样式，我用一个元素作为容器，来装这些图片 因此编写js文件需要把构造好的元素，放到这个id="container"的中 所以，我们的js文件要做的事情就清楚了 读取并解析xml文件 构造所需元素将其放入到html中
这是我编写的loadImg_Ho.js文件用于读取9_HongKong.xml文件,以展示9_HongKong相册文件夹下的所有图片 //读取HongKong //读取summary文件中指定的xml文件以获取图片名 //传入的参数xmlDile为xml文件url即文件路径，album是相册文件夹的名字 //例如对于9_HongKong.xml文件，其对应的相册名是9_HongKong function getPhotos(xmlFile,albumName) { //生成xml对象。 var xmlDoc = createXMLDoc(xmlFile); //检验xml对象 if (xmlDoc == null) { alert('您的浏览器不支持该功能,推荐使用Firefox或Chrome可以解决此问题!'); } //获取照片节点 var photos= xmlDoc.getElementsByTagName("photo"); // if($.browser.msie){ // 注意各个浏览器之间的区别 // photos = xmlDoc.documentElement.getElementsByTagName("photo"); //读取XML文件中需要显示的数据 // } // else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0){//Firefox // photos = xmlDoc.getElementsByTagName('photo'); //读取XML文件中需要显示的数据 // } // else{ // photos = xmlDoc.getElementsByTagName('photo'); // } //图片数量 var len = photos.length; //src图片src,alt 图片alt var destination = "../../../photos/" + albumName + "/"; var src; var alt; //获取照片容器 var container = document.getElementById('container'); for (var i = 0; i < len; i++) { //构建图片src,alt photoName = photos[i].childNodes[0].nodeValue;//photos[i].childNodes[0].nodeValue src = destination + photoName; alt = photoName; // alert(photoName); // 图片元素格式 // //
//
var ele_img = document.createElement("img");
var ele_a = document.createElement("a");
ele_img.setAttribute("src",src);
ele_img.setAttribute("alt",alt);
ele_img.setAttribute("title",photoName.split(".")[0]);
ele_img.setAttribute("class","imgs");
ele_a.setAttribute("class","strip thumbnail");
ele_a.setAttribute('data-strip-caption',photoName.split(".")[0]);
ele_a.setAttribute('href',src);
ele_a.setAttribute('data-strip-group',"gallery-name");
ele_a.append(ele_img);
container.append(ele_a);
}
return len;//将图片数量返回，方便处理计数，分页等问题
}
//读取xml文件并生成XMLDocument对象
//针对不同浏览器，读取xml文件有不同操作。我使用的是谷歌浏览器
function createXMLDoc(xmlFile) {
var xmlDoc;
if (window.ActiveXObject) {
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE浏览器
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
// else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐浏览器
// // else if (document.implementation && document.implementation.createDocument) {//这里主要是对谷歌浏览器进行处理
// xmlDoc = document.implementation.createDocument('', '', null);
// xmlDoc.async=false;
// xmlDoc.load(xmlFile);
// }
else{ //谷歌浏览器
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET",xmlFile,false);
xmlhttp.send(null);
if(xmlhttp.readyState == 4){
xmlDoc = xmlhttp.responseXML.documentElement;
}
}
return xmlDoc;
}
前端html文件，通过标签导入这个js文件，并调用该文件中的getPhotos函数，传入对应参数 HongKong getPhotos("../../../photos/summary/9_HongKong.xml","9_HongKong");至此，这个html文件，只需要这几行行html语句，即可将9_HongKong文件夹下所有图片读出来并放在html中 不过！这还没完！经过以上操作读出来的图片，需要自己使用css来把图片排版好，否则肯定会重叠在一起 至于css的样式，大家可以自行发挥，我放几张我这个页面的效果图吧。其中，使用到了其他大神的作品来美化整个页面 功能按钮特效：文字悬停特效salal 看板喵：各种看板形象预览，看板形象模型源码及使用 照片查看：jQuery侧边栏式lightbox图片画廊插件 时钟挂件：基于canvas的15种不同外观时钟js插件
由此，经过上下篇的通力合作，一个可以批量读取本地图片的电子相册就制作完成了 下篇部分结束， 点击此处回顾上篇 |
【本文地址】
今日新闻 |
推荐新闻 |