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.