I create a photo gallery like picasa or facebook have and already have done a server part. Now faced with an issue about displaying it. In other words, there's a page contains some small pictures (in fact, thumbnails). I'd like a "windows" contains a big picture to appear by clicking a picture instead of redirecting to other page.
For example. like here
So please recommend me something or give me an example of how to make it.
There are a lot of image galleries online. Here is example of one. Click on each of the rounded buttons (1-5) to see demos.
Related
I have a webapp with a bunch of photos. If you go to the base url of the app (say /photos) you see a list of all photos, if you go the url with a specific photo id in the query (/photos?id=34343) the app will show a view of that specific photo.
For each photo it is possible to tweet from within the webapp with the specific url for that photo in the tweet. So whoever reads the tweet can click the link and get to that photo. This works just fine.
But now I would like to add the photo itself to the tweet, and this I do not know how to do. I have read up on Twitter Cards which seems the way to do it (as a Summary Card with Large Image in my case) but afaiu the way cards work is to specify one card for each web page, e.g.
<meta name="twitter:card" content="summary"/> etc...
Since I do not have one web page per photo but only a single index page for the entire web app is it still possible to use Twitter Cards for the use case I describe? Or some other Twitter API achieving what I want?
Or am I stuck with text-only tweets here??
Thanks!
I am trying to make a jQuery code to save a screenshot in my web page. I found a lot of plugins that take screenshot of pages.
But this is what I want:
1- The user takes a Print Screen of a issue in the desktop(not in the browser)
2- The user clicks on a Button 'save' in my web page
3- jQuery gets that image and saves into a folder
All the ways I found was to take a WebPage Screenshot.
Is there a way to get the Image that the user toke?
I don't know it may help you,http://codepen.io/reynard2007/pen/xfwoK , i remember long a go i see one codepen is doing the function you want,that is pasting the image in to a canvas
When you post a link on Facebook, it grabs an image from that page as a preview.
I'd like to be able to do the same! We're creating a link sharing website with Meteor, and want the user to be able to paste a link, and the image be rendered in the list.
Any ideas? Doesn't need to be Meteor specific at this stage!
To add an image when someone clicks on share/like etc, you can set the image for that page with
<meta property="og:image" content="http://yourdomain.com/link/to/image" />
When somebody shares it, it will use that image. You can also set titles and more:
https://developers.facebook.com/docs/opengraph/using-objects#selfhosted-creating
As indicated by Sarath in his comment you have to scrape the webpage and look for the information you need (title, META desc, an image) by using a regex for example.
I would suggest to look for META OG tags already used by many websites or, if not available, Schema.org micro data.
I think that some tools like PhantomJS could be helpful as it allows you to get the content of a webpage and even generate screen capture of this page.
Background: I have a site using a prettyPhoto lightbox to display photos. I've enabled social tools to display the 'tweet' and Facebook 'like' buttons on the lightbox, in hope to enable the ability to 'like' only the current photo being displayed to the one viewing it.
Problem: The Facebook 'like' button actually results in all photos in the same gallery being liked: all photos display the same number of likes in the lightbox; and on Facebook, the user's 'like' in their news feed or recent activity links to the gallery page rather than the actual photo that was liked.
What I've tried: I have tried editing the jquery.prettyPhoto.js file to add in the placeholder found in this answer: https://stackoverflow.com/a/11796964/2205165
I have also tried replacing 'location_href' with '{path}' to see if that used the photo's full path/URL, but it did not, or didn't appear to do so.
I've tried the above with 'deeplinking' enabled and disabled, with no avail.
Help: If anyone has a solution to enable Facebook liking and Twitter tweeting of individual photos from the prettyPhoto lightbox, I'm all ears. Even if it's to the degree of photos displaying the correct number of likes, rather than all having the same number: I'm not too fussed at this stage about linking back to the individual photo: linking back to the main gallery page will suffice for that.
Thank you!
In case anyone ever comes up on this again, This solution worked for me and it shares the image directly.
This is for images only, but there's no reason it wont work for the rest of the cases in PrettyPhoto.
In your PrettyPhoto parameters in prettyPhoto.js, switch out the facebook iframe to look like this with whatever params you want, all that matters here is that "{path}" is in the href spot of the iframe src:
<iframe id="fbiframe" src="//www.facebook.com/plugins/like.php?href={path}&width&layout=button&action=like&show_faces=false&share=true&height=21&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:26px;" allowTransparency="true"></iframe>'
Then around line 274 in the prettyPhoto.js file you should see this line:
$pp_pic_holder.find('#pp_full_res')[0].innerHTML = settings.image_markup.replace(/{path}/g, pp_images[set_position]);
Add another line just like it and replace the href for the src like below, again with whatever params you want, the point is that the href is replaces with the image location variable:
$('#fbiframe').attr('src', "//www.facebook.com/plugins/like.php?href="+pp_images[set_position]+"&width&layout=button&action=like&show_faces=false&share=true&height=26");
When I generate a feed post using the FB.ui function I find that frequently the image I attach to the post displays as a vertical gray bar. On the other hand, if I generate my feed posts using the direct https://www.facebook.com/dialog/feed url the image works 100% of the time. If I provide the Facebook Debugger it detects it as a Photo and displays the image at the bottom. When I click the 'See exactly what our scraper sees for your URL' it says that the 'Document returned no data'. I assume this is because my image is not an open graph object? I'm very much at a loss here.
maybe try to add a random parameter after the image src like http://www.yourdomain.tld/yourimage.ext?randomnumber if Facebook tried to load that image when it didn't exists it will cache a 404 error. With a random parameter, it forces Facebook to refresh your picture.
You shouldn't provide a direct link to the image.
Utilize OpenGraph tags, e.g. share link yourwebsite.com?image=12. Use backend script to generate OG headers, namely: og:image, og:description (see http://developers.facebook.com/docs/opengraph/ for more information). This way every time someone shares the content you know what image is being displayed.
The issue was our server, it was becoming inaccessible from the outside intermittently. This was causing Facebook to cache the broken links.