img list in sessionStorage

Author: sfra

README.md

@@ -33,7 +33,7 @@ On the other hand put
 <ul id="gal_list">drop an image here</ul>
 ```
 for the list where you can drop an enlarged image (which is stored as a name of the file, but it can be easily
-used in some different way). 
+used in some different way by using sessionStorage item named imgList). 
 
 To init gallery, put in script.js the following command:
 

img/gal_close.png

@@ -17,11 +17,7 @@
             <img src="img/04.jpg" />
             <img src="img/05.jpg" />
             <img src="img/06.jpg" />
-                        <img src="img/07.jpg" />
-                                    <img src="img/08.jpg" />
-                                                <img src="img/09.jpg" />
-                                                            <img src="img/10.jpg" />
-
+            <img src="img/07.jpg" />
         </div>
 
         <ul id="gal_list">drop an image here</ul>

img/gal_close.xcf

@@ -8,12 +8,11 @@ $.fn.gal=function(options){
   var opt={},
   gal_scene=this;
   libs.deepExt.apply(opt,[$.fn.gal.defaults]);
-  libs.deepExt.apply(opt,[options]);
-  
-  //console.log(options);  
-  //console.log(opt);
+  libs.deepExt.apply(opt,[options]),
 
 
+  sessionStorage.removeItem("imgList");
+  
 
     this.children("img").wrap("<div></div>");
     this.addClass("gal_scene");
@@ -36,12 +35,29 @@ $.fn.gal=function(options){
                             var imgName=$(this).parent().children(".gal_img").attr("src"),
                             li=$("<li></li>");
                             var button=$("<button />").css({"border":"1px solid #111111", "width":"10px"}).on("click",function(){
-                                    $(this).parent().animate({"opacity":"0","width":"0px"},500,function(){$(this).remove();});                                  
+                                    $(this).parent().animate({"opacity":"0","width":"0px"},500,function(){
+                                    libs.removeFromLocalStorage("imgList",$(this).index());
+                                    
+                                      
+//                                      console.log($(this).index());
+                                      $(this).remove(); 
+                                                             });                                  
                                 });
                             button.html("-");
                             li.html(imgName);
                             li.append(button);
                             gal_list.append(li);
+                            //var listStorage=sessionStorage.getItem("imgList")===null?[]:sessionStorage.getItem("imgList");
+                            //listStorage+=imgName+";";
+                            //sessionStorage.setItem("imgList",listStorage);
+                            //
+                            //
+                            //sessionStorage.setItem(json2menu++,imgName);
+                           
+                           libs.addToLocalStorage("imgList",imgName);
+                           
+                             
+                             
 
                             $(".gal_enlarged").css({"background-color":"transparent"}).animate({"left":gal_list.offset().left+"px",
                                                              "top":gal_list.offset().top+"px",

img/gal_left.png

@@ -17,8 +17,26 @@ var libs=(function (){
             }
         }
     };
-
-return {deepExt: deepExt};
+    
+    
+    var addToLocalStorage=function(listName,value){
+          var listStorage=sessionStorage.getItem(listName)===null?[]:sessionStorage.getItem(listName);
+          listStorage+=value+";";
+          sessionStorage.setItem(listName,listStorage);
+        
+        
+        };
+        
+        
+    var removeFromLocalStorage=function(listName,index){
+            var listStorage=sessionStorage.getItem(listName)===null?[]:sessionStorage.getItem(listName);       
+            var listArray=listStorage.split(";");
+            listArray.splice(index,1);
+            sessionStorage.setItem(listName,listArray.join(";"));
+    }    
+        
+
+return {deepExt: deepExt, addToLocalStorage: addToLocalStorage, removeFromLocalStorage: removeFromLocalStorage};
 })();