957 replies to this topic

[spooks]

Simple Multi Image Add-on (Un-Limited) with FancyBox Popups

There are many multi image contributions, but I found many have become much too bloated or just didn't fit, so I created this, allowing as many extra product pictures as you want with admin control and fancy lightbox like popups.

Features:

1.Its a simple strait forward design, only two files to edit.
2.An un-limited number of additional images can be added to any product without modification.
3.Any product can have as many (or few) images as wanted.
4.Additional images can be deleted if needed.
5.Fancybox is used for the image popups, so all product images can be browsed within a single popup. (Fancybox is like lightbox but better lighter code).
6.Additional image layout can be modified in admin, selecting a horizontal or vertical layout and the number or images to show per row
7.Additional image size is also set in admin.
8.I recommend this is used with OscThumb for auto thumbnailing & faster load times.
9.As a bonus addition, a function is added in the product edit page to give a instant update option.

Fancybox is released under the MIT License, details and examples can be found here .


To work Fancybox is particular about the doc-type used, check at their site & in the installation.


Tested on PHP 4 & 5, SQL 4 & 5, osC 2.2 ms2, rc1 & rc2a and is register_globals off compatible.



Contribution is here

Edited by Jan Zonjee, 28 September 2009, 12:03.

[spooks]

Settings:

I forgot to include details on admin settings, they are all within admin->images:

Tiny Image Width default 30
Tiny Image Height default 30
Additional images per row/column default 3
Additional Image Format default horizontal


Additional images per row/column means if you have more images than the setting they will appear on new rows/columns (depending on layout)

Additional Image Format means your extra product pictures will appear either in rows below the main product picture or in columns to the right of the main product picture



Also a line was missed of the install instructions for admin/categories.php

after:

require('includes/application_top.php');

add:

$add_images = 3; // default number of additional image input boxes to show

As it says, that lets you control the default number of input boxes shown, there will always be at least one empty one (for a new image), regardless of how many images already exist for the product.

Edited by spooks, 10 September 2009, 11:47.

[spooks]

Demo

To see a demo of the popup effect used click here

[Mojo47]

Hello, thank you for this contribution. Fancy lightbox work and look great, but when i run the sql query i receive an error:

Error

SQL query:

ALTER TABLE `products` ADD `products_image_array` VARCHAR( 800 ) NULL DEFAULT NULL INSERT INTO `configuration` ( `configuration_title` , `configuration_key` , `configuration_value` , `configuration_description` , `configuration_group_id` , `sort_order` , `last_modified` , `date_added` , `use_function` , `set_function` )
VALUES (
'Tiny Image Width', 'TINY_IMAGE_WIDTH', '30', 'Image width for additional image thumbnail', 4, 20, NULL , now( ) , '', ''
);

MySQL said: Documentation
#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 'INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `config' at line 2

I think is some mistake in sql file. Thank you.

[spooks]

Its a copy & paste error!! thats two lines you are trying to run as one, hence error.

That should be:

ALTER TABLE `products` ADD `products_image_array` VARCHAR( 800 ) NULL DEFAULT NULL 

INSERT INTO `configuration` ( `configuration_title` , `configuration_key` , `configuration_value` , `configuration_description` , `configuration_group_id` , `sort_order` , `last_modified` , `date_added` , `use_function` , `set_function` )
VALUES ('Tiny Image Width', 'TINY_IMAGE_WIDTH', '30', 'Image width for additional image thumbnail', 4, 20, NULL , now( ) , '', '');

all the other lines should start with INSERT INTO too

[rocdy]

Where i can see the demo of this contributions installed on oscommerce shop.
I have additional Images addon intalled but because that i can't use fancybox for the popup images. Soo i want to use this addon for the solution.

Thanks before.

[rocdy]

rocdy, on Sep 11 2009, 01:35 AM, said:

Where i can see the demo of this contributions installed on oscommerce shop.
I have additional Images addon intalled but because that i can't use fancybox for the popup images. Soo i want to use this addon for the solution.

Thanks before.

Woow......... I have tested it in fresh install oscommerce-2.2rc2a.

Wonderfull.....

Thanks You Sam for this Contributions.

Just want to khow, are we can add more upload images box when create new products.
I want to know where i can set it in admin.
In there just have New Additional Image (1), New Additional Image (2), New Additional Image (3).

Edited by rocdy, 11 September 2009, 02:25.

[rocdy]

I found some issue in this addon. When i delete additional images or delete product.
The products images are still in images directory, it just delete the value in the database, not the products images in the catalog/images/

[spooks]

rocdy, on Sep 11 2009, 03:24 AM, said:

Just want to khow, are we can add more upload images box when create new products.
I want to know where i can set it in admin.
In there just have New Additional Image (1), New Additional Image (2), New Additional Image (3).

That is already adressed, categories.php line 15

$add_images = 3; // default number of additional image input boxes to show

change the value to whatever you want (within reason) & you will get that number of input boxes by default.

[cemfundog]

spooks, on Sep 10 2009, 09:19 PM, said:

Its a copy & paste error!! thats two lines you are trying to run as one, hence error.

That should be:

ALTER TABLE `products` ADD `products_image_array` VARCHAR( 800 ) NULL DEFAULT NULL 

INSERT INTO `configuration` ( `configuration_title` , `configuration_key` , `configuration_value` , `configuration_description` , `configuration_group_id` , `sort_order` , `last_modified` , `date_added` , `use_function` , `set_function` )
VALUES ('Tiny Image Width', 'TINY_IMAGE_WIDTH', '30', 'Image width for additional image thumbnail', 4, 20, NULL , now( ) , '', '');

all the other lines should start with INSERT INTO too

I am having the same problem even after applying this change, can some one please look at the syntax and tell us if it is correct. I really love this contrib and what it can do. I would love to install it but I am stuck at the SQL step. Please help. Here is the code I am using:

ALTER TABLE `products` ADD `products_image_array`VARCHAR( 800 ) NULL DEFAULT NULL 
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Tiny Image Width', 'TINY_IMAGE_WIDTH', '30', 'Image width for additional image thumbnail', 4, 20, NULL, now(), '', '');
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Tiny Image Height', 'TINY_IMAGE_HEIGHT', '30', 'Image height for additional image thumbnail', 4, 21, NULL, now(), '', '');
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Additional images per row/column', 'TINY_IMAGE_GROUP_SIZE', '3', 'Number of additional images to show per row/column in the product display', 4, 22, NULL, now(), '', '');
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Additional Image Format', 'ADDITIONAL_IMAGE_FORMAT', 'horizontal', 'Show additional image in a vertical or horizontal format', 4, 23, NULL, now(), '', 'tep_cfg_select_option(array(\'horizontal\', \'vertical\'),');

[spooks]

Oops, sorry missed of a ; there

try

ALTER TABLE `products` ADD `products_image_array`VARCHAR( 800 ) NULL DEFAULT NULL; 
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Tiny Image Width', 'TINY_IMAGE_WIDTH', '30', 'Image width for additional image thumbnail', 4, 20, NULL, now(), '', '');
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Tiny Image Height', 'TINY_IMAGE_HEIGHT', '30', 'Image height for additional image thumbnail', 4, 21, NULL, now(), '', '');
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Additional images per row/column', 'TINY_IMAGE_GROUP_SIZE', '3', 'Number of additional images to show per row/column in the product display', 4, 22, NULL, now(), '', '');
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Additional Image Format', 'ADDITIONAL_IMAGE_FORMAT', 'horizontal', 'Show additional image in a vertical or horizontal format', 4, 23, NULL, now(), '', 'tep_cfg_select_option(array(\'horizontal\', \'vertical\'),');

[spooks]

rocdy, on Sep 11 2009, 04:02 AM, said:

When i delete additional images or delete product.
The products images are still in images directory, it just delete the value in the database, not the products images in the catalog/images/

Thats standard osC as its not known if the images are used elsewhere, the issue of un-used images is delt with by Remove Unused Images http://addons.oscommerce.com/info/6346

However I will look at adding a 'also remove from server' option in a future update.

[cemfundog]

spooks, on Sep 11 2009, 07:44 AM, said:

Oops, sorry missed of a ; there

try

ALTER TABLE `products` ADD `products_image_array`VARCHAR( 800 ) NULL DEFAULT NULL; 
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Tiny Image Width', 'TINY_IMAGE_WIDTH', '30', 'Image width for additional image thumbnail', 4, 20, NULL, now(), '', '');
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Tiny Image Height', 'TINY_IMAGE_HEIGHT', '30', 'Image height for additional image thumbnail', 4, 21, NULL, now(), '', '');
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Additional images per row/column', 'TINY_IMAGE_GROUP_SIZE', '3', 'Number of additional images to show per row/column in the product display', 4, 22, NULL, now(), '', '');
INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) 
VALUES ('Additional Image Format', 'ADDITIONAL_IMAGE_FORMAT', 'horizontal', 'Show additional image in a vertical or horizontal format', 4, 23, NULL, now(), '', 'tep_cfg_select_option(array(\'horizontal\', \'vertical\'),');

FIXED...This contrib is great, thank you for fixing that for me!

[CGhoST]

This is a wonderful contribution. GREAT JOB

i would like to know can this contribution be used with Easy populate and product attributes contribution.

It would be a REALLy nice addition if this was possible. Any help would be much appreciated.

[spooks]

CGhoST, on Sep 12 2009, 05:07 AM, said:

can this contribution be used with Easy populate and product attributes contribution.

Most likely yes, the changes to product_info are minor, relating only to images, in categories.php changes are just whats needed for adding them.

The only caviat is the javascript, this is jquery based so if iether of those use mootools in product_info.php iether this, or they will fail.

[azer]

im sure you already know about more pics and ultra pics
could you tell us when you created this contribution what do you think is a real advantage using yours
like for instance to have unlimited image ... and the rest of nice better feeatures ?

[spooks]

azer, on Sep 13 2009, 01:52 AM, said:

what do you think is a real advantage using yours
like for instance to have unlimited image ... and the rest of nice better feeatures ?

I think I stated in my OP my reasons, But yes one was the unlimited images with a very simple dbase mod (not a new table or many new columns, many have issues these days with too many queries ), I also wanted it minimilist, so easy to install and I needed it to use Fancybox rather than lightbox, which has the advantage of being a more compatible than lightbox with other code & has lighter code too.

I hope you like it?

[thisisbolo]

Hey Spooks! So I followed each and every step you've outlined and got the "simple multi-image add on" working, however, when I click on any of the images, the fancybox doesn't work. A new window opens when an image is clicked on. Would you happen to know why?

Thanks!

BoLo

[spooks]

Quote

when I click on any of the images, the fancybox doesn't work. A new window opens when an image is clicked on.

Fancybox is jquery based, if you have any other jquery apps on the product info page you must ensure that there is only one instance of jquery, that its version is whats needed for all apps using it and it contains all the calls needed.

jquery is incompartible with mootools, if you have any mootools apps on product info, iether they or this will fail (depends what came first). Some bookmarking scripts use mootools.

Edited by spooks, 13 September 2009, 08:36.

[thisisbolo]

spooks, on Sep 13 2009, 04:33 AM, said:

Fancybox is jquery based, if you have any other jquery apps on the product info page you must ensure that there is only one instance of jquery, that its version is whats needed for all apps using it and it contains all the calls needed.

jquery is incompartible with mootools, if you have any mootools apps on product info, iether they or this will fail (depends what came first). Some bookmarking scripts use mootools.

No. No mootools. I have this in the header.php, but I removed it and tried and still no luck. Just a share button.

<!-- AddThis Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a727890408bb625" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a727890408bb625"></script>
<!-- AddThis Button END -->