[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Problem with fancybox popups.

Posted on 2014-08-07
Medium Priority
Last Modified: 2014-08-11
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.
Thanks in Advance.

Best Regards,
Rodrigo Rivera
Question by:Conrado ZAVALA
  • 3
  • 3
LVL 58

Expert Comment

ID: 40247679
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


Author Comment

by:Conrado ZAVALA
ID: 40248976
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.
LVL 58

Expert Comment

ID: 40249184
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.
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

by:Conrado ZAVALA
ID: 40249223
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.
LVL 58

Accepted Solution

Gary earned 2000 total points
ID: 40249263
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">

Wouldn't say your are gaining anything using base64,

Author Closing Comment

by:Conrado ZAVALA
ID: 40253310
Thanks for your help Gary.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question