Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

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


spooks

Recommended Posts

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

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

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

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Demo

 

To see a demo of the popup effect used click here

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

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

 

Beginner in php programming and still learning from this forums.

Special thanks for Oscommerce Community Forums that help me a lot. :-)

Link to comment
Share on other sites

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

Rocdy

 

Beginner in php programming and still learning from this forums.

Special thanks for Oscommerce Community Forums that help me a lot. :-)

Link to comment
Share on other sites

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:

Rocdy

 

Beginner in php programming and still learning from this forums.

Special thanks for Oscommerce Community Forums that help me a lot. :-)

Link to comment
Share on other sites

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. :)

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

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\'),');

Link to comment
Share on other sites

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\'),');

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

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. :)

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. ;)

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

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 ?

MS2

Link to comment
Share on other sites

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? :)

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 

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.

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...