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

[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 September 28, 2009 by Jan Zonjee

[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 September 10, 2009 by spooks

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

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 September 11, 2009 by rocdy

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

 

:blink: :blush:

[spooks]

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]

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 :blush:

 

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]

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]

Oops, sorry missed of a ; there :blush:

 

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]

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]

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]

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 September 13, 2009 by spooks

[thisisbolo]

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, '', '', '[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 -->

[spooks]

Its clear someting is preventing the javascript to run, can u confirm you did copy the js directory & contents to your images directory?

[satish]

Good one.

Thanks!!

 

Satish

[thisisbolo]

Its clear someting is preventing the javascript to run, can u confirm you did copy the js directory & contents to your images directory?

 

Hey Spooks. Yes. Minor error on my end. All is working and is working well! Awesome contribution. Thank you so much for all your help!

 

All the best!

 

BoLo

[Guest]

Its clear someting is preventing the javascript to run, can u confirm you did copy the js directory & contents to your images directory?

Hi Sam.

Great contrib, but i have a little problem. I´m sitting here with my danish OSC v2.2 RC2a, but i have one problem. I can´t see any pictures in fancybox.

I havent install any other contrib, as far as i know. And no mootools. And the js directory is copied to the images directory.

I there any where in the code, i can look.

I hope you can help. Please tell me if you need any code or other things.

Best regards

mofpeXL

[spooks]

 

If you are getting blank popups rather than images opening in a new page (as above) the most likely cause is incorrect doctype, the install includes a list of valid doctypes.