Develop Reference

showing blurry images in main page in futured posts in blogger

On the main page it's showing blurry image in futured posts.
website link:- iguidu.blogspot.com
I tried different methods but it is not working. can anyone?
related script:-

Original image is only 72px and you're rendering into a large box, You're basically using thumbnails in the place of featured image, this is the reason it's blurry. try using larger images, ideally to the expected rending size, in your case 490 x 305px

In your case, this seens to occur because of the images size. If you open each image in a new tab you will see that teir original size are 72x72 although the display size (the size that us, clients, are seeing) is 490x305.
How to correct this ? The ideal is to get a bigger image, and also an optimized one. The most optimezed format for web is .webp. Check on THIS link what is this.
Another important thing when comes to resize image is to keep the aspect ratio, but I don't think you are experiencing any issue with that, although I will let a LINK talking about it.

Is there a library for a pop out photo viewer like facebook?

I would like to display an infographic on my page via a pop out like the facebook photo viewer, rather than just have a popup window be created with the image in it. I just like the UI of a pop out versus a pop up (no window management).
Is there a jQuery/javascript library that accomplishes the pop out functionality?
I'm trying to emulare visual.ly that loads the infographic in a pop out once you click the preview image.
Thanks

There are a lot of them. Search Google for "jQuery Lightbox" and at least one of them should match your needs.

For jQuery, try fancybox, a lightbox alternative.
There is also this page which compares different alternatives.

Yoxvew is a pretty good one. The downside to it is as far as I know it does not allow for scrolling, so you can't use larger images. There are a ton of these plugins around though. If none of them fit your needs it isn't too hard to make your own, or you can modify an existing library.

The page you link to use Colorbox.js to view photos.

This can be done simply with two <div> tags as well. One, which blankets the whole page with some semi transparent color or image and has a z-index larger than the whole page. Two, which has a z-index larger than one, is spaced relevantly, and contains whatever you want to show. Rolling your own isn't always desirable, as there are plenty of pre-written alternatives pointed out such as fancybox, lightbox, etc., but sometimes it is nice to know your options.

Displaying single image from a multi-image (animated) GIF file

Simple question, really. I just don't have the knowledge to do this with JavaScript, and to also make sure it works with (almost) all browsers...
I am going to design a set of images of a person pointing with one hand in several directions. (Up, down, left, right, diagonal, etc.) Basically, this puppet will be pointing at the location of the mouse. To do so, I want to use an animated GIF file to contain all the images and then use JavaScript to bring the right image to the front, based on the position of the mouse in relation with the image.
My knowlegde of Javascript is very limited, though. Before I even start creating the GIF images, I want to know if it's possible and if there's a solution that would work on any web browser. (Unless it doesn't support JavaScript, of course.)I know it's possible to delay an animated GIF from JavaScript but is it also possible to modify the exact image that needs to be displayed?

As far as I know, this is not possible.
Stuff like this is usually done using the "CSS sprites" technique, where the various stages are glued next to each other into one giant image. That image will then be used as background-image in a smaller element. background-position will determine which image is shown.
Whether this works for you will depend on whether your images are all the same size or not. It has the advantage of working reliably in all browsers, even IE6.

Image previewer for webpages

I am creating a webpage in html with php.
I want the user to be able to click on a small icon image. When the icon is clicked a preview of a larger image appears.
Guessing the solution probably involves javascript or flash. Can you point me to the right direction. Thanks in advance.

It sounds like you want a Lightbox?
A Lightbox allows you to have thumbnails of images on your page and when a user clicks on them, the larger image will popup in the middle of the screen. It's very common.
If what you are really looking for is a show/hide effect, you could use JavaScript to show the larger image if the user clicks on the smaller image. A JavaScript library like jQuery or YUI will make it very easy.

If you're doing it in php, then may as well use GD to do it for you.
Here's an excellent article to get you started: http://icant.co.uk/articles/phpthumbnails/

Image Zoom using javascript?

Has anyone got to some good code to zoom into an image using javascript?
I know I could just resize it etc but was being lazy and looking for something clever to zoom to different levels, move around when zoomed etc

Check this:
jQZoom
Zoomimage - jQuery plugin
jQuery ImgZoom
FancyBox

How big are the images?
If they are huge images you do them like google map style using this http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp

This really depends on what quality you are after. If you need a hires hiquality image with detailed zoom levels and proper interpolation you will need to write a backend service to serve up zoomed portions of your images. If you have no care for quality or speed, you could download the entire image and fit it to display inside a div absolutely positioned, offset for the area you want to view and sized as determined by your zoom level.
I would say you are probably after the first option. There are some tools already made for this, I persoanlly havnt used any of the tools; I am sure othes will post links to others you can try; I have written my own service and client. I cant go into the exact details as its proprietary, but I can give you an overview of what I do.
I have an asp.net generic handler that takes a query string denoting which image (by an id) and the coordinates to zoom on and the target image size. I have the service load the image and crop and resize it (its more complicated than that as I have many optimizations and preparsing when the file is originally uploaded, such as multiple cross sections of the file for faster serving when zooming, but what I describing here is the basics).
That service simply returns type image/jpeg and sends the image.
On the client side I have written a marquee box control that allows the user to marquee an area on the image they want to zoom in on. they marquee the area and click zoom. This then calculates the offsets into the image of the selected coordinates based on the original image size and the viewable image size. I send hese coords to the handler previously mentioned.I load the the url with query string of the srvice into an Image object, and handle onload. If all went well i then swap that to the viewed image and updates all my client side variables for determining where on the image I am zoomed into and then it can be zoomed again or zoomed out or panned further from there.
Now i understand your lazy requirement, but i need to say that writing this is actually quite easy to do to get the basics going. the hardest part you will find is doing a select box. But then even that can be as simple as tracking two click. Top left of the zoom select marque and bottom right. Or not having a select box at all and have a zoom in and out only at predetermined intervals. I on my projects required a zoom box as its a fairly complex image analysis solution.
I hope this at least helpful and leads you to something useful.