Rokflow module not working

[theEditor]

I have uploaded my rokflow.js file from another template and added the html they provide in their demo site for it to work. And after I configure the module on my site still its just static. The images appear vertically and they dont move.

If someone has a solution to this please help my deadline is tomorrow.

Thank you in advance.

[theEditor]

I keep refreshing this page every few minutes hoping i'll find a reply. Where is my fairy god father today? lol

For anyone who doesn't know which module i'm talking about click on the link below. It is the one with the flowing pictures on it. If you have seen something similar that works please refer me to it.

http://demo.rockettheme.com/mobius_roks ... e&Itemid=1

Thanks in advance guys i'm really banking on you.

[theEditor]

OK have to stop refreshing now. If anyone has a solution please contact me at this website http://www.lothiandesigns.co.uk Edinburgh

Hope to hear from someone soon

Cheers

[lambch0p]

Hi,

I'm having the same problem. The RokFlow module requires the mootools library. I've added this into my file system, template_details.xml and index.php but still my images are static and do not scroll. Does anyone have information about what other script rokflow.js requires in order to run. I really want to use this on my site, but for every additional script I realise it needs, I just get another error in my javascript error console.

Cheers

M

[tpflanz]

I am looking for the same thing. I love the module, but would love to use it in a different template.

[theEditor]

Hi,

To the guys that have written me enquiring about the module, I have not found a solution yet. I am still looking and hopefully if we keep this topic current some knight or Knightress is going to jump in and save the day.

[tier1304]

I had the same problem with Rokflow that the images didn't flow.

But after I realised that I have to put more than 6 images in the module it works.
Perhaps it is the same for your site?

And you have deactivated the Editor when editing the rokflow module?

[tpflanz]

That seemed to do it. It appears a bit glitchy though. Does it seem glitchy to anyone else?

http://tpwebworks.com/index.php?option= ... &Itemid=62

[tier1304]

Yes, it seems a little bit shakily.
Have you small images for the rokflow and the larger images for the Zoom-out?

Perhaps it's a server loading problem.

[tpflanz]

ow could I go about addressing and remedying it?

[tpflanz]

I finally got it working, but seems a bit glitchy: http://tpwebworks.com/index.php?option= ... &Itemid=62

This is what I did, make sure you have 6+ pictures for it to function:
I took the css & rokflow.js from the RocketTheme Replicant theme as well as created a new module position following the Replicant template. I put all of this in the Firenzie template.

First copy the rokflow.js file from the Replicant theme to the js folder of the Firenzie.

Next, the Firenzie did not have a module position that spans the website template, so I created one. Go into "Template Manager - Module Positions" and create a new module position or simply use the name of one not already used by your template. advert1 is used by the Replicant template, but not the Firenzie, so this is what I used.

Add the following code in the "mainframe" div class (may be different in other templates) of the Firenzie template's index.php to make a module position that spans the entire template width.

Code: Select all

<tr>
      <td>  
             <br>
              <?php if (mosCountModules('advert1')) : ?>
	      <div id="showcase">
	      <?php mosLoadModules('advert1', -2); ?>
	      </div>
	      <?php endif; ?>
       </td>
</tr>

Next, there is no css code for the RokFlow module in the Firenzie template so, I copied this portion from the template.css.css in the Replicant template and added it to the template.css.css of the Firenzie template. Also, copy the trans-20.png image from the Replicant template and place in the appropriate Firenzie template folder, or use another image.

Code: Select all

#showcase {
	background: url(../images/trans-20.png);
}

#rokflow, #rokflow #loader {
	overflow: hidden;
	position: relative;
	width: 800px;
	height: 170px;
	background: 50% 50% no-repeat url(../images/loader.gif);
}

#rokflow, #rokflow * {
	margin:0; padding:0; border:0;
}

#rokflow div {
	float: left;
	position: relative;
}

#rokflow img {
	width: 124px;
	height: 194px;
	border: 0;
	top:  40px;
	margin-top: 15px;
}

#rokflow div h3 {
	display: block;
	position: absolute;
	white-space: nowrap;
	text-align: center;
	font-size: 10px;
	font-weight: normal;
}

Finally, go into your Joomla! "Global Settings" and set "Default WYSIWYG Editor:" to "No WYSIWYG Editor." Then create a new module and insert the following code format. Make sure to change the path to your rokflow.js, and use the correct path to your images. "Title" following the "_large" images will the the text shown below the image after it is clicked on. "Title" for the thumbnail image is the text shown above the images on the rotator. "alt" is the text that shows up when you scroll over the images in the rotator.

Code: Select all

<script src="templates/rt_firenzie/js/rokflow.js" type="text/javascript" charset="utf-8">
</script>
		<script type="text/javascript" charset="utf-8">
			window.addEvent('load', function() {
				new RokFlow('rokflow');
			});
		</script>	
<div id="rokflow">
	<div id="loader"></div>
	<div>
	 <a href="images/covers/1_large.jpg" title="Pink Floyd">
	<img src="images/covers/1.png" title="Pink Floyd" alt="Pink Floyd" />
		</a>
	</div>
	<div>
         <a href="images/covers/2_large.jpg" title="Bon Jovi">
	<img src="images/covers/2.png" title="Bon Jovi" alt="Bon Jovi" />
                              </a>
			</div>
	<div>
	 <a href="images/covers/3_large.jpg" title="Rihanna">
	<img src="images/covers/3.png" title="Rihanna" alt="Rihanna" />
		</a>
	</div>
	<div>
         <a href="images/covers/4_large.jpg" title="Smashing Pumpkins">
	<img src="images/covers/4.png" title="Smashing Pumpkins" alt="Smashing Pumpkins" />
                              </a>
			</div>
	<div>
         <a href="images/covers/5_large.jpg" title="Iron Maiden">
	<img src="images/covers/5.png" title="Iron Maiden" alt="Iron Maiden" />
                              </a>
			</div>
	<div>
	 <a href="images/covers/6_large.jpg" title="Pink Floyd">
	<img src="images/covers/6.png" title="Pink Floyd" alt="Pink Floyd" />
		</a>
	</div>
</div>

[leo_asheesh]

i have an issue with the rok flow, its working perfectly fine on news link from the menu and it doesnt work at all when i click other menu items or Home. it remains static and i also get JS error related to Mootools.js file

can someone help?