AJAX IMAGE Swapper support thread

[dscott1966]

That's awesome! I'd like details on how you did that if you can!

Greydawgjr,

I edited the file includes/modules/pages/product_info/jscript_2_imageveiwer

Here is the file.

/* ImageViewer Class, a mootools based class made by Jaycode ([email protected])
** it's all object oriented, baby!
** 15 Apr 2008
*/

var ImageViewer = new Class({

arrowLeft_image_url : 'images/web_images/arrow_left.gif',
arrowRight_image_url : 'images/web_images/arrow_right.gif',

options: {
small_container_width : 75,
small_container_height : 75,
scroll_size : 3 //How many images to scroll when left or right arrow pressed
},

initialize: function(medium_image_element, navigator_element, image_array, displayed_image_num, options) {
this.medium_image_element = $(medium_image_element);
this.navigator_element = $(navigator_element);
this.num_small_images_displayed = displayed_image_num; //Number of small images displayed
this.total_image = image_array.length; //The total of images returned from server
this.leftmost_image_index = 0; //Leftmost index of displayed image
this.rightmost_image_index = displayed_image_num - 1; //Rightmost index of displayed image
this.image_array = image_array;

if (this.total_image <= this.num_small_images_displayed) {
this.num_small_images_displayed = this.total_image;
this.rightmost_image_index = this.total_image - 1;
}

this.set_previous_arrow();
this.init_small_images();
this.set_next_arrow();
if (this.options.initialize) this.options.initialize.call(this);
},

set_small_images: function() { // Display all the small images
for (var i=0; i < this.image_array.length; i++) {
this.counter = i;
var a_image = new Element('a', {
'id' : 'image_small_link-' + i,
'class' : 'back image_small',
'styles' : {
'height' : this.options.small_container_height + 'px',
'width' : this.options.small_container_width + 'px'
},
'events' : {
'click' : function(i) {
//var id = this.getProperty('id').replace('image_small_link-','');
this.set_medium_image(i);
return false;
}.bind(this, i)
},
'rel' : 'lightbox[gallery]',
'title' : this.image_array[i]['image_title']
});
var img_image = new Element('img', {
'width' : this.image_array[i]['image_width_small'],
'height' : this.image_array[i]['image_height_small'],
'src' : this.image_array[i]['image_path_small']
});

img_image.injectInside(a_image);
a_image.injectInside(this.navigator_element);
}
},

set_medium_image: function(index) {
var a_image = new Element('a', {
'id' : 'image_medium',
'class' : 'MagicZoom',
'href' : this.image_array[index]['image_path_large'],
'rel' : 'lightbox[gallery]',
'title' : this.image_array[index]['image_title']
});
var img_image = new Element('img', {
'width' : this.image_array[index]['image_width_medium'],
'height' : this.image_array[index]['image_height_medium'],
'src' : this.image_array[index]['image_path_medium'],
'alt' : this.image_array[index]['image_title'],
'title' : this.image_array[index]['image_title']
});

this.medium_image_element.empty();

img_image.injectInside(a_image);
a_image.injectInside(this.medium_image_element);
MagicZoom_findZooms();
Lightbox.init();
},

set_displayed_small_images: function() { // Set which images to set visible or not
for (var i = 0; i < this.image_array.length; i++) {
if (i < this.leftmost_image_index || i > this.rightmost_image_index) {
$('image_small_link-' + i).setStyle('display', 'none');
}
else {
$('image_small_link-' + i).setStyle('display', 'block');
}

}
},

init_small_images: function() {
if (this.total_image <= 1) { //No need to display small thumbnails if only one or less image found
this.set_medium_image(0);
}
else {
this.set_small_images();
this.set_displayed_small_images();
this.set_medium_image(0);
}
},

set_previous_arrow: function(){
var a_left = new Element('a', {
'class' : 'back',
'id' : 'arrow_left',
'events' : {
'click' : function() {
if (this.leftmost_image_index > 0) {
for (var i = 0; i < this.options.scroll_size && this.leftmost_image_index > 0; i++) {
this.leftmost_image_index--;
this.rightmost_image_index--;
}
this.set_displayed_small_images();
$('img_arrow_right').setStyle('display', 'block');
}
if (this.leftmost_image_index == 0) {
$('img_arrow_left').setStyle('display', 'none');
$('span_spacer').setStyle('display', 'inline');
}
}.bind(this)
}
});

var img = new Element('img', {
'src' : this.arrowLeft_image_url,
'id' : 'img_arrow_left',
'styles' : {'display' : 'none'}
});

new Element('span', {'id' : 'span_spacer'}).setText('\xa0').injectInside(a_left);
img.injectInside(a_left);

a_left.injectInside(this.navigator_element);
},

set_next_arrow: function(){
var a_right = new Element('a', {
'class' : 'back',
'id' : 'arrow_right',
'events' : {
'click' : function() {
if (this.rightmost_image_index < this.total_image - 1) {
for (var i = 0; i < this.options.scroll_size && this.rightmost_image_index < this.total_image - 1; i++) {
this.rightmost_image_index++;
this.leftmost_image_index++;
}
this.set_displayed_small_images();
$('img_arrow_left').setStyle('display', 'block');
$('span_spacer').setStyle('display', 'none');
}
if (this.rightmost_image_index == this.total_image - 1) {
$('img_arrow_right').setStyle('display', 'none');
}
}.bind(this)
}
});

if (this.num_small_images_displayed >= this.total_image) {
var display_mode = 'none';
}
else {
var display_mode = 'block';
}
var img = new Element('img', {
'src' : this.arrowRight_image_url,
'id' : 'img_arrow_right',
'styles' : {
'display' : display_mode
}
});

img.injectInside(a_right);

a_right.injectInside(this.navigator_element);

}
});

ImageViewer.implement(new Options, new Events);

and uploaded the files in this zip.

[dscott1966]

Sorry to sound stupid, but in the readme file, it states in the installation section:

1. Read (& follow) point I.3 above, copy & paste everything inside the folders
into your website's root folder.

Do I simply copy the whole AJAX_image_swapper_v3.1.3 folder in to my root folder, or do I need to place each individual file in the correct place myself?

Thanks.

You need to place each individual file yourself.

[monkeypeach]

You need to place each individual file yourself.

Thanks!

[monkeypeach]

Just about there, except I'm not sure where the "fual slimbox v0.1.5 documentation" should go?

[dscott1966]

Just about there, except I'm not sure where the "fual slimbox v0.1.5 documentation" should go?

Thats nothing that just documentation on how to install fual slimbox and how to use it. If this is a fresh install then you do not need to do anything in that file. If you have installed fual slimbox before you installed ajax image swapper then you need to install the zen_lightbox patch that is included in that file.

[monkeypeach]

I think you need all of this:

UNINSTALLATION
SET @t4=0;
SELECT (@t4:=configuration_group_id) as t4 
FROM configuration_group
WHERE configuration_group_title= 'Fual Slimbox';
DELETE FROM configuration WHERE configuration_group_id = @t4;
DELETE FROM configuration_group WHERE configuration_group_id = @t4;

DROP TABLE products_attributes_images;

SET @t4=0;
SELECT (@t4:=configuration_group_id) as t4 
FROM configuration_group
WHERE configuration_group_title= 'AJAX Image Swapper';
DELETE FROM configuration WHERE configuration_group_id = @t4;
DELETE FROM configuration_group WHERE configuration_group_id = @t4; 

Those double dashes are commented out lines, I uncommented them in the code above...

Do I just copy and paste the above into "install sql patches" to delete this? I don't quite understand your double dashes comment?.

[dscott1966]

Do I just copy and paste the above into "install sql patches" to delete this? I don't quite understand your double dashes comment?.

What are you trying to do delete it?

[monkeypeach]

Realised I don't really need this contribution, so I'd like to uninstall it.

[greydawgjr]

Realised I don't really need this contribution, so I'd like to uninstall it.

Yes, just copy and paste that code. The double dashes was referring to the original code where it is commented out.

[monkeypeach]

ok, tried it, but I get the following message:

1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'UNINSTALLATION SET @t4=0' at line 1
in:
[UNINSTALLATION SET @t4=0;]
If you were entering information, press the BACK button in your browser and re-check the information you had entered to be sure you left no blank fields.