Problem with fancybox popups.

Posted on 2014-08-07
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
    LVL 58

    Expert Comment

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

    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.

    Author Comment

    by:Conrado ZAVALA
    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

    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
    Thanks for your help Gary.

    Featured Post

    Training Course: Java/J2EE and SOA

    This course will cover both core and advanced Java concepts like Database connectivity, Threads, Exception Handling, Collections, JSP, Servlets, XMLHandling, and more. You'll also learn various Java frameworks like Hibernate and Spring.

    Join & Write a Comment

    Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    728 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now