How can I add allowfullscreen to featherlight.js for a video?
The example on the http://noelboss.github.io/featherlight/ website for the iFrame video has allowfullscreen on it, I just can't figure out how to add it to my own video url.
The format for adding the video URL I'm using is:
link
I can't figure out where to put the allowfullscreen since adding it to the URL doesn't work, I also tried this:
link
But it didn't work.
Thanks!
Charles
Either do like the example (have an hidden <iframe> already present on the page), or else use the afterContent callback to add the attribute.
Related
I would like to display a facebook-like button within the Fancybox popup.
The interaction I'm imagining is similar to how Pinterest displays the social sharing buttons to the right of a modal popup (e.g. http://pinterest.com/pin/73465037641354472/). Each image has a unique url so that you can link to the content of the popup directly.
How can I:
Ensure that each image within my Fancybox gallery is attached to a unique URL
Display a Like button in the popup linked to that unique URL
For #1, I found the following code discussed in the following page: this.id inside of fancybox
$("a.fancybox").each(function() {
var element = this;
$(this).fancybox({
'titleFormat' : function() {
var astring = '<span>' + element.id + '</span>';
return astring;
}
});
});
Is this the code that I need? If so, what do I do in the HTML in order for this JavaScript to work properly?
Thanks so much for any help!
You will need to have a mechanism that based upon a unique URL to serve off the correct http://ogp.me og: meta tags to be parsed by Facebook's linter.
Remember the linter does not run javascript, so they will need to be correctly defined in the response stream.
EDIT
Example of each image having it's own URL. These will aid in Facebook being able to get the correct html and og: tags.
http://example.com/images.php?id=1
http://example.com/images.php?id=2
http://example.com/images.php?id=3
Within the HTML response from each of those unique URLs, the correct og: tags are specified. Within that HTML you should have a javascript redirect to the actual page to display the picture. Since javascript wont be run by the linter, the linter should be able to read those og: tags.
See http://ogp.me for how to specify og tags.
On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)
I'm using Gallerific with history plugin. In the while loop where I print all the images I want to add a facebook share button for each image using the specific image-url given by the history-plugin.
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
$images=mysql_query("SELECT filename FROM images etc.");
while ($row = mysql_fetch_array($images)) {
<li><a class='thumb' name='imagename' href='url-to-image' title='description' onclick='clickedThumbnail()'><img src='url-to-thumb' alt='".$row['comment']."'/></a>
<div class='caption'>
<a name=\"fb_share\" type=\"button_count\" share_url=\"http://url-to-image-made-by-the-history-plugin\">Share</a>
</div>
}
My problem is that it is only printing the facebook share button once. In the first while-loop. On the rest of the images it is printing the content of the <a>-tag ('Share') with the right attributes, but it is not clickable. I've tried without 'share' in the <a>-element but then I get nothing on the other images. But I always get the correct FB-button on the first image.
According to developers.facebook.com I only have to include the javascript once even though I'm using several Facebook buttons on one page.
I have also tried to put several facebook-buttons outside the while-loop and it works fine.
Also, when I type the direct url to the images given by the history plugin it works fine. So my conclusion is that is has to do with printing the facebook-buttons from a while-loop..?
I used this approach instead http://developers.facebook.com/docs/reference/javascript/FB.ui/
by changing some variables dynamically for each image. Works like a charm!
Thanks for the comments.
That plugin is deprecated. See: http://developers.facebook.com/docs/share/
You will want to use the share functionality that is part of the like button. See: http://developers.facebook.com/docs/reference/plugins/like/
The Facebook "Update Status" is not getting right image of the page. When I paste the http://www.cjp.org/page.aspx?id=245692 link on my "Update Status" it only shows on thumbnail of "Charity Navigator" and completely ignores the main image. On other urls like http://www.cjp.org/page.aspx?id=235964, it shows the main image and gives options of other thumbnails.
Both pages as basically done the same way with cms, the only difference I see is the image ratio. Is that the reason why it's not getting the main image. Is there a way to show the main image without chaining the aspect ratio?
Thanks,
Rex
You don't have any open graph data so facebook is just guessing what images, description, title etc you want to show. You need to add open graph meta data to your head, and check it with the url linter to make sure it is reading the things you want it to show, correctly.
https://developers.facebook.com/docs/opengraph/
https://developers.facebook.com/tools/debug/
Use a tag like this:
<link rel="image_src"
type="image/jpeg"
href="http://www.example.com/image.jpg" />
Note, this doesn't work for everyone. It did work, but many are saying it doesn't anymore. Trying doesn't hurt.
I have a Plone 4 site using collective.xdv for the theme. Overlays for the login and contact form work fine.
But if I go to edit > categorization tab and try to add a related item, the overlay is blank. Looking at it in Firebug, the tags are correct down to div.overlaycontent. But inside of that div is my static HTML from the XDV theme's index.html.
Is there a special rule that I need for the overlays?
I cannot use plone.app.theming because this site is using more than just Plone.
In the xdv configuration(or append "##xdv-settings" onto site url), you can add unstyled paths.
I think what you'll need is:
^.*/referencebrowser_popup(\?.*)?$
or
^.*refbrowser_popup(\?.*)?$
If neither of those work, figure out the url that's being requested and add it as an unstyled path.