I have a need for getting preview a url over mouse hover, my application is built on php , js and jquery. Although I have an idea of to get to my requirements but am a little confused with the right approach, i checked all the posted question on here but most of them refer to some third party tools or installables. Frnakly i do not want to use them and think i should try one on my own. Please can you guide me through on the best possible step as per you?
Thanks!
11-Jun-2012
Finally I managed to use Curl and get a preview of the site on a Div placed next to the Link on my site, well now the problem is of fitting the content in the Div ..is there a way that I can adjust the css of the extracted html page in such a way that all the content fits in the fixed height and width of the Div.scaledown option or something? that would scale everything down to the required proportion?
You can do this, in plain ol' CSS and HTML:
.mouseover {
position:absolute;
width:200px;
height:200px;
top:5px;
left:5px;
display:none;
}
.link {
position:relative;
}
.link:hover .mouseover {
display:block;
}
Then, in HTML:
<a href="#" class="link">Link
<div style="background:url('<URL HERE>')" class="mouseover"></div>
</a>
Ok, so you want to get a thumbnail of a webpage and show it on mouse over. To do that, you'll need to either use tools that generate thumbnails or write a PHP script yourself. Here are some tools:
websnapr
Website Thumbnail Generator - This one you can install on your own server
If you want to write your own, check out imagegrabwindow. Note that it requires a Windows server. I don't know if PHP has any other methods to do this. If you're not on a Windows server, you could write a bash script to open a browser and use a screenshot utility to take a screenshot and save it to a file for your website to pick up.
You'll also have to make sure to have some sort of cache so you're not doing this every time every user moves their mouse over a link.
You can use urlbox.io for this, here's an example preview thumbnail of this very URL:
https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400
You can see that the options passed into the Urlbox API are simply url, and thumb_width to set the desired width of the thumbnail in pixels, in this case I chose 400 pixels wide.
Now all you got to do is embed it in an <img> tag like so:
<img src="https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400"/>
You can use API to do this. For example ApiFlash has a free plan that you can use up to 100 screenshots per month.
Here is how it would look like with PHP:
<?php
$params = http_build_query(array(
"access_key" => "YOUR_ACCESS_KEY"
"url" => "https://example.com",
));
$image_data = file_get_contents("https://api.apiflash.com/v1/urltoimage?" . $params);
file_put_contents("screenshot_api_example.jpeg", $image_data);
?>
The API has a very good uptime because it's based on AWS Lambda.
Related
Hi so I added a video into the front-page.php code using the following code:
<div style="text-align: center" id="video">
<iframe width="867" height="488" src="https://www.youtube.com/embed/6c7Fx2PR9Dk" ></iframe></div>
(sorry for some reason the code editor is not working)
however when I try to change the width and height in the mobile mode using #video, it does not change. any help is appreciated!
EDIT: I added a class=container and changed the width to 100% and height to auto. This worked a little better but now the height of the container needs to be bigger. I cannot seem to find where to add the code to edit it.
I cannot see your code but I am sure it would be way easier to achieve this using CSS and media queries. Assuming your video player is configured to take 100% of the width of the container it sits in.
Actually you have to use the following cass to make it full width
#video iframe {
width:100%!important
}
Fitfids.js is really nice plugin to make the iframe, video embeds responsive. You may try to use that for your ultimate video responsive solution.
I am working on a web app and am pretty new to web development.
Currently my program gets an and asks for user input relating to the photo.
For my project to be done I need to be able to do one of two things:
Select a random square in the photo and display only that portion. I want this portion of the image to change everytime the page is reloaded to show a different portion.
Detect a facial feature, like an eye or a mouth and show only that portion of the image.
Any free libraries or easy ways to implement either of these features?
Thank You!
For the first question, it's relatively easy. All you need is to set the image url as the background image of a square element, say, a <div>, and then use JS to randomly generate a x% and y% for the background-position: x% y% property:
$(document).ready(function() {
// Generate random x-y coordinates
var x = parseInt(100*Math.random(0,1)),
y = parseInt(100*Math.random(0,1));
// Set background-image and position
$('#img').css({
'background-image':'url('+$('#img').data('img-src')+')',
'background-position':x+'% '+y+'%'
});
});
For the HTML part, we take advantage of the HTML data- attribute:
<div id="img" data-img-src="/path/to/image"></div>
The CSS is also pretty straight forward:
#img {
width: 400px;
height: 400px;
}
You can see the fiddle here - http://jsfiddle.net/teddyrised/gabxj/
The second question - what have you tried? I did a quick search on Google and SO - Any library for face recognition in JavaScript?
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.
I know there has to be a better way to do this.
Currently I have a php script which will generate a random image from a certain directory when called.
I have div's calling the background.php file in the stylesheet under the div's background setting
background:url(randomimagescript.php);
There are a lot of little div's on this page right now, all calling separate random image php scripts... is there a way I could use a variable when calling the file, so I can just use one script? I still need to have good styling control over the image, so i'm not sure if there is a better option than calling the script as a background image for a div.
If anyone has any ideas, let me know!
try this (it might not be optimal):
background:url("randomimagescript.php?folder=myfolder");
and in randomimagescript.php:
<?php
$folder = #_$REQUEST['folder'];
$url = "galleries/$folder/thumbs/image.jpg"; // ie, compose image
http_redirect($url); // go and find the image.
?>
It sounds a little crazy, but you could actually make your stylesheet be generated by PHP, and just fill in the blank, so to speak.
background:url(<? echo pickRandomImage(); ?>)
set the background for all divs once on the page using jquery
var image = <?echo randomimagescript.php?>
$("div").css('background', 'url('+ image+ ')');
I have google custom search, by default the search box has got background image, I can remove that image, But not able to replace with my image. so Is there a way to do this.
Adding this to my CSS worked for me:
.cse input.gsc-input, input.gsc-input {background-image:none !important;}
Yes! You can do this!
Please find particular id or css for that and then use CSS according to that id or CSS and make sure you add !important at end it will works for you.
To remove the Google Custom search watermark you need to run a java-query infinite looped code it can't be done by adding a one time running code since every time you will click the search input field he code will rerun from the server side and the watermark will reappear.
the exact code you need to do is listed below but to achieve the desired result you must import Jquery liberary file from link jquery.com download/ and link it to your page
to link it to your page do so.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
the actual code to hide watermark is.
<script>
$(document).ready(function() {
setInterval( function()
{
$("#gsc-i-id1").css("background-image","none")
},1/*Time*/);
});
</script>
because the ID of the search box is " gsc-i-id1 " so the code will work even if you click and unclick the field.
Please adjust the time of the function to your preference for better performance better keep it less than 100 mile seconds
check the live performance of code by clicking the link below.
http://jsfiddle.net/atulc007/tHQAD/1/
You have to customize GCSE which is given in your code. To explain in detail, you have to select this url in your code - "http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en". Then paste and search this url in your browser. You will get the sorce code of that java script. In that find an image .gif link and replace with your image and save it as .js file and replace the link and upload. Hope you will enjoy :)