Post by Tiger1937 » Mon Sep 13, 2010 8:50 pm

Hi,

Hopefully someone can point me in the right direction here, I've installed MyModule 1.7 which works just fine for images and links etc, but I'd like to try and include the JavaScript below. As soon as I save it within the editor, certain tags are removed and it the code doesn't work. What am I doing wrong ? I've also ried to use it in a Product description and the same happens, so I presume it's either not supposed to work in OC or I'm just as dumb as a plank :choke:

Thanks for any help.
<!-- THREE STEPS TO INSTALL RANDOM IMAGE ROTATOR:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Robert Bui (astrogate@hotmail.com) -->
<!-- Web Site: http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY OnLoad="rotateImage('rImage')">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<center>
<img name="rImage" src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120 height=90>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 2.29 KB -->

New member

Posts

Joined
Fri Mar 05, 2010 7:42 pm

Post by Qphoria » Mon Sep 13, 2010 9:09 pm

Well its says to add it to the head of your document. There can only be one head and it already is set in the header.tpl file

You could still likely use it if you remove the head tags and use the "SOURCE" button to goto source mode and then save WITHOUT going back to wysiwyg mode. But you will likely lose it again the next time you edit because I think ckeditor cleans that up

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by Tiger1937 » Mon Sep 13, 2010 9:37 pm

Thanks for that, you're correct.... I saved it without going back to view mode and it works, not very elegent though. Do you know of a module that does something along these lines ??

Thanks again.

New member

Posts

Joined
Fri Mar 05, 2010 7:42 pm

Post by Qphoria » Mon Sep 13, 2010 11:02 pm

Well its just a script. add it to the header.tpl with all the other scripts

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by cantykiwi » Tue Sep 14, 2010 6:33 am

Tiger1937 wrote:Thanks for that, you're correct.... I saved it without going back to view mode and it works, not very elegent though. Do you know of a module that does something along these lines ??

Thanks again.
Hi there. We have had great success using some javascript code called nivo-slider with the MyModule module as you were trying to do in your first post, pretty easy to use and has great effects with minimal modifications to make it work, no need to modify any opencart files.

Source code can be found here:- http://nivo.dev7studios.com/

All the best!

New member

Posts

Joined
Mon Sep 13, 2010 12:37 pm

Post by Tiger1937 » Mon Sep 20, 2010 5:41 pm

Thanks for that, I'll give it a whirl... are there any notes on installation for OpenCart ?

New member

Posts

Joined
Fri Mar 05, 2010 7:42 pm

Post by cantykiwi » Wed Sep 22, 2010 6:48 am

Tiger1937 wrote:Thanks for that, I'll give it a whirl... are there any notes on installation for OpenCart ?
Not that i know of, but here are some tips:-

After you install the MyModule module into opencart you basically just copy and paste the javascript code into the 'source code' area of MyModule and modify the file paths to suit your own sites directory structure.

Here is the basic code I am using on my test server (this is for large adverts with MyModule set to appear in the home position, i have another one on the right side for smaller adverts also):-

<p id="slider2">
<a href=""><img alt="" src="../advert/monstersinc.jpg" title="" /></a><a href=""><img alt="" src="../advert/nemo.jpg" title="" /></a><a href=""><img alt="" src="../advert/up.jpg" title="" /></a><a href=""><img alt="" src="../advert/walle.jpg" title="" /></a></p>
<p>
<noscript><a href=""><img style="padding: 12px 13px 0px 13px;"src="../advert/walle.jpg" width="550" height="220" border="0" /></a></noscript></p>
<p>
<link href="../advert/nivo-slider.css" media="screen" rel="stylesheet" type="text/css" /><link href="../advert/mymodule2-custom-nivo-slider.css" media="screen" rel="stylesheet" type="text/css" /></p>
<script src="../advert/jquery.nivo.slider.pack.js" type="text/javascript"></script><script src="../advert/mymodule2.js" type="text/javascript"></script>

As you can see my images and scripts are in the advert directory. the 'mymodule2-custom-nivo-slider.css' is used to override the included 'nivo-slider.css' to position the images within the module without disturbing the original javascript file.

I am only an intermediate level programmer at best, so hope this helps but may need modifications or improvements, but hey at least it's free!!!

Hope this helps.

New member

Posts

Joined
Mon Sep 13, 2010 12:37 pm

Post by Tiger1937 » Wed Sep 22, 2010 5:00 pm

That's great, thanks for your help.

MUCH APPRECIATED

New member

Posts

Joined
Fri Mar 05, 2010 7:42 pm
Who is online

Users browsing this forum: No registered users and 2 guests