Hey guys, I am trying to add MooFlow (with mootools) into a page on my site. The page is located here: http://www.fullfusionfilms.com/?page=films (http://www.fullfusionfilms.com/?page=films)
I am running version SMF 1.1.7 and TinyPortal v1.0.5.
I have followed THESE instructions, and have managed so far to get a large blank box (if you look on the site)
Step 1: Download MooFlow here http://www.outcut.de/mooflow/
Step 2: Unzip and upload folder to your root. Rename the folder to MooFlow
Step 3: Open your themes index.template file and add these lines just before </head>
<script type="text/javascript" src="MooFlow/mootools-beta-1.2b2.js"></script>
<script type="text/javascript" src="MooFlow/MooFlow.js"></script>
<script type="text/javascript">
var myMooFlowPage = {
start: function(){
var mf = new MooFlow($(\'MooFlow\'), {
stylePath: \'MooFlow/MooFlow.css\',
useSlider: true,
useAutoPlay: true,
useCaption: true,
useResize: true,
useWindowResize: true,
useMouseWheel: true,
useKeyInput: true,
startIndex: 4
});
}
};
window.addEvent(\'domready\', myMooFlowPage.start);
</script>
Step 4: Make a new script block and insert all this code:
<div id="MooFlow">
<div><img src="MooFlow/img/1.jpg" title="Title" alt="Some descriptions" longdesc="Link" /></div>
<div><img src="MooFlow/img/2.jpg" title="Title" alt="Some descriptions" longdesc="Link" /></div>
<div><img src="MooFlow/img/3.jpg" title="Title" alt="Some descriptions" longdesc="Link" /></div>
</div>
Step 5: Edit the image titles, descriptions etc...
Now this has not worked, but that tutorial is a bit old, so if anyone could PLEASE help me ASAP it would be much appreciated, because I don't know where to go from here.
Thanks - Josh
Do you have a "Mooflow" directory on your site that has the images in it?
Josh,
This looks like something you will have to ask the author of the code snippet about. The link in step 1 is not even available. I don't see how we can help you but maybe somebody else has an answer and will pop in here.
ZarPrime
Try the link this way:
http://www.outcut.de/MooFlow/
Try accessing your MooFlow folder by
../MooFlow/
Hey thanks for the replies.
1: Sorry I meant to mention that I had the files and put them into the directory.
2: I did re-post to that person but I didnt get any help so I turned to the next best place :P
I've done everything right as far as I can tell :(
Did you try using
../MooFlow/
in your URLs?
It seems to me that blocks are run by the Load.php file, which is inside your Sources directory. So, when you use MooFlow/, the script is looking for a subdirectory inside that folder.
Another thing you could try is to put your whole URL in...
http://www.fullfusionfilms.com/MooFlow/
The directory is there. It's just not being accessed.
Hmm so I changed it and still no change. Here is whats in my index.template.php
<script type="text/javascript" src="../MooFlow/mootools-beta-1.2b2-compatible.js"></script>
<script type="text/javascript" src="../MooFlow/MooFlow.js"></script>
<script type="text/javascript">
var myMooFlowPage = {
start: function(){
var mf = new MooFlow($(\'MooFlow\'), {
stylePath: \'../MooFlow/MooFlow.css\',
useSlider: true,
useAutoPlay: true,
useCaption: true,
useResize: true,
useWindowResize: true,
useMouseWheel: true,
useKeyInput: true,
startIndex: 4
});
}
};
window.addEvent(\'domready\', myMooFlowPage.start);
</script>
Then I would try the full URL.
How come the single quotes are escaped? Are you putting this in a php or html article?
Quote from: IchBinâ„¢ on January 28, 2009, 02:48:52 PM
How come the single quotes are escaped? Are you putting this in a php or html article?
Its going into my themes index.template.php file
Quote from: JPDeni on January 28, 2009, 12:48:45 PM
Then I would try the full URL.
Also tried that JP but still nothing. :(
So you're just getting a blank page? And you know that what you're doing should give you something?
At this point, I would be very frustrated, which causes me to go back to the very simplest things. You know you have a directory and that your files are there, right? You just can't get to them. Forget the javascript for the moment and just focus on displaying one of the images. Create a new scriptbox and enter the html to display an image. Just that. Keep tweaking it until you get the image to display. You may have to work with relative folders or the full URL, but you'll eventually get it.
I'm wondering about your comment about the index.template.php file. I guess I misunderstood, because I thought you were putting this in a scriptbox.
The reason I asked is because in the first post you said you were putting it into a page. But that doesn't tell us whether its an article page, or something in a block on that page. If you are putting it into your index.template.php then the folder should probably be in your themes folder, unless you explicitly give the full path /home/user/www/folder.
Sorry I think I have confused you all :P basically - that code is in my index.template file and ALSO this code is in a block sciptbox.
<div id="MooFlow">
<div><img longdesc="Link" alt="Some descriptions" title="Title" src="/MooFlow/img/1.jpg" /></div>
<div><img longdesc="Link" alt="Some descriptions" title="Title" src="/MooFlow/img/2.jpg" /></div>
</div>
Now I just put that code straight into the box. If i use an iframe and link it to a html page i made, it shows the images... (I will put it back to an iframe so you can see.)
This is it with an iframe currently: http://fullfusionfilms.com/index.php?page=films (http://fullfusionfilms.com/index.php?page=films) (ignore the "some descriptions bit it because i dont have 3 images i was just testing :P)
Okay. :) Let's do one thing at a time, then. Remove any of the "escapes" so that you can use it in a scriptbox.
Try using this in a scriptbox:
<div id="MooFlow">
<div><img longdesc="Link" alt="Some descriptions" title="Title" src="http://fullfusionfilms.com/MooFlow/img/1.jpg" /></div>
<div><img longdesc="Link" alt="Some descriptions" title="Title" src="http://fullfusionfilms.com/MooFlow/img/2.jpg" /></div>
</div>
Hmm the images dont show up in either scriptbox or html.... I can see it in the preview box of the html though...just not on the page. >:(
That's really strange, because it works in a scriptbox on my site:
http://jpdeni.comze.com/index.php
Maybe a bug in TP 1.5?
Works on my site in a script block as well and I'm using TP 1.05 beta 1, same version as you.
JPD, this is strange, but if you are on his page and refresh it, you see the images for a brief instant (like a half a second or less) and then it disappears once the page has finished loading. There is something (A Mod or something) that is interfering with this.
ZarPrime
I was wondering if there could be something in the .css file, with the div id.
The first thing with debugging is to switch to the default theme and see what happens. If things don't improve, then start removing mods, checking after each removal.
Quote from: JPDeni on January 29, 2009, 01:39:18 AM
I was wondering if there could be something in the .css file, with the div id.
The first thing with debugging is to switch to the default theme and see what happens. If things don't improve, then start removing mods, checking after each removal.
Il give it a go right now
Right so, I put it to the default core theme and when I go the the films page, I can now see the images. Still no script there, but the images show. So is my custom theme messing up something? ....this is so weird :o.......
Yep. It's your theme that's the problem. I wouldn't know where to tell you to start with it. Themes and me are pretty much ... not. :)
Thing is though if i can see them in a iframe, that should be alright? the next problem is actually getting mooflow to work....