Develop Reference

Image loading like google image PHP

I came across the problem of image loading in website.
It's need to load 3 high resolution images in home page, and when open, it's showing website other contents first and load this images which is fine for now.
But it's slightly awkward, and would like to have similar image loading process like Google image search.
When I click image in Google, it shows blurred or pixelate image which seems like low resolution and lower size and loading original image a bit later.
They might use special thing as they are Google, but if someone have done this kinds of things before, I need your help.
Thanks in advance

Sounds like you want what are called "progressive JPEGs", where multiple images of varying quality are saved in one file, and the browser loads the low resolution images quickly to get something in the page, and replaces it with higher resolution images once they've been loaded.
Here's a tutorial on saving JPEGs for the web as progressive in Photoshop

You can use jQuery. The following is a general idea, not an exact code.
For each image use something like:
<div>
<img id="myimg" src="" style="display:none">
<img src="low-res-version link">
</div>
You should also keep a low res image.
Use jQuery to set your images src after the page loades, and use the next() function to remove the low res image.
$(document).on('ready', function() {
$('#myimg').attr('src', 'link to the image').on('load', function() {
$(this).css('display', 'block').next().remove();
}
You can also check this question: Fast Image loading methods, low to high res with multiple backgrounds - javascript solution?

Well, I choose resolutions from the server-side;
loading the low-res immediately in a z-index=0 object,
loading the one or more hi-res objects into negative z-index objects
and then at onload(), choose which object should be on top

flipping a picture over into another image

im trying to make an image have a flipping animation when hovered over with the mouse.
kind of like a wheel of fortune card flips except its one image on one side and a different version of the image on the other side. any ideas how i do this ?
<img src="image1.jpg" onmouseover="this.src='image2'" onmouseout="this.src='image1'" />
i was looking it up online and i see how to make images rotate but not to flip over into another image. any ideas how to get me started would be greatly appreciated

I would recommend taking a look at this article.
Essentially, what you would want to do is have the two images as separate image objects
<img src="image1.jpg"/>
<img src="image2.jpg"/>
something to toggle in (in the article's case, an anchor)
<a href="index.html" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
and finally something to store it (another image)
<img name="flippr" src="image1.jpg"></a>

I believe this resource outlines the effect you're trying to achieve. Pretty strong explaination. http://guilhemmarty.com/flippy/

Integrating fancybox into galleriffic

I would like to integrate some of fancybox's features into galleriffic. Basically I want to have a gallery of images with their respective thumbnails using galleriffic. Besides the styles my approach looks very similar to: http://www.twospy.com/galleriffic/example-2.html
Additionally, I want to be able to zoom into the image being shown. For such prupose I am using fancybox. An example of its behaviour can be found here http://fancyapps.com/fancybox/demo/
I have managed to make what I described above slightly modifying the galleriffic buildImage function leaving it as follows:
.append('<span class="image-wrapper current"><a class="advance-link fancybox" rel="group" href="'+imageData.image.src+'" title="'+imageData.title+'"> </a></span>')
Now, galleriffic adds the fancybox class fancybox needs as well as the image source. This works wonderfully.
At this point I find a problem I don't seem to find a neat solution for. Fancybox allows to navigate through a collection of images by clicking on the right/left side of each image to go to the next/previous image in the collection (as you may have noticed in the demo provided above). I would like to make use of this feature as well, so that users can navigate through the gallery by navigating through galleriffic's thumbnails, as well as through a zoomed version of the images using fancybox.
The problem I find here is that galleriffic creates the a class="fancybox" only for the image whose thumbnail has been clicked. This makes that fancybox is only able to find one image of the gallery. I don't want to define the class fancybox to the 's that define the thumbs for galleriffic because i dont want the images to be zoomed when clicked on the thumbnail but on the main image.
In a way, what i need is to generate all the 's with the fancybox class but hide all the not shown, instead of generating each time the one I need via galleriffic. This is the only solution I can come up with but it is not neat. I like how galleriffic deals with generating the main image each time the thumbnail is clicked.
I am wondering if someone can come up with a nicer solution. For example, fancybox could be able to know which image comes next by searching in the next galleriffic thumbnail's .
I have tried to make a working jsfiddle demo but there's too much code involved. Also there is no definite problem but a conclict of implementations. I think you can replicate my current situation easily.
Thanks for the effort!

I tried your method above, editing the BuildImage function as you did. For me, it successfully links to the image, but does not load in FancyBox.
I have this code in the main file:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
You were successful combining the two, correct?

how to load a dynamically inserted img first

I am building a splash page for a website with jquery animations.
My problem is: sometimes (before the page and images are cached by the browser) the images load in an order which detracts from the quality of the animation.
Ok, heres what I did:
the container div has the following css: background:url(images/colorcity.png)
if js is enabled I superimpose a greyscale <img> onto colorcity, whose opacity is animated to 0 for a nice "fade to color" effect.
to do this I use: $("#container").prepend('<img src="images/greycity.png" class="grey" />')
What I have been attempting to do, is somehow get that prepended image to be the first thing to display on the page, as it will be 'hiding' other images used in the animation. Unfortunately all of my attempts have failed.
I assume that this is a common problem and likely is a repeat question, but I couldn't find an answer after an hour or two of looking. So, sorry if I'm a noob lol.
Thank you ahead of time for any help.
The page: http://roughgiraffed.com/barrandbarrbags/

Try including this at or near the top of your page:
<img src="images/greycity.png" style="display: none;" />
That should force the image to load pretty early on. If it's still a problem do your animation in the load() callback rather that ready(), to ensure that all your images will be loaded up.
Very cool page, by the way (and it seems to work great in firefox).

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/