Problem with fancybox popups.

Dear Experts,

I'm having problems with fancybox popup.
I have this application in : Symbiont Technologies, S.A. de C.V
The popup is showing my image in pc, but when I open my app in my mobile and open the popup when I close the popup the image disappear.

Hope you could help me with this issue.

I'll give you the steps to follow to get to the popup:
1. Click on the Sign In button.
SignIn.jpg2. Click on the 3 little men picture.
Menu.jpg3. Slide the marck ercko element from right to left until the word "styles" appear then release.
SelectCustomer.jpg4. Go to the bottom of the page and select from the grid a Style.
SelectStyle.jpg5. Go up and click the style image.
StyleImage.jpg
Thanks in Advance.

Best Regards,
Rodrigo Rivera
Conrado ZAVALAAsked:
Who is Participating?
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.

GaryCommented:
What plugin are you using for the zoom because it is expecting an anchor tag where you are using an image so this code is failing


var image = document.getElementById("imgStylesStyleImg");
var imagesrc = image.href;

$("#imgStylesStyleImg").attr("href", imagesrc);

Open in new window

0
Conrado ZAVALAAuthor Commented:
Hi Gary,

I'm using fancybox.
In the API docs of fancybox they use a small picture and a big one to make the popup, they go to the big picture with the href, that's why I'm giving the attribute href with the imagesrc, imagesrc contains the data:image/jpeg;base64 + the binary.
The thing is that on pc works perfect, but in mobile devices the image container disappear, I don't know why.

Could you please help me with this issue, I'm a little bit noob in this.

Thanks in Advance.
0
GaryCommented:
I'm looking at all their examples and they all use a wrapper for the image
Where did you see this example where they only use an image?
I assumed this was about clicking the image to get the zoomed up version, closing the light box and now the original image has been removed

p.s. it doesn't work in FF or IE either so it's not a mobile problem.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Conrado ZAVALAAuthor Commented:
In the examples they use 2 images, the small one is the one that we see, and when the user clicks the image(the one that we see), the fancybox is opened with the big image(the one that we don't see, that is in the href).
However I don't have 2 images, and I need to make a popup to that image.
I really don't know what I'm doing wrong.

What I need is: When the user click the image, open a popup with the image inside it, but without erasing the original image.
What do you recommend me to do Gary?

I really appreciate your help, thank you very much.
0
GaryCommented:
Yes they use 2 images but the image is wrapped in an anchor tag which stores the url for the full size image.
So you need to wrap the small in image in <a href=""></a>
Remove the ID from the image and put it in the above anchor tag and set the href to the image.
So you end with something like this


<div id="frmImageStylesContainer" class="td-frame" style="padding:0px 0px 0px 0px;">
<a href="img_src" id="imgStylesStyleImg">
<img src="img_src">
</a>
</div>


Wouldn't say your are gaining anything using base64,
0

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
Conrado ZAVALAAuthor Commented:
Thanks for your help Gary.
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.