Horizontal and vertical coda

Made in The Wall

How to create a horizontal and vertical coda slider with The Wall. A draggable and intelligent coda. This tutorial shows how to set The Wall to obtain this type of use. It is also possible to use bullets and browse arrows fast and easily. As for The Wall’s way of thinking, contents are retrieved only if they are required.




CONFIGURATION FOR HORIZONTAL CODA


Snippet code Css

                    /*
                        Minimal Css Required
                        Coda not included */
            	    #viewport{
                    	width:450px;
                    	height:450px;
                        position:relative;
                    	overflow:hidden;
                    }

                    #wall{
                        z-index:1;
                    }
                        #wall .tile{ }
                

Snippet code Html
            	    
                    

Configuration The Wall
                    var images = [
                                    "url1",
                                    "url2",
                                    "url3",
                                    ...
                                    "url9"
                                 ];

                     var wall = new Wall("wall", 
                                         {
                                             "draggable":true,
                                             "autoposition":true,
                         				 	 "speed":1000,
                         					 "inertia":true,
											 "preload":true,
                                             "transition":Fx.Transitions.Expo.easeInOut,
                                             "width":450,
                                             "height":450,
                                             "rangex":[0,10],
                                             "rangey":[0,1]
                                         });

                         // CallBack
                         callBack = function(items){
                             items.each(function(e, i){
                                     e.node.setStyle("background", "url('"+images[(e.y)+1]+"') no-repeat center center");
                             })
                         }

                         // Define CallBack
                         wall.setCallOnUpdate(callBack)

                         // Init il Wall
                         wall.initWall();

                         // List Coda
                         wall.getListLinksPoints("coda-list");