I need a way to automatically generate a thumbnail of the target page when the user hover over a URL (hyperlink) on my page.
I've found several examples of people using pre-created .gifs (or other images) to show a thumbnail of the target site while hovering over the link (see example #1), but I need a way to do this dynamically. Is there a way to generate a thumbnail of a page, either on runtime, or an easy way to update the current thumbnail after editing a page?
Simply put; I need to show a thumbnail of the target page when hovering a hyperlink on my page. This thumbnail should not be based on an image that I have to generate myself after each edit, but rather a snapshot of the current page. Much like google does when searching for websites.
Thanks a lot in advance!
Example #1:
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/
Hover your mouse over "Zoka Coffee"..
Try to study about this library html2canvas
Related
I have a page with a list of items and each has an Addthis share button, I wanted the 1st Facebook thumbnail in teh sharer to be that of the item selected, so I tried many solutions which didn't work, and finally I tried to dynamically write and read from SQL the URL to the thumbnail for og:image and rel="image_src" each time a user clicks the share button to the particular item, this way the Facebook scraper has the details to the selected item at parse-time, but yet it doesn't seem to work, the thumbnail is not even shown among the thumbnail options.
Is there a reliable way to set the main thumbnail when such a page has more than 1 share button?
ShareThis offers the option to select the thumbnail image using the st_image tag, here you can find more info. So basically I had to switch from Addthis to ShareThis.
When the thumbnail is clicked I would like the full size image to open on http//example.com/image.aspx instead of http//example.com/images/image.jpeg without creating an individual page for each image and editing each href. I know that this is possible with php but I was wondering if there was some way of doing it with javascript, jquery, asp.net, or...? If it is possible, (I maybe stretching it here), would it also be possible to run this on the master page for all thumbs? The thumbs have no class or id. Right now they are in straight html markup. I have searched for days and have found nothing that would even get me started on the correct path with the exception of php. I don't need the target blank if I could implement this because this would allow me to open the image on a aspx content page with full site navigation. Here is the code as of right now.
<a target="_blank" href="image.jpg/jpeg"><img alt="something" src="pictures/image_small.jpg/jpeg"></a>
A page from our site is http://backalleypics.com/PeoplesPages/Sa~Se/SarahShahiPages/SarahShahi1.aspx. An example of the php type is http://www.theplace2.ru/photos/gallery.php?id=47 I really don't want a gallery, pop up window, or light box. The purpose is to get ad views for each image click and have navigation on the page.
You can use an existing library that do that, like the: http://highslide.com/
There are also many others, some of them:
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
http://valums.com/javascript-image-galleries/
does anyone have an idea on how I could capture the image id when a user clicks the next / previous button in Fancybox? I like how Fancybox changes depending on the size of the image so I prefer to use this over some of the other galleries that I have seen. Has anyone successfully done this? The site is in PHP.
The general idea would be to "proxy" your images by a PHP script.
This script would:
add 1 to the view count of the image
serves the image to the browser (instead of serving an HTML page as usual)
You would then update the src attribute of your pictures img tag :
<img src="mypicture.png"/>
would become
<img src="view_picture.php?picture=1"/>
Note that you must be careful and not authorize a filename in the picture parameter and/or carrefully check that the user is not trying to see a file that you don't want to show him (think view_picture.php?picture=../.htpasswd )
Consider using a general website analytics software, like Piwik. This will give you additional insights on you visitors and their actions on your site, rather than a simple image view counter.
I am running a site that uses Fancybox and Piwik, all image views through Fancybox will automatically show up in the Downloads section of Piwik reports without any additional configuration.
But you could easily customize this through Fancybox's onComplete callback and Piwik's trackPageView(). See Piwik Javascript API and Fancybox API for details.
I have created a gallery in a WordPress post using WordPress's native media gallery and it shows me the images as gallery thumbnails in rows and columns which is exactly what I want.
But when I click on any of the thumbnail it opens the direct image link. I want that the image should be shown in my blogs environment. I would actually want it to show on the same page itself. but if not that I don't want it to open as a direct image. Is there a template file or something I could make for opening those images. I think image.php, but I have no idea how to go about it.
Help..?
Thanks
When you're inserting a gallery into your post, you can select how to link to the images. See screenshot: http://cl.ly/2yYA
Just select 'attachment page' and you'll get an individual page with commenting for that photo. Is that what you were looking for? You can edit the template of that page using attachment.php.
I'm using WordPress as my CMS and I just downloaded a Lightbox plugin for a photo gallery on one of my pages. It works exactly how I want it to, except for one thing.
After clicking on a thumbnail to get the photo enlarged with a lightbox effect, I want to be able to click on a link to take me to the main article where that picture is from.
I've tried a few ways but the issue which arises is that I can't pass < ?php the_permalink(); ?> through a JavaScript function. How would I go about to accomplish this?
Thanks to anyone who can help!
The only way to do it is have the image link go to some inline content, which contains the image wrapped in the this is the only way. The lightbox website will have examples of linking inline content, but for every image you will need to generate the inline content, this is the limitations of using a plugin.
If I were in your shoes, I would write a custom modal function, which would take the permalink from an attribute of the image (rel, title, class) and display the larger image linked to the permalink. I am sure you can find a custom modal tutorial, but basically you create a box in your css, which is set to display:none, then when your link(s) is/are clicked, you use jQuery to append one of the boxes to body, append your content into the box, then display it in the center of the screen, using absolute positioning, and opaque to dull everything else.