我和Django那些事儿（8）----相册django插件photologue，jQuery插件Slides
这两天把同学录的css搞了一下，决定在网站里面加上相册，通信录么，加个照片也不错，找了一下，用了django的photologue插件，挺好用的。By the way,这篇博客是接着上篇博客马上写的，之前用photologue的时候setting里面静态文件没配好，很麻烦。参照上一节配好之后，在photologue的 /django-photologue-2.2/photologue/templates/ 找到photologue文件夹，把整个photologue文件夹直接贴到自己项目的templates下，photologue的模版系统直接就能用了。就是它自带的模版非常不太好看，需要重写，这个稍后再说。
先说说photologue的一些东西：
首先在setting找到这儿，把‘photologe’加上
1 INSTALLED_APPS = ( '2 #之前的东西#3 'photologue',4 )
然后运行这两句
python manage.py syncdb，这句是在admin站点管理里面同步photologue的数据库
python manage.py plinit，初始化photologue的一些问题，出现这三个:admin_thumbnail,thumbnail,display的时候yes设置下尺寸，别的神马effect，reflect，no就可以，因为刚创建的和时候没有，yes的话会报错的。其实,这里怎么回答无所谓，因为站点管理的时候都能改。
这两步之后打开站点管理就能看到多了photologue这个类，gallery uploads的时候需要把需要上传的图片们打包成.zip。
另外，运行python manage.py plinit的时候回答的一些问题
由于photologue的模版不好看，所以前端显示用的是jQuery的插件Slides，官网http://slidesjs.com/
在slides文件夹下的examples/找一个喜欢的风格，比如我选的是Standard，将img、css、js文件夹考到media/static/文件夹下，哦别忘了上jQuery的官网把jQuery下载下来，放到js文件夹里。
完成这些之后在view里面写好函数，url配好，最麻烦的是写模版还有改css要不然效果显示不了。
代码。
1 #index_view.py2 3 from django.shortcuts import render_to_response4 from photologue.models import *5 6 def photo(request,template):7 object_list= Gallery.objects.all() #我这里不是用的Photo.objects.all()，用Gallery是想得到所有的相册8 return render_to_response(template,{'object_list':object_list})1 #url2 3 urlpatterns += patterns('',4 url(r'^photologue/',include('photologue.urls')),5 url(r'^photo/',index_views.photo,{'template':'photologue/index.html'}),6 )photolgue的模版我只用了gallery_detail.html，和root.html，新写了一个index，也就是说在templates/photolgue文件夹下我有有index.html、gallery_detail.html，和root.html，root没改。贴一下html和css的代码,额，css引用是在我的base.html引用的一起贴下。
base.html
<html><head><link type="text/css" href="/media/static/css/base.css" rel="stylesheet" /><link type="text/css" href="/media/static/css/global.css" rel="stylesheet" /><script src="/media/static/js/jquery-1.7.1.min.js"></script><script src="/media/static/js/slides.min.jquery.js"></script><script> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'img/loading.gif', play: 4000, pause: 3000, hoverPause: true, effect: 'fade', crossfade: true, fadeSpeed: 2500, }); });</script>
{% block script %} {% endblock %} {% block title %} {% endblock %}</head>
<body><div class = "warper"><div class = "header"><div class = "header-left"><h1 class = "header"> {% block head %} {% endblock %}</h1></div><div class = "header-right"><div class = "nav"><ul id = "nav-global"><li id = "nav-homepage"><a href = "/">首页</a></li><li id = "nav-login"><a href = "/admin/">登录</a></li></ul></div> {% block search %} {% endblock %} </div></div></div>
{% block content %} {% endblock %}
</body></html>index.html 在这我仅仅想的到相册的url,所以在view里面我用的是Gallery而不是Photo
1 {% extends "photologue/root.html" %} 2 {% block head %} 3 所有相册 4 {% endblock %} 5 {% block content %} 6 7 {% if object_list %} 8 {% for gallery in object_list %} 9 <div class="left-head">10 <h2><a href="{{ gallery.get_absolute_url }}">{{ gallery.title }}</a></h2>11 </div>12 {% endfor %}13 {% else %}14 <p>没有找到相册。</p>15 {% endif %}16 {% endblock %}gallery_detail.html
1 {% extends "photologue/root.html" %} 2 3 {% block head %} 4 相册:{{ object.title }} 5 {% endblock %} 6 {% block content %} 7 8 <div id="container"> 9 <div class="photo-gallery">10 <div class="example">11 <img src="/media/static/img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">12 <div id="slides">13 <div class="slides_container">14 {% for photo in object.public %}15 <a href="{{ photo.image.url }}" title="{{ photo.title }}" target="_blank"><img src="{{ photo.get_display_url }}" width="800" height="600" alt="{{ photo.title }}"></a>16 {% endfor %}17 </div>18 <a href="#" class="prev"><img src="/media/static/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>19 <a href="#" class="next"><img src="/media/static/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>20 </div>21 <img src="/media/static/img/frame.png" width="739" height="341" alt="Frame" id="frame">22 </div>23 </div>24 </div>25 26 <div class = "left-head">27 <h2><a href="/photo/">查看所有相册</a></h2>28 </div>29 30 {% endblock %}base.css
1 body{ 2 background-color:eeeeee 3 } 4 div.header,div.footer{ 5 margin:0; 6 color:white; 7 padding:0.5em; 8 background-color: gray; 9 }10 div.header{11 height: 100px;12 }13 div.header-left{14 padding:0.2em;15 margin:0;16 float:left;17 width:1000px;18 }19 div.header-right{20 padding:0;21 margin-left:190px;22 }23 24 div.nav{25 padding:0;26 margin:0;27 float:right;28 }29 30 div.nav ul{31 padding-bottom:2em;32 margin:0;33 list-style-type:none; 34 }35 36 div.nav a{37 width:7em;38 text-decoration:none;39 color:white;40 padding:0.2em 0.6em;41 border-right:1px solid white;42 }43 44 div.nav a:hover 45 {46 background-color:#66666647 }48 div.nav li{display:inline}49 50 div.left-head a{51 margin-left:0.5em;52 padding-left:0.2em;53 padding-top: 0.2em;54 padding-right:2.2em;55 padding-bottom:0.2em;56 text-decoration:none;57 color:663366;58 }59 div.left-head a:hover 60 {61 background-color:#cccccc;62 }63 64 div.search{65 float:right;66 padding:0;67 margin:0;68 69 }70 .form {71 padding:1;72 margin:0;73 74 }75 76 table.table_record_list {77 border: 1px solid #888888;78 border-collapse: collapse;79 font-family: Arial,Helvetica,sans-serif;80 width: 100%;81 }82 table.table_record_list th {83 background-color: #CCCCCC;84 border: 1px solid #888888;85 padding: 5px 15px 5px 5px;86 text-align: left;87 vertical-align: baseline;88 }89 table.table_record_list td {90 background-color: #EFEFEF;91 border: 1px solid #AAAAAA;92 padding: 5px 15px 5px 5px;93 vertical-align: text-top;94 }global.css
1 /* 2 Resets defualt browser settings 3 reset.css 4 */ 5 /* 6 Page style 7 */ 8 9 10 #container { 11 width:800px; 12 padding:10px; 13 margin:0 auto; 14 position:relative; 15 z-index:0; 16 top:20px; 17 } 18 19 #example { 20 width:820px; 21 height:650px; 22 position:relative; 23 } 24 25 #ribbon { 26 position:absolute; 27 top:-3px; 28 left:-15px; 29 z-index:500; 30 } 31 32 #frame { 33 position:absolute; 34 z-index:0; 35 width:1030px; 36 height:600px; 37 top:-3px; 38 left:-110px; 39 } 40 41 /* 42 Slideshow 43 */ 44 45 #slides { 46 position:absolute; 47 top:15px; 48 left:4px; 49 z-index:100; 50 } 51 52 /* 53 Slides container 54 Important: 55 Set the width of your slides container 56 Set to display none, prevents content flash 57 */ 58 59 .slides_container { 60 width:820px; 61 height:498px; 62 overflow:hidden; 63 position:relative; 64 display:none; 65 } 66 67 /* 68 Each slide 69 Important: 70 Set the width of your slides 71 If height not specified height will be set by the slide content 72 Set to display block 73 */ 74 75 .slides_container a { 76 width:570px; 77 height:270px; 78 display:block; 79 } 80 81 .slides_container a img { 82 display:block; 83 } 84 85 /* 86 Next/prev buttons 87 */ 88 89 #slides .next,#slides .prev { 90 position:absolute; 91 top:207px; 92 left:-39px; 93 width:24px; 94 height:43px; 95 display:block; 96 z-index:101; 97 } 98 99 #slides .next {100 left:810px;101 }102 103 /*104 Pagination105 */106 107 .pagination {108 margin:26px auto 0;109 }110 111 .pagination li {112 float:left;113 margin:0 1px;114 list-style:none;115 }116 117 .pagination li a {118 display:block;119 width:12px;120 height:0;121 padding-top:12px;122 background-image:url(../img/pagination.png);123 background-position:0 0;124 float:left;125 overflow:hidden;126 }127 128 .pagination li.current a {129 background-position:0 -12px;130 }131 132 /*133 Footer134 */135 136 #footer {137 text-align:center;138 width:580px;139 margin-top:9px;140 padding:4.5px 0 18px;141 border-top:1px solid #dfdfdf;142 }143 144 #footer p {145 margin:4.5px 0;146 font-size:1.0em;147 }148 149 /*150 Anchors151 */152 153 a:link,a:visited {154 color:#599100;155 text-decoration:none;156 }157 158 a:hover,a:active {159 color:#599100;160 text-decoration:underline;161 }额，数据库出了些问题，被我删删的，暂时没能解决，也就是说我现在在admin站点管理里面不能上传图片和查看图片，额。
原来的效果是很好的，因为数据库的问题，没能生成display和thumbnail的图片，所以相当与没有图片，现在大体看看吧。
额，by the way，用photologue的时候没少查它的源码，所以把vim的taglist插件装上真的很重要。推荐几个vim的帖子。
把VIM打造成一个真正的IDE（1） http://www.vimer.cn/2009/10/%E6%8A%8Avim%E6%89%93%E9%80%A0%E6%88%90%E4%B8%80%E4%B8%AA%E7%9C%9F%E6%AD%A3%E7%9A%84ide1.html
把VIM打造成一个真正的IDE（2）http://www.vimer.cn/2009/10/%E6%8A%8Avim%E6%89%93%E9%80%A0%E6%88%90%E4%B8%80%E4%B8%AA%E7%9C%9F%E6%AD%A3%E7%9A%84ide2.html
把VIM打造成一个真正的IDE（3）http://www.vimer.cn/2009/10/%E6%8A%8Avim%E6%89%93%E9%80%A0%E6%88%90%E4%B8%80%E4%B8%AA%E7%9C%9F%E6%AD%A3%E7%9A%84ide3.html
一键编译单个源文件 http://www.vimer.cn/2009/10/11.html
磨刀不误砍柴工，改完之后，用起vim来就太舒服了，c文件点F5就编译了，不管是神马文件，只要有函数先F12生成tags，接着F3查看。
希望别在出神马问题了。
下一步考虑加上所见即所得的编辑器，而且我还想python+cpp混写一下，试着研究下Boost.Python。
学无止境啊。
转载于:https://www.cnblogs.com/duoduo369/archive/2012/02/11/2347054.html
我和Django那些事儿（8）----相册django插件photologue，jQuery插件Slides相关推荐
- Django Python:完整的BUNDLE + Django真实项目2021
Django和python Bundle:从学习python的所有基础知识到高级python再到UI设计TKINTER,然后是Django 你会学到: 学习编程的基础知识 学习Python编程语言 学 ...
- Django介绍和虚拟环境（django特点、MVC、MVT、Django学习资料）
MVT流程: 创建Django项目和应用 django-admin startproject name python manager.py startapp name 视图和ULR 视图的请求和响应 ...
- [django]模板中自定义变量django模板中的变量
django自定义模板变量 context_processors.py def mysetings(request):return {'NAME': 'maotai'} settings.py TEM ...
- django restful 请求_利用 Django REST framework 构建 RESTful Web API
利用 Django REST framework 构建 RESTful Web API 终于到了动手操作的环节啦,这一节,我们以师生管理系统为例,带领大家搭建一套 framework Web API. ...
- php django mysql配置文件_Mysql学习Django+mysql配置与简单操作数据库实例代码
<Mysql学习Django+mysql配置与简单操作数据库实例代码>要点: 本文介绍了Mysql学习Django+mysql配置与简单操作数据库实例代码,希望对您有用.如果有疑问,可以联 ...
- Django 学习（一）Django安装以及初步使用
刚入门学习Django,目的是希望建立一个属于自己的页面.从零开始,持续学习- 首先要安装好Python----最好安装现流行的Python3.X版本 Python安装好后,安装Django Djan ...
- [Django青铜修炼手册] 初识Django
Django 是用Python开发的一个免费开源的Web框架,可以用于快速搭建高性能,优雅的网站!采用了MVC的框架模式,即模型M,视图V和控制器C,也可以称为MVT模式,模型M,视图V,模板T.在学 ...
- linux的django路径,Ubuntu下使用Django搭建前后端分离的全栈项目
README Ubuntu16.04: Python3.6.2: Django1.11: 开发工具使用了pycharm(Ubuntu): 2017-12-08:更新到留言板 第一步,在Linux环境中 ...
- python中如何安装django库_python安装好django库，新建django项目
我安装好django库之后,想在pycharm里新建django项目,发现没有django选项.百度后发现只有专业版才可以直接创建django项目,社区版推荐用命令创建,如下: 1. 在DOS黑窗口下 ...
- python框架django文档_Django基础——Django框架介绍及模板语言
Django框架,我们只需要关心二点: 1.根据用户访问不同的路径执行不同的函数 2.从HTML读取出内容,并且完成字符串的替换 而socket通信不需要我们自己写: 新建Django项目 命令行创建 ...
最新文章
- 媒体智能应用落地靠5G，视频社交需要想象力
- JProfiler 11中文版
- Arthas | 定位线上 Dubbo 线程池满异常
- 3DSlicer22:Module-ExtensionWizard Build Install
- Python实训day12pm【答辩要求、定时器】
- 使用BeetleX在Linux下部署.NET多站点服务
- [SimplePlayer] 2. 在屏幕上显示视频图像
- 大数据量分页存储过程效率测试附代码
- 解决Docker容器时间与主机不一致问题
- Android 系统（229）---OTA
- 手机号归属地_【号码归属地查询工具】
- pytorch 入门学习使用逻辑斯蒂做二分类-6
- 【Android LibGDX游戏引擎开发教程】第06期：图形图像的绘制（下）图片整合工具的使用...
- 查找某个数据，找到后把符合条件数据的一行复制到另外一个地方
- Linux 脚本删除大于指定大小的文件
- MySql explain命令详解
- simulink入门
- 科技互联网都有啥热点信息？爬取虎嗅5万篇文章告诉你
- 1094: 【基础】填词 【循环】
- Rhythmbox中mp3中文乱码问题