Hover effect for galleries done;

Outputs are now W3C compilant - note there is a bug in certain versions
of the markdown libary it generates `rel` and `rev` attributes for the
`<a>`-tags, which is illegal since HTML5. I've informed the developer
so using the newest version you can get would fix it. Otherwise find and
comment the following two lines:

	a.set('rel', 'footnote')
    backlink.set("rev", "footnote")

in `examples/footnotes.py` of the library

gallery.js

@@ -1,5 +1,5 @@
 
-var current_li;
+var current_anch;
 
 function nextByTag(parent,current,name){
     var next = false;
@@ -34,12 +34,12 @@ function prevByTag(parent,current,name){
 }
 
 function prevImg(){
-    var parent = current_li.parentNode;
-    var prev_li = prevByTag(parent,current_li,"LI");
-    if( !prev_li ){
+    var parent = current_anch.parentNode;
+    var next_anch = prevByTag(parent,current_anch,"A");
+    if( !next_anch ){
         return false;
     }
-    var img = prev_li.getElementsByTagName("img")[0];
+    var img = next_anch.getElementsByTagName("img")[0];
     var div = document.getElementById("gallery_container");
     var oldimg = div.getElementsByTagName("img"); 
     if( oldimg ){
@@ -49,17 +49,17 @@ function prevImg(){
             }
         }
     }
-    current_li = prev_li;
+    current_anch = next_anch;
     return false;
 }
 
 function nextImg(){
-    var parent = current_li.parentNode;
-    var next_li = nextByTag(parent,current_li,"LI");
-    if( !next_li ){
+    var parent = current_anch.parentNode;
+    var next_anch = nextByTag(parent,current_anch,"A");
+    if( !next_anch ){
         return false;
     }
-    var img = next_li.getElementsByTagName("img")[0];
+    var img = next_anch.getElementsByTagName("img")[0];
     var div = document.getElementById("gallery_container");
     var oldimg = div.getElementsByTagName("img"); 
     if( oldimg ){
@@ -69,14 +69,14 @@ function nextImg(){
             }
         }
     }
-    current_li = next_li;
+    current_anch = next_anch;
     return false;
 }
 
 function loadImg(src,target){
     var body = document.getElementsByTagName("body")[0];
     var div = document.getElementById("gallery_container");
-    current_li = target.parentNode;
+    current_anch = target;
 
     if( !div ) {
         div = document.createElement('div');

mdx_gallery.py

@@ -6,29 +6,28 @@ import markdown, urllib
 
 class GalleryPattern(Pattern):
     def __init__(self,md):
-        Pattern.__init__(self,'!\\[(.*?)\\]\(\((.*?)\)\)',md) #
+        Pattern.__init__(self,'!\\[(.*?)\\]\(\((.*?)\)\)',md) # ![alt]((img1 img2 ... imgn))
     def handleMatch(self, m):
             
         alt=m.group(2)
         imgs=m.group(3).split()
 
-        ul = markdown.util.etree.Element('ul')
-        ul.attrib["class"]='gallery'
+        span = markdown.util.etree.Element('span')
+        span.attrib["class"]='gallery'
         for img in imgs:
-            li = markdown.util.etree.Element('li')
-            ul.append(li)
             anch = markdown.util.etree.Element('a')
             anch.attrib["href"]=img
             anch.attrib["target"]="_blank"
+            anch.attrib["class"]="gallery_link"
             anch.attrib["onclick"]='loadImg("%s",this);return false;' % (img)
-            li.append(anch)
+            span.append(anch)
             
             img_el = markdown.util.etree.Element('img')
-            anch.append(img_el)
             img_el.attrib["src"]=img
             img_el.attrib["alt"]=alt
+            anch.append(img_el)
             
-        return ul
+        return span
         
 class GalleryExtension(markdown.Extension):
     def extendMarkdown(self, md, md_globals):

pylog.py

@@ -111,7 +111,7 @@ def disp_file_dict(d,keys):
                 name = os.path.basename(f)
             if typ in prev_actions and not os.path.isdir(f):
                 sys.stdout.write('<h1><a class="entryheader" href="'+script+'?')
-                sys.stdout.write('disp='+os.path.normpath(f)+'">')
+                sys.stdout.write('disp='+os.path.normpath(f).replace(' ','+')+'">')
                 print name+'</a> - <span class="entrydate">',
                 print datetime.fromtimestamp(int(k)).strftime(cfg.datefmt),
                 print '</span>&nbsp;'
@@ -284,6 +284,7 @@ try:
                 print '<hr>'
                 print '<div id="footer">'
                 print cfg.footer
+                print '</div>'
                 comment_section.disp_comments(validdisp)
     else:
         disp_list(path)

pylog_action_impl.py

@@ -24,7 +24,7 @@ def dir_link(name,f,depth,hidden):
     if hidden: 
         print ' hidden',
     print '">'
-    print '    <a class="menulink" href="'+script+'?'+'path='+os.path.normpath(f)+'">'+name+'</a>'
+    print '    <a class="menulink" href="'+script+'?'+'path='+os.path.normpath(f).replace(' ','+')+'">'+name+'</a>'
     print '  </li>'
 def file_link(name,f,depth,hidden):
     script = sys.argv[0][sys.argv[0].rindex('/')+1:]
@@ -32,14 +32,14 @@ def file_link(name,f,depth,hidden):
     if hidden: 
         print ' hidden',
     print '">'
-    print '    <a class="menulink" href="'+script+'?'+'disp='+os.path.normpath(f)+'">'+name+'</a>'
+    print '    <a class="menulink" href="'+script+'?'+'disp='+os.path.normpath(f).replace(' ','+')+'">'+name+'</a>'
     print '  </li>'
             
 def disp_txt(path):
     print '<div class="entrytext">'
     f = codecs.open(path, mode="r", encoding=cfg.encoding)
     txt=f.read()
-    print markdown.markdown(txt,extensions=cfg.markdown_extensions).encode(cfg.encoding)
+    print markdown.markdown(txt,extensions=cfg.markdown_extensions,content_format=cfg.content_format).encode(cfg.encoding)
     f.close()
     print '</div>'
     
@@ -58,7 +58,7 @@ def disp_source(path,lang,line_numbers):
         txt="\t:::"+lang+'\n'
     for line in f.read().split('\n'):
         txt += "\t"+line+'\n'
-    print markdown.markdown(txt,extensions=cfg.markdown_extensions).encode(cfg.encoding)
+    print markdown.markdown(txt,extensions=cfg.markdown_extensions,content_format=cfg.content_format).encode(cfg.encoding)
     f.close()
     print '</div>'
  
@@ -99,7 +99,7 @@ def prev(path):
 def prev_txt(path):
     fi = codecs.open(path, mode="r", encoding=cfg.encoding)
     txt=get_n_words(fi,40)
-    print '<div class="preview">'+markdown.markdown(txt[0],extensions=cfg.markdown_extensions).encode(cfg.encoding)
+    print '<div class="preview">'+markdown.markdown(txt[0],extensions=cfg.markdown_extensions, content_format=cfg.content_format).encode(cfg.encoding)
     if txt[1]:
         print '<i>&nbsp;...</i>'
     print '</div>'

pylog_config.py

@@ -38,6 +38,9 @@ encoding="utf-8"
 # format. See manual reference for codecs.open for
 # details
 
+content_format="html5"
+# The content-format generated by the markdown-library
+
 markdown_extensions = ['math','gallery','extra','codehilite(guess_lang=False)',]
 # Markdown extensions:
 #   math .......... rich subset of latex formulas between $$ c^2=a^2+b^2 $$

style.css

@@ -274,43 +274,71 @@ span.pre {
     font-family:monospace;
 }
 
-ul.gallery {
-    display:block;
+.gallery_link{
+    transform: rotate(1deg);
+    display:inline-block;
     padding:0px;
-    height:90px;
-}
-ul.gallery li {
-    display:inline;
+        -moz-transition: all 0.5s;
+        -webkit-transition: all 0.5s;  
+        -ms-transition: all 0.5s;  
+        -o-transition: all 0.5s;  
+    transition: all 0.5s
 }
 
+.gallery_link:nth-child(2n+1) {
+    transform: rotate(3deg);
+        -ms-transform: rotate(3deg);
+        -webkit-transform: rotate(3deg);
+        -o-transform: rotate(3deg);
+        -moz-transform: rotate(3deg);
+}
+.gallery_link:nth-child(3n+1) {
+    transform: rotate(-7deg);
+        -ms-transform: rotate(-7deg);
+        -webkit-transform: rotate(-7deg);
+        -o-transform: rotate(-7deg);
+        -moz-transform: rotate(-7deg);
+}
+.gallery_link:nth-child(7n+1) {
+    transform: rotate(-4deg);
+        -ms-transform: rotate(-4deg);
+        -webkit-transform: rotate(-4deg);
+        -o-transform: rotate(-4deg);
+        -moz-transform: rotate(-4deg);
+}
+.gallery_link:nth-child(5n+1) {
+    transform: rotate(-2deg);
+        -ms-transform: rotate(-2deg);
+        -webkit-transform: rotate(-2deg);
+        -o-transform: rotate(-2deg);
+        -moz-transform: rotate(-2deg);
+}
+.gallery_link:hover {
+    transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+}
 
-ul.gallery li img{
-    /*transform: rotate(2deg);*/
+.gallery_link img{
     border:2px solid white;
     box-shadow: 0px 1px 4px black;
+        -webkit-box-shadow: 0px 3px 12px #444444;
+        -moz-box-shadow: 0px 3px 12px #444444;
     height:75px;
     margin:4px;
-    -moz-transition: all 0.5s;
-    -webkit-transition: all 0.5s;  
-    -ms-transition: all 0.5s;  
-    -o-transition: all 0.5s;  
+        -moz-transition: all 0.5s;
+        -webkit-transition: all 0.5s;  
+        -ms-transition: all 0.5s;  
+        -o-transition: all 0.5s;  
     transition: all 0.5s
 }
-ul.gallery li img:nth-of-type(even) {
-    transform: rotate(1deg);
-}
-ul.gallery li img:nth-of-type(odd) {
-    transform: rotate(-2deg);
-}
-/*ul.gallery li img:img:nth-of-type(5n) {
-    transform: rotate(3deg);
-}
-ul.gallery li img:img:nth-of-type(7n) {
-    transform: rotate(-1deg);
-}*/
-ul.gallery li img:hover{
-    transform: rotate(0deg);
+
+.gallery_link img:hover{
     box-shadow: 0px 1px 6px black;
+        -webkit-box-shadow: 0px 3px 12px #444444;
+        -moz-box-shadow: 0px 3px 12px #444444;
     height:82px;
     margin:0px;
 }