gallery javascript finished

gallery.js

@@ -1,8 +1,80 @@
 
-// Create function to load image
-function loadImg(src){
+var current_li;
+
+function nextByTag(parent,current,name){
+    var next = false;
+    var next_element;
+    for( var i=0; i<parent.childNodes.length; i++ ){
+        if( parent.childNodes[i]==current ){
+            next = true;
+            continue;
+        }
+        if( next && parent.childNodes[i].nodeName == name ){
+            next_element = parent.childNodes[i];
+            break;
+        }
+    }
+    return next_element;
+}
+
+function prevByTag(parent,current,name){
+    var next = false;
+    var prev_element;
+    for( var i=parent.childNodes.length-1; i>=0; i-- ){
+        if( parent.childNodes[i]==current ){
+            next = true;
+            continue;
+        }
+        if( next && parent.childNodes[i].nodeName == name ){
+            next_element = parent.childNodes[i];
+            break;
+        }
+    }
+    return next_element;
+}
+
+function prevImg(){
+    var parent = current_li.parentNode;
+    var prev_li = prevByTag(parent,current_li,"LI");
+    if( !prev_li ){
+        return;
+    }
+    var img = prev_li.getElementsByTagName("img")[0];
+    var div = document.getElementById("gallery_container");
+    var oldimg = div.getElementsByTagName("img"); 
+    if( oldimg ){
+        for( var i=0; i<oldimg.length; i++){
+            if( oldimg[i].parentNode == div ){
+                oldimg[i].src = img.src;
+            }
+        }
+    }
+    current_li = prev_li;
+}
+
+function nextImg(){
+    var parent = current_li.parentNode;
+    var next_li = nextByTag(parent,current_li,"LI");
+    if( !next_li ){
+        return;
+    }
+    var img = next_li.getElementsByTagName("img")[0];
+    var div = document.getElementById("gallery_container");
+    var oldimg = div.getElementsByTagName("img"); 
+    if( oldimg ){
+        for( var i=0; i<oldimg.length; i++){
+            if( oldimg[i].parentNode == div ){
+                oldimg[i].src = img.src;
+            }
+        }
+    }
+    current_li = next_li;
+}
+
+function loadImg(src,target){
     var body = document.getElementsByTagName("body")[0];
     var div = document.getElementById("gallery_container");
+    current_li = target.parentNode;
 
     if( !div ) {
         div = document.createElement('div');
@@ -29,10 +101,12 @@ function loadImg(src){
         div.appendChild(anch);
         prev.src = "_img/prev.png";
         prev.id = "gallery_prev";
+        prev.onclick = prevImg;
         
         var img = new Image()
         div.appendChild(img);
         img.src = src;
+        img.id = "gallery_img"
         
         anch = document.createElement('a');
         anch.setAttribute('href', '#'); 
@@ -41,6 +115,7 @@ function loadImg(src){
         div.appendChild(anch);
         next.src = "_img/next.png";
         next.id = "gallery_next";
+        next.onclick = nextImg;
     }else{
         var oldimg = div.getElementsByTagName("img"); 
         if( oldimg ){

mdx_gallery.py

@@ -20,7 +20,7 @@ class GalleryPattern(Pattern):
             anch = markdown.util.etree.Element('a')
             anch.attrib["href"]=img
             anch.attrib["target"]="_blank"
-            anch.attrib["onclick"]='loadImg("%s");return false;' % (img)
+            anch.attrib["onclick"]='loadImg("%s",this);return false;' % (img)
             li.append(anch)
             
             img_el = markdown.util.etree.Element('img')

style.css

@@ -1,7 +1,8 @@
 #gallery_container {
     position:absolute;
     top:0px; left:0px;
-    background-color:#222222;
+    background-color:#aaaaaa;
+    background-image:url(_img/back2.png);
     width:100%;
     height:100%;
     display:table-cell;
@@ -28,6 +29,14 @@
     padding-bottom:15px;
 }
 
+#gallery_img {
+    border:7px solid #ffffff;
+    
+    box-shadow: 0px 1px 4px #444444;
+        -webkit-box-shadow: 0px 1px 4px #444444;
+        -moz-box-shadow: 0px 1px 4px #444444;
+}
+
 /* generall */
 .hidden {
     display: none