I have three pages in my portfolio website built on the Masonry plugin (http://www.
4pixels.co.uk/). On the first page fancybox works perfectly for a few of the images.
But when I use infiniteScroll to load page 2 at the bottom of the first page, the fancy box links stop working and just load the thick box image into a new page.
If I load page 2 (http://www.4pixels.co.uk/index2.html) directly into the browser it worked fine (with all the css/js). I've since stripped out the js and css from this page as it loads them from page 1, but it makes no difference and fancy box still doesn't work (The image to try it with is the Responsive screens for Winston Ellis website)
All the best
Andy
I have tried
$(document).ready(function() {
$("#tumblelog").on("focusin", function(){
$("a.example2").fancybox({
'overlayShow' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
});
but still not working. I see your example is working so I'll have to pull it apart as I can't see were I'm going wrong..
Fancybox v1.3.4 cannot be bound to dynamically added elements (like those added by infiniteScroll).
If you want to have fancybox bound to those new elements, you have two options:
1: upgrade to fancybox v2.x ... or
2: keep using fancybox v1.3.4 but change your script and use jQuery on(). follow this link to learn how to
Related
Ok here's a messy one.
I've got an iframe on a page, and in that iframe I've loaded up a Fancybox iframe with a link in it that has target="_parent". My only problem is it's loading the link in a new window for some bizzare reason, not out of the fancybox and into the iframe.
My link is Continue Checkout
You can view an example of the code at https://www.dpdesignz.net/homefresh/dps/success.html. My biggest thing though is that even though this page is on my https://www.dpdesignz.net domain, the link in the button cannot be changed from the http://www.dpdesignz.co.nz to https://www.dpdesignz.net
Can anyone see what may be going wrong here?
Your link has the class="button" but there isn't in any part of your code anything that binds that selector to fancybox
something like:
$(".button").fancybox({
width : 650,
height: 400,
type : "iframe"
});
otherwise it will always open in anew window
Ey people
i recently designed a popup html file that's being called through fancybox inside my magento-template.
It works fine for all the pages except the homepage where it appears dislocated at the end of the page instead of appearing in the center of the window.
Firebug isnt having any errors for me and i,being a newbie, dont know where to look.
Some pointings,anyone?
Thanks
You are loading 3 instances of Fancybox :
http://www.tapet-online.ro/skin/frontend/default/acumen/js/jquery.fancybox-1.2.5.pack.js
http://www.tapet-online.ro/skin/frontend/default/acumen/fancybox/jquery.fancybox-1.3.4.pack.js
http://www.tapet-online.ro/skin/frontend/default/acumen/fancybox/jquery.fancybox-1.3.4.js
you only need a single one, may be this:
http://www.tapet-online.ro/skin/frontend/default/acumen/fancybox/jquery.fancybox-1.3.4.pack.js
I'm building an offline tablet/phone app in HTML5 to collect data remotely in the field where there are no cell towers. It uses the offline application cache manifest to save the pages into the browser. I'm attempting to get it to work in Safari and Android.
Currently there are a multiple separate web pages for my site (index.html, load.html and sync.html). I want to be able to load each page in and run different javascript when each page has loaded.
Originally I had a main index page (which acted as the bootstrap for the application) and was using jQuery's .load() function to load the different page files (only snippets of html) into the main display div when a menu button was clicked. This worked pretty well with the iPhone. However when trying it on Android and the site was already cached and the device was in flight mode so it can't connect to the server, the page would fail silently to load in the HTML from the external page for some reason so I'd get a blank screen. I narrowed it down to jQuery's .load() function failing in Android when loading pages from the cache.
So then I tried keeping the individual pages separate and having all the HTML, JavaScript, CSS includes and header code mirrored on each page (not very efficient). So each page could run standalone by itself. This worked ok in Android and iPhone in the web browser when following a simple href link to load the other pages. However when I go into app mode on the iPhone (i.e. you save the webpage to the home screen so it appears as an actual app icon then you run it from there it appears almost fullscreen apart from the status bar) then click on a menu icon to load sync.html for example it opens the page in Safari instead of staying within the fullscreen 'app' mode.
Is there a way to open separate web pages that should be cached within the fullscreen 'app' mode on iPhone? I don't want the other pages loading up Safari as there's less screen size.
The only other method I can think of is having all the html snippets hidden in divs on the main index page, then showing and hiding the divs depending on which menu button is clicked. This may look cleaner and be faster but just wondering if there's a better way to do it?
For now the cleanest solution I could come up with was this:
HTML:
<section id="pageContent">
<div id="homePage" class="hidden">
<?php include_once 'home.html'; ?>
</div>
<div id="loadPage" class="hidden">
<?php include_once 'load.html'; ?>
</div>
<div id="syncPage" class="hidden">
<?php include_once 'sync.html'; ?>
</div>
</section>
CSS:
.hidden {
display: none;
}
This lets you keep your content pages in separate files. And because the html in those files is all included into the index page on page load all the html gets cached as well. Simply a matter of hiding and showing the various pages now.
Then I used some simple jQuery to show and hide each page and set up some simple JavaScript functions to show each individual page. E.g.
function showSyncPage()
{
$('#pageContent').children().hide(); // Hide all the other divs (other pages)
$('#syncPage').show(); // Show the sync page
}
Then also add those function calls into onclick handlers on your buttons/links to open each page. E.g.
<a class="button" onclick="showSyncPage()">Sync</a>
Now you've got a working navigation system that loads all the pages in iPhone/Android and even in iPhone 'app' mode without loading Safari.
I'm using fancybox with ajax request to open multilpe fancybox instances on same page:
This is html code:
User
and this is Javascript i've used:
<script type="text/javascript">
$(document).ready(function()
{
$(".comment_button_fancy").click(function(){
var element = $(this);
var Ide = element.attr("id");
$("#"+Ide).fancybox();
return false;});});
</script>
Everything could be ok, just 1 problem... first time i load the page, i need to click 2 times over "User" to open fancybox...
If i open fancybox and then i close it, the second time i can click just 1 time...
why?
Thanks
The first click registers the event to the DOM, and the second (and subsequent ones) show the Fancybox.
If using multiple Fancyboxes, you should avoid using ID's like you have there and change it to classes. Not sure why you've got all that code to launch the fancybox, when this should work:
$(".comment_button_fancy").fancybox();
This will Fancybox all elements with the class "comment_button_fancy" and should fix your two-clicks issue. You don't need to put a 'click' event handler around the Fancybox code, as it inherently has that event attached to it.
I was looking for solutions, but most of it was outdated or doesn't work correctly.
At the of of my document (main file of FB application - index.php), I have added:
<script>
window.fbAsyncInit = function() {
$('#iframe_canvas').css({'overflow': 'hidden'});
FB.Canvas.setAutoResize();
}
</script>
I was also trying with setSize({width and height}).
As I see previous versions has "remove scrollbars" option within Canvas settings - which is now removed. I was trying to change iframe, iframe > html and iframe > body CSS to overflow: hidden, overflow-x: hidden and many others. Also with JavaScript without effect.
Could anyone point the right path? Previously solutions found on stackoverflow doesn't help either.
I would play with the two options in Advanced settings for your application called: Canvas width and Canvas height. And see if a particular combination of those work. Also the setAutoResize is being deprecated in favor of setAutoGrow(). See https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/