Post by SteveWylde » Tue Feb 12, 2013 5:28 am

I am running OC 1.5.4.1 with the default theme. I am having a problem with the product image viewer when there are multiple product images. In the image pop up the product description is long and the image number and the product description overlap each other and look like a jumbled mess.

Can anyone tell me how to remove the "image number" text from the product image pop-up?

Thanks in advance!

New member

Posts

Joined
Wed Nov 21, 2012 6:14 am

Post by victorj » Tue Feb 12, 2013 6:28 am

standard oc works with color box found in:
catalog/view/javascript/jquery/colorbox

you will have to search in js files.

perhaps you can do a search in extensions for fancybox witch is much nicer and more of this time and will solve your problem.

Koeltechnische deurrubbers eenvoudig online op maat bestellen.
Alle niet stekplichtige onderdelen zoals scharnieren, sloten, randverwarming en verlichting voor alle typen koelingen en vriezers.
https://koelcel-onderdelen.com


User avatar
Expert Member

Posts

Joined
Sat Jun 25, 2011 4:09 am
Location - Alkmaar Holland

Post by SteveWylde » Sat Feb 16, 2013 9:18 am

Many thanks, I'll give fancybox a try. I had tried using prettyphoto but I have seo urls and when it loads the pop up image it adds a few letter of code to the end of the url and leaves it there. I thought that might affect seo so I uninstalled it.

New member

Posts

Joined
Wed Nov 21, 2012 6:14 am

Post by SteveWylde » Tue Feb 19, 2013 6:23 am

Fancybox works great, thank you!

New member

Posts

Joined
Wed Nov 21, 2012 6:14 am

Post by jsw » Sat Nov 16, 2013 11:19 am

Came cross the same problem yesterday, in v1.5.5.1, image popup window has the image text over lapping image number. Found this thread and tried Fancybox2 extension, it is a very nice extension but I ran into the two problems:

1) The page "shifts" a little when the image pops up.
2) Under product details, it displays these characters "}); }); //-->".

(In the comments section of Fancybox2 extension people talked about the same issues, hope it will get fix soon as it is really a nice extension to show popup images.)

Mean while, I went back to use the default colorbox and modified the pop up window to have a thicker area at the bottom (15px) and moved the "text" into that area, so now the "text" displays in the added area above "image numbers", it looks nice and clear (if you have longer text or smaller popup size, you can add more room for it).

Details:

I'm working on the localhost, so the file to modify is: C:\xampp\htdocs\catalog\view\javascript\jquery\colorbox\colorbox.css

Change:

Code: Select all

cboxLoadedContent{margin-bottom:5px;}
To:

Code: Select all

#cboxLoadedContent{margin-bottom:15px;}
And change:

Code: Select all

#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
To:

Code: Select all

#cboxTitle{position:absolute; bottom:0; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
I'm not a programmer and new to OpenCart. I've got a lot of help from reading this wonderful forum (THANK YOU!), thought to post the details of this simple solutions here to share. Cheers!

jsw
Newbie

Posts

Joined
Wed Jun 12, 2013 11:42 pm
Location - Canada

Post by gartheman » Thu Nov 21, 2013 6:54 am

jsw wrote:Came cross the same problem yesterday, in v1.5.5.1, image popup window has the image text over lapping image number. Found this thread and tried Fancybox2 extension, it is a very nice extension but I ran into the two problems:

1) The page "shifts" a little when the image pops up.
2) Under product details, it displays these characters "}); }); //-->".

(In the comments section of Fancybox2 extension people talked about the same issues, hope it will get fix soon as it is really a nice extension to show popup images.)

Mean while, I went back to use the default colorbox and modified the pop up window to have a thicker area at the bottom (15px) and moved the "text" into that area, so now the "text" displays in the added area above "image numbers", it looks nice and clear (if you have longer text or smaller popup size, you can add more room for it).

Details:

I'm working on the localhost, so the file to modify is: C:\xampp\htdocs\catalog\view\javascript\jquery\colorbox\colorbox.css

Change:

Code: Select all

cboxLoadedContent{margin-bottom:5px;}
To:

Code: Select all

#cboxLoadedContent{margin-bottom:15px;}
And change:

Code: Select all

#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
To:

Code: Select all

#cboxTitle{position:absolute; bottom:0; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
I'm not a programmer and new to OpenCart. I've got a lot of help from reading this wonderful forum (THANK YOU!), thought to post the details of this simple solutions here to share. Cheers!
I had the same issue, and this worked great, thanks. This forum really needs a 'thanks' button :)

New member

Posts

Joined
Tue Feb 16, 2010 5:12 pm

Post by stokeyblokey » Thu Nov 21, 2013 8:17 am

If all your product titles are under 45 characters you can alternatively amend the CSS so the text is right-aligned not centered, then pad it back to uncover the "X" to close the window - very quick to identify CSS to change using Firebug in Firefox ;)

Great solution btw!

Stokey


User avatar
Active Member

Posts

Joined
Sat Aug 31, 2013 10:19 pm
Who is online

Users browsing this forum: No registered users and 62 guests