Grow your CSS skills. Land your dream job.

Fancybox PDF through dynamic href

  • # May 7, 2013 at 4:26 pm

    Hi guys, im having a problem trying to open some PDF from php code:

    echo “

  • Issue# “.$filename.”
  • “;

    I dont know how to send my dynamic href to the fancybox? So I can open it with fresh data everytime i make a click on the link above. Here the fancybox:

    $(document).ready(function() {
    $(“.pdf”).click(function() {
    $.fancybox({
    type : ‘iframe’,
    width: 800,
    height: 1000,
    fitToView : true,
    autoSize : false,
    href : this.ref,
    content : ‘‘,
    beforeClose : function() {
    $(“.fancybox-inner”).unwrap();
    }
    });
    return false;
    }); // pdf
    }); // ready

    Does anybody has an idea? thanks

# May 7, 2013 at 9:53 pm

Embedded a pdf might not be the best solution. Personally, I would recommend using Google Docs PDF reader… it does a really nice job of automatically resizing to fit the viewport:

Try using this within the `content`:

# May 8, 2013 at 2:40 pm

I wasn’t trying to embed a PDF, I got that part wrong, so finally I fixed this code, now i’m able to display my dynamic PDF inside the fancybox. Here’s the code:

$(document).ready(function () {
$(“.pdf”).fancybox({
type: ‘iframe’,
width: 800,
height: 1000,
fitToView: false,
autoSize: false,
iframe : {
preload: false
}
});
}); // ready

And my PHP code was corrected as well:

echo “

  • Issue# “.$filename.”
  • “;

    I found a little issue trying to open this on IE & Chrome, so this line of code saved my life:
    iframe : {
    preload: false
    }
    I leave it here so anybody can use it, cheers!

    Viewing 3 posts - 1 through 3 (of 3 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".