AJAX IMAGE Swapper support thread

[dscott1966]

I got the magiczoom to work with this mod. The only thing is it takes out the lightbox effect, there is no clicking of the image.

I fixed it to work with lightbox also.

Can be seen here using both: http://dealz-r-us.com/index.php?main...&products_id=2

[greydawgjr]

I fixed it to work with lightbox also.

Can be seen here using both: http://dealz-r-us.com/index.php?main...&products_id=2

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

[greydawgjr]

I've moved my attributes boxes from their default location so that they display on the side of the image rather than below it by editing the tpl_product_info_display.php file (and my stylesheet of course). However, my images now fail to load. Does anyone have any idea why this might be?

[monkeypeach]

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.

[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]

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.

[dsided]

With the MagicZoom and AIS mod from dscott1966 I'm get errors in IE7. You can zoom the first image, however the rest don't want to zoom. Has anyone else seen this? Any ideas?

[pjb923]

With the MagicZoom and AIS mod from dscott1966 I'm get errors in IE7. You can zoom the first image, however the rest don't want to zoom. Has anyone else seen this? Any ideas?

I just discovered the same problem and don't have any solution yet.