Problem with images showing up on the wall #12
Comments
|
The Wall is a Mootools plugin, not a jQuery one. I see in your screenshot that you are including jQuery UI, Mootools More and The Wall. But both The Wall and Mootools More require Mootools Core! |
|
Hi, so do i just need to remove jQuery and add Mootools Core? |
|
|
|
Yes. But try using same Mootools version for Core and More (up to the second digit): latest is 1.4.5 for Core and 1.4.0.1 for More. |
|
Ok changed More to a 1.4.0.1 version but yet it still doesnt work, the pictures still are not visible. |
|
I cannot help you if I can't see your code. |
|
Ok sure here you go HTML: <!doctype html> <title>Untitled Document</title> <script src="mootools-core-1.4.5.js"></script> <script src="mootools-more-1.4.0.1.js"></script> <script src="wall.js"></script> <script> // Define The Wall var maxLength = 100; // Max Number images var counterFluid = 1; var wallFluid = new Wall("wall", { "draggable":true, "inertia":true, "width":200, "height":200, "rangex":[-100,100], "rangey":[-100,100], callOnUpdate: function(items){ items.each(function(e, i){ var a = new Element("img[src=images"+counterFluid+".jpg]"); a.inject(e.node).fade("hide").fade("in"); counterFluid++; // Reset counter if( counterFluid > maxLength ) counterFluid = 1; }) } }); // Init Fluid Wall wallFluid.initWall(); </script>CSS: @charset "utf-8"; html { /* Minimal Css Required */ |
|
You are missing the code to create The Wall! There's no JS at all! Anyway this is not the place to get support, so try to figure out yourself from this point. It's all explained on The Wall website. Good luck. |
Hi I cant seem to manage to get the wall to display any photos, i tried creating the wall just on an empty page just to test it.
Any help would be very much appreciated! Thanks in advanced.
HTML:
<!doctype html>
<title>Untitled Document</title> <script src="js/jquery-ui-1.8.18.custom.min.js"></script> <script src="mootools-more-1.3.2.1.js"></script> <script src="wall.js"></script>CSS:
@charset "utf-8";
/* CSS Document */
html {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}
/* Minimal Css Required */
#viewport{
width:900px;
height:450px;
position:relative;
overflow:hidden;
margin:0 auto;
background:#111111 ;
}
// Define The Wall
var maxLength = 100; // Max Number images
var counterFluid = 1;
var wallFluid = new Wall("wall", {
"draggable":true,
"inertia":true,
"width":200,
"height":200,
"rangex":[-100,100],
"rangey":[-100,100],
callOnUpdate: function(items){
items.each(function(e, i){
var a = new Element("img[src=/images/"+counterFluid+".jpg]");
a.inject(e.node).fade("hide").fade("in");
counterFluid++;
// Reset counter
if( counterFluid > maxLength ) counterFluid = 1;
})
}
});
// Init Fluid Wall
wallFluid.initWall();
The text was updated successfully, but these errors were encountered: