photoswipe ajax 加载,解决:使用Photoswipe进行图片展示
python 2.7
Django 1.6.1
photoswipe
前言
对于前端的照片存储,已经在前一篇博文中进行展示,使用的是dropzone.js的包,图片存储的作用就是为了数据的再调用,所以在此片进行上次图片的前端展示,因为我是个前端萌新,所以方法比较稚嫩,希望观众老爷不要嘲笑,多多指教咯。
样式的选择和调试请参考这里,非常好用---photoswipe教程事例
html
//根据官方教程,这里的style不管写在哪都可以调用,因为class名字比较独特吧
.my-gallery {
width: 100%;
float: left;
}
.my-gallery img {
width: 100%;
height: auto;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
display: none;
}
javascript
//官方的其中一种样式
var initPhotoSwipeFromDOM = function(gallerySelector) {
// parse slide data (url, title, size ...) from DOM elements
// (children of gallerySelector)
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
size,
item;
for(var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i]; //
// include only element nodes
if(figureEl.nodeType !== 1) {
continue;
}
linkEl = figureEl.children[0]; // element
size = linkEl.getAttribute('data-size').split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if(figureEl.children.length > 1) {
//
item.title = figureEl.children[1].innerHTML;
}
if(linkEl.children.length > 0) {
// thumbnail element, retrieving thumbnail url
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl; // save link to element for getThumbBoundsFn
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
// triggers when user clicks on thumbnail
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
// find root element of slide
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});
if(!clickedListItem) {
return;
}
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
var clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if(childNodes[i].nodeType !== 1) {
continue;
}
if(childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
if(index >= 0) {
// open PhotoSwipe if valid index found
openPhotoSwipe( index, clickedGallery );
}
return false;
};
// parse picture index and gallery index from URL (#&pid=1&gid=2)
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) {
return params;
}
var vars = hash.split('&');
for (var i = 0; i < vars.length; i++) {
if(!vars[i]) {
continue;
}
var pair = vars[i].split('=');
if(pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if(params.gid) {
params.gid = parseInt(params.gid, 10);
}
return params;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// define options (if needed)
options = {
// define gallery index (for URL)
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options -> getThumbBoundsFn section of documentation for more info
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
}
};
// PhotoSwipe opened from URL
if(fromURL) {
if(options.galleryPIDs) {
// parse real index when custom PIDs are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
for(var j = 0; j < items.length; j++) {
if(items[j].pid == index) {
options.index = j;
break;
}
}
} else {
// in URL indexes start from 1
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if( isNaN(options.index) ) {
return;
}
if(disableAnimation) {
options.showAnimationDuration = 0;
}
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
// loop through all gallery elements and bind events
var galleryElements = document.querySelectorAll( gallerySelector );
for(var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i+1);
galleryElements[i].onclick = onThumbnailsClick;
}
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if(hashData.pid && hashData.gid) {
openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );
}
};
// execute above function
initPhotoSwipeFromDOM('.my-gallery');
//这里开始是自己需要写的代码,页面一开始就进行加载
window.οnlοad=img_result();
function img_result(){
var loc = location.href;
var n1 = loc.length;//地址的总长度
var n2 = loc.indexOf("=");//取得=号的位置
var order_id = decodeURI(loc.substr(n2+1, n1-n2));//从=号后面的内容
console.log("执行了2");
//根据url写的映射,进入enter这个app然后调用get_case3这个函数进行处理
$.get('/enter/get_case3/',
{
//前台获取order_id传入后台当做参数
'order_id':order_id,
},
//从view.py中的方法可知,产生的data形式是一个list,list元素是dict,里面藏着对应dui'y'n该编号下的图片路径
function(data){
if(data[0]==""){
console.log("为空")
}
else{
var j=0
// console.log("dropzone")
var html_string='';
var aa = data.length;
console.log(aa);
for(var i=0;i
// 获取存在服务器本地文件夹中的图片路径
var newimg = '/media/'+data[i]["img"]
console.log(newimg)
html_string+='
';
j=j+1;
}
//比较弱的方法,就是构造html的字符串组,然后添加到id为img_show的空间中
$("#img_show").append(html_string);
}
},
'json' );
urls.py
这里构成的是一种前端映射到view的函数比如说,网页的后缀变成了get_case3了,映射的处理的函数指的就是后面的get_case3(完全可以写的不一样,只要找对映射关系就可以了)
urlpatterns = patterns('enter.views',
url(r"^get_case3/","get_case3"),
)
view.py
def get_case3(request):
order_id = request.GET.get("order_id","")
conn= MySQLdb.connect(
host=你的host主机,
port = 端口号,
user='root',
passwd=密码,
db =数据库名字,
)
cur = conn.cursor()
conn.set_character_set('utf8')
cur.execute('SET NAMES utf8;')
cur.execute('SET CHARACTER SET utf8;')
cur.execute('SET character_set_connection=utf8;')
# 选择出标号对应的所需要的图
cur.execute("select img from enter_img where order_id='"+order_id+"'")
server_info_advance=cur.fetchall()
advance_info2=[]
for data3 in server_info_advance:
dict_result={}
dict_result["img"]=data3[0]
advance_info2.append(dict_result)
advance_info3=[]
if len(advance_info2)<100: #
return advance_info2
else:
return advance_info3
model的表现形式
# 数据库名字叫做enter_img
+-----+----------+-------------------------------------+
| id | order_id | img |
+-----+----------+-------------------------------------+
| 460 | 1234 | upload/1491036872.27WechatIMG2.png |
+-----+----------+-------------------------------------+
这里回顾下过程,整个流程在于在前端触发一个带返回的id号,之后将这个id号代入后台进行数据库的索引,之后再从后台构造好传递到前端,前端在进行图片展示,photoswipe这个js包的作用就是完成图片比较酷炫展示的作用,其中要注意的是图片尺寸的选择,后续有空需要把自动获取尺寸的代码构造出来,目前如果不是非本分辨率的图片,放大后将呈现出很差的体验效果,后续可能会对图片上传时,对图片尺寸的进行获取和存值,这样再进行调出的时候,效果就会好很多。--来自自学前端三个礼拜的小白的心声
Pay Attention
关于id的传入,这里用的方法非常的朴素,应该是从一个页面点击该id然后获取该id下的明细,也就是涉及到页面跳转的概念了,然后再将id传递进入后台,再操作
最后
关于为啥我把上传图片和展示图片分成两篇来写,,,,,因为,,我懒啊,哈哈哈哈,不闹,片段剥离,有利于重复利用,嗯,就是酱紫
后续
解决问题毕竟还是需要进行复盘和记录,这样对以后的发展和回顾有非常大的益处,构造方法上的选择需要接轨目前主要的方法,对于前后台脱离的团队,需要进行标准的数据传输,前端妹子们可不管后台怎么构造方法,她们只要进行前端页面展示就可以了(然而ui,美工,后台都tm是我写0.0),后续等我有空闲下来的时间,把整个构建构建工程和app的过程都仔细写一下,从整个项目中剥离出来让纯正小白也可以一下子学会,目前只能当为自己的学习笔记,如果思想对你有所帮助,我也很高兴。共勉
photoswipe ajax 加载,解决:使用Photoswipe进行图片展示相关推荐
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- ajax传输json数据格式乱码_解决Ajax加载JSon数据中文乱码问题
一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { ...
- ajax加载数据到页面无法打印的解决办法
2019独角兽企业重金招聘Python工程师标准>>> 今天,弄一个打印页面的功能大致的原理想法是,ajax加载页面到当前的一个隐藏iframe里面,然后打印iframe,为了兼容所 ...
- ajax 请求svg,jQuery append 到AJAX加载的SVG问题
我已成功通过AJAX从外部文件加载了一些svg:$("#svg").load(svgUrl + " svg", function() { // do stuff ...
- php ajax 加载列表,Ajax点击不断加载数据列表(图文教程)
这篇文章主要介绍了Ajax点击不断加载数据列表的相关资料,需要的朋友可以参考下 Ajax简介 AJAX即"Asynchronous Javascript And XML"(异步Ja ...
- layui父页面调用子页面的渲染_layUI ajax加载html页面后重新渲染的方法
相关问题同: 1.layUI使用jquery.load加载界面时,如何让layui渲染页面? 2.layUI ajax加载html页面后重新渲染 layUI ajax加载html页面后渲染,关键在将h ...
- ajax请求中带判断语句例子,jQuery中借助deferred来请求及判断AJAX加载的实例讲解...
ajax请求异步队列加载我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况.ajax默认使用异步加载(async:true).为什么不使用同步呢,因为ajax同步加载会UI渲染线程阻塞 ...
- google支持本地ajax,360chrome,google chrome浏览器使用jquery.ajax加载本地html文件
使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...
- datatables增删改查php,jQuery+datatables插件实现Ajax加载数据与增删改查功能示例_白峰_前端开发者...
本文实例讲述了 这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查 注意,需要引入 搜索 新增 编辑 删除 职业姓名性别爱好 //点击查找 $(" ...
最新文章
- R语言对dataframe的行数据进行排序(Ordering rows)实战:使用R原生方法、data.table、dplyr等方案
- VTK:PolyData之ExtractOutsideSurface
- 数据库表DML不了 可能是被锁了
- LeetCode 234 回文链表
- 计算机专业研究生应该如何规划,【图片】2020考研,老学长教你如何规划!【计算机考研吧】_百度贴吧...
- 对当今社会的某些现象的感想
- python 模糊匹配ftp文件_使用python实现正则匹配检索远端FTP目录下的文件
- JAVA的项目文件夹_Java中Project项目文件夹的绝对路径
- 最硬核交通信号灯上线:专治老司机们的这个“臭毛病”!
- python开发sqlite3完整_python开发_sqlite3_绝对完整
- JavaScript学习(六十)—JSON
- [Python] Request module
- 传智燕青学成在线项目视频分享
- PHP 获取微视无水印源地址_最新抖音短视频无水印地址解析原理(抖音免费解析接口),以PHP代码为例...
- web字体文件过大优化方案
- 阿里企业云邮箱怎么申请?企业云邮箱登录界面在哪?
- Windows运行程序时桌面窗口卡死
- 阿里云-邮件推送 配置 购买域名 配置域名
- 万兆网络传输速度测试_万兆带宽测试方法
- 韩国李世龙19岁当爹 与洪瑛琦姐弟恋开花结果
热门文章
- 性能测试基础(一)性能测试分类
- ROS学习笔记(1)-ROS指令
- 有要做兼职的吗?我们做了一款app,找个推广合作人
- IT岗位说明书(岗位职责)
- 《英语阅读教学与思维发展》读书笔记(一)
- DotA_Allstars_v6.61b_AI_PA3_CN_简易汉化版
- 解决Windows7右键菜单出现乱码的详细步骤
- python竞赛试题及答案_用Python来解一道华罗庚数学竞赛试题
- 最新变色龙4.7 AnSeries分色版软件
- 利用C#直接与MySQL数据库建立交互