I was searching for "Jaguar Rims" in google image results. I clicked on a plain photo that had no site logos or insignia on it. But after-the-click a promo of "39 photos" and the site address was populated onto the image.
How did they do this? I would like to re-create this effect
Was it an animated JPEG? Or rendered with Javascript? Keep in mind, I find this interesting only because it is happening within Google Image Search results.
This is the google image search I performed (it's 3rd image from the left but this could change).
Here is the image:
http://preview.netcarshow.com/Jaguar-XKR-2010-1600-21.jpg
It's not animating. The two images were likely cached at different times by google and the image publisher changed the image in-between those times.
I beleive the only way is with php. You can check the referer header and display a different image accordingly. This is how you check the header in php:
$_SERVER['HTTP_REFERER']
First you see icon data:image/jpeg;....... size: 259x194
After you click on it, you get similar image but scaled up:
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1p2CI2vcgxkxMr8j8L0HfdmEBv_ggGM8RAri4-FWP9B0ENj9vDw
After part of second, you get full image, but becouse its big and it need time to load and resize, there is short time then you see #2 image.
http://preview.netcarshow.com/Jaguar-XKR-2010-1600-21.jpg
.#2 and #1 is same image, but without #2 part, seeing big image should take longer i guess after you click on icon.
So basically it is animation from 3 frames. icon -> bigger icon -> big image.
p.s. Google made icon from this one, that can be found in same site:
http://img2.netcarshow.com/Jaguar-XKR_2010_1024x768_wallpaper_21.jpg
Related
I am making a Project in which when someone opens it so the images should give them a blurr preview and after its fully loaded then show the iamge to user. For example - On Instagram, when we open the app it shows us the blurred image and after its loaded fully it shows us the clear image.
How to Implement that same feature using javascript or jquery?
You need to have a really low quality version of the image in your database (or if you embed it directly -> in your assets). Then you can load the smaller image and blur it using CSS blur().
When the fully sized image is loaded, you can hide the small image. To get some ideas on how to check for that, I found this stackoverflow thread: How to create a JavaScript callback for knowing when an image is loaded?
How does the above answer have a Green Tick but the link that is shared so not have. This does not look right to me and I am confused.
I am working with image map i am taken two buttons in my image. in button click one popup(div)displaying .in that div i am taken image one map with areas . i am trying to click (close button and on and off button)) but not responding .after maximize the browser window it is working . could any one solve this problem.and i want make all images responsive i used JQuery Image Map it is working but . when i given div position is absolute.
it is not working. can any one provide solution for this problem
(press tab key for identify image map area's)
Although your question is hard to understand, i will try my best for 50 reps (I am young and needed the money ;)
You are using a JQuery Library from here:
https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js
The readme of it prints in large letters:
"Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize"
So, your close handler doesnt trigger, because the area coords were only calculated by that "rwd" once you resize your browser window, and the readme tells us, that it is designed to do so.
Btw to make your code work:
add $('img[usemap]').rwdImageMaps(); below line 20 in your javascript code.
This is basically a design question.
Preface
I have a web page which shows a list of thumbnails. The number of images can be anything, maybe hundreds.
What I need to do is this?
Get the number of total thumbnails.
Get the web url for each image.
Load each thumbnail into a box (div) and add each box dynamically to
scrollable container div.
User should be able to interact with the boxes ASAP.
I have other AJAX calls happening in the page.
The default method, set the src to each box and add it to the container. When loading stops, the image shows. The problem is that, all these image loading will hog the network and my other AJAX calls may timeout, which I can't allow. Also, the user should see the page as loading complete (loading bar should not show activity).
My Solution
The solution I have come up is this:
Use a local image as space holder.
Set the src of all the boxes as local image.
Change the src for first image to the web url.
When onload of the image fires, change the src of next image and so on.
Pros:
Only one image will be loading at a time.
User will be able to interact with the boxes.
Cons:
Only one image at a time may be a waste of bandwidth (what about 5 images at a time?)
What happens if user scrolls to the end, the images won't show up until all the other images have loaded.
Your opinion
I need expert opinions on how to improve this solution.
Requirements:
Some bandwidth should be available for other AJAX calls
User should be able to interact with the page.
Questions:
Is this solution having any other issues?
Is this cross browser?
Am I correct in saying this will not affect the other AJAX calls?
I am playing with a new website I created a few days ago.
The site contains lots and lots of gifs there is displayed on the frontpage. As of right now, a static .png thumbnail is showed and when hovered, it displays the gif instead.
This is pretty much what I want. However, as of now, the site preloads every single gif on the page, which takes a long time and a lot traffic is wasted. If there are 50 gifs on the frontpage and every gif is 2mb, that's 100mb traffic per user.
Isn't it possible to only load every png, then load the gif if it's hovered? I know it won't play smooth the first time, but I don't have a whole lot of web traffic on my web hotel.
Is this possible with either some PHP or good-old JavaScript?
Thanks
Change the URL of the image with hover. In this case with jQuery
$('#my_image').hover(function(){
$('#my_image').attr('src','my.gif');
});
Want to make it dynamic without having to set it per image? Add the HTML5 Data element:
<img src="my.png" data-gif="my.gif" />
And with JavaScript:
$('img').hover(function(){
$(this).attr('src',$(this).data('gif'));
});
You can add the HTML that contains the GIFs to the DOM after page load, inserting it as a string or using AJAX.
Another viable solution is to use CSS sprites and eliminate all those images by combining them into a larger one.
You're thinking about it the wrong way. Browsers don't request images unless you include the images in your page. You shouldn't try to prevent included images from being loaded, you should simply not include the images in the first place.
Remove the image URL from your code. In whatever code you have that currently makes the hidden image visible, you can set the URL as well.
Are the file names the same except for the extension? If so I would recommend this approach
Stop a gif animation onload, on mouseover start the activation
What you would do different is replace the .png with .gif this will load the gif on hover instead of at page load. Right now it sounds like you are loading both the .png and the .gif in a hidden div.
Edit:
Then on mouseout you would switch the source back to the .png.
When you look at the results on the google search page, you can see the google plus one button animation when you hover over the link or link description for every result.
I was searching internet but was not able to find any tutorial how to achieve this effect on a image or element in general.
Any suggestion or link to tutorial using jquery?
Thanks in advance.
It is one image containing multiple frames. I assume The image is used as background via CSS and the background position is changed rapidly (through JavaScript) to create the animation effect.
The image is: