Lightbox Image Pop Up not working in Chrome & IE

Visit this link: http://www.themarblestore.co.uk/Cimstone%20/Matiate/759

When you click on the stone image under the product name "Matiate" a larger pop lightbox image should be displayed.

This works correctly when viewing in Firefox & Safari, but not when viewing in Chrome & IE. Can you please help me to work out why?

The lightbox script is http://archive.evanyou.me/popslides/ - You will notice it is no longer maintained and updated so I assume this is part of the issue.

PLEASE NOTE: I did not build this site and know the code is bad and needs many improvements. However I just need to resolve this issue for now.
petewinterAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ankit PareekOnline MarketingCommented:
The issue occur due to java script code problem many times we faced such kind of issue so
I would suggest you to try 'default' joomla's mechanizm of creating pop-up windows. It is very easy implement. To make it work just add this code into your template following code

JHTML::_('behavior.modal');
and add class 'modal' to the link which should open popup window.
for example
<a href="index.php?option=com_content&view=article&id=31&Itemid=21">Link to a normal page</a>

///change this to///

<a href="index.php?option=com_content&id=31&tmpl=component&task=preview" class="modal">Link to a modal popup</a>

Open in new window

petewinterAuthor Commented:
joomla's mechanizm? Do you think this site is run on the Joomla CMS? As it is not.
RobOwner (Aidellio)Commented:
This is hard to test with the dev tools, however I believe it is because the the width and height of the popup is being set to 0

line 177of popSlides.js

				$(popup).css({
					'display':'none',
					'width':0,
					'height':0,
					'position':'absolute',
					'top':'50%',
					'left':'50%',
					'background-color':'#000',
					'padding':'5px',
					'overflow':'hidden'
				});

Open in new window


remove the two lines:

				$(popup).css({
					'display':'none',
					'position':'absolute',
					'top':'50%',
					'left':'50%',
					'background-color':'#000',
					'padding':'5px',
					'overflow':'hidden'
				});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

petewinterAuthor Commented:
Hi Rob

Thanks for the reply. That has solve the issue thanks, however it has uncovered another issue...

If you click to on the image to pop in the lightbox, then close again. The second time you click on the image it does not work. Any idea why?

Thanks

Pete
RobOwner (Aidellio)Commented:
Oh fix one issue to uncover another! :)

Update the code if you haven't already and I'll take a look
petewinterAuthor Commented:
I have updated the code. This new issue is only related Chrome & IE.
RobOwner (Aidellio)Commented:
Just the reverse, when the popup is closed you'll see it sets the width and height to zero.  just remove those two lines:

line 478:

$(popup).css({
                                    'width':0,
                                    'height':0,
                                    'margin-top':0,
                                    'margin-left':0,
                                    'display':'none'
                              });

remove the two lines relating to width and height
petewinterAuthor Commented:
That's great. Many thanks for your help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.