我和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的时候回答的一些问题在photo sizes这里可以改，有三个是一定要有的，admin_thumbnail,thumbnail,display，没有的话添加上。在点photo的时候出现的图片大小就是admin_thumbnail设置的值。


　　由于photologue的模版不好看，所以前端显示用的是jQuery的插件Slides，官网http://slidesjs.com/

　　在slides文件夹下的examples/找一个喜欢的风格，比如我选的是Standard，将img、css、js文件夹考到media/static/文件夹下，哦别忘了上jQuery的官网把jQuery下载下来，放到js文件夹里。

　　完成这些之后在view里面写好函数，url配好，最麻烦的是写模版还有改css要不然效果显示不了。

　　代码。

1 #index_view.py
2 
3 from django.shortcuts import render_to_response
4 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 #url
2 
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:#666666
47 }
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     Pagination
105 */
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     Footer
134 */
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     Anchors
151 */
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。

　　学无止境啊。

posted on 2012-02-11 23:14  duoduo3_69  阅读(2644)  评论(0)  编辑  收藏  举报
Copyright © 2024 duoduo3_69
Powered by .NET 8.0 on Kubernetes Powered By: 博客园