28 Jul 2008, 03:46
Zen Follower
- Join Date:
- Apr 2005
- Posts:
- 298
- Plugin Contributions:
- 0
AJAX IMAGE Swapper support thread
greydawgjr:
That's awesome! I'd like details on how you did that if you can! :clap:
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.
