Solved

Hover over animation effect

Posted on 2011-09-17
8
581 Views
Last Modified: 2012-08-14
Hello,

I've got a number of different product images at different angles and trying to animate them in the thumbnails so when the user hovers it animates the various thumbnail stills so they have a quick timed slideshow before going to the product page. I've run some photoshop actions to extract them in all their sizes but putting them together in the front end is stumping me!

I've been looking at jquery, javascript and css but finding it hard to pick apart the information needed for best browser compatibility and also general performance (like load the page first before the various thumbnail stills).

Any advice/code on how this can be achieved would be much appreciated.

Cheers
David

0
Comment
Question by:dolythgoe
  • 4
  • 3
8 Comments
 
LVL 3

Expert Comment

by:nixkuroi
ID: 36554927
There's another way you can attack this, which might be a little easier and much less code with super easy full browser compatibility.

First create an animated gif of your slide show.  Then the static image you want there when you're not doing a mouseover.

At that point, all you do is make your mouseover image your animated gif and mouseout image the static one.   This also has the benefit of reducing the overall size of your images because you don't get all of the header data for every image.

At that point, you just do something like this:
<img src="static1.gif" onmouseover="this.src='anim1.gif'" onmouseout="this.src='static1.gif'"/>

0
 

Author Comment

by:dolythgoe
ID: 36555001
Thanks for the tip - the problem is that many of the images are photos (i.e a lot more than 256 colours) which is important for the look so need to do it with jpegs. They are also hosted on a CDN so I have a series of .jpg links referring to each of the stills.

So in this case was thinking along the lines of loading the 1st one and allowing the others to load gracefuly without affecting the main page load...
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36555246
You could load images asynchronously, using PHP and jQuery like this:

PHP script to scan the images directory. Save as get_images_in_dir.php and upload to server.
 
<?php
$extensions = array("jpg","gif","png");
$all_files = scandir($_GET["dir"]);
$images = array();
for ($i=0;$i<count($all_files);$i++)
	{
	$is_image = false;
	for ($x=0;$x<count($extensions);$x++)
		{
		if (substr_count(strtolower($all_files[$i]),$extensions[$x]) != 0)
			{
			$is_image = true;
			break;
			}
		}
	if ($is_image) array_push($images,$all_files[$i]);
	}
if (count($images) != 0) echo(implode(',',$images));
?>

Open in new window


download these two, place on your own server in a directory called js.
http://www.candpgeneration.com/js/jquery.imageLoader.min.js
http://www.candpgeneration.com/js/getimages.js

put this at bottom of your html page in that order:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.imageLoader.min.js"></script>
<script src="js/getimages.js"></script>


Note: you will need to change path names in the getimages.js to reflect your own server.


Now we just have to write a little script to animate your thumbs on hover. Coming...
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36555261
For the hover animation script (not written yet):

How are your images named? Do you have control over that? Can you name them like this:

image:
imageName.jpg

thumbs:
imageName-t1.jpg
imageName-t2.jpg
imageName-t3.jpg
...

(where imageName is the name of your image)

If not I'll write a different script..
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:dolythgoe
ID: 36555693
Wow thanks for your help!

Images are names:

blahblah_1.jpg, blahblah_2.jpg etc...

In terms of loading the images, I'm trying to stay clear of having them stored locally as the bandwidth to that webserver is expensive as compared to delivering them from the CDN so would prefer to keep the images loading in during the animation.

So a series of http://cdn.domain.com/image_x.jpg's.

I'm not sure if that is possible but trying to avoid downloading them to the server before serving. Would like to get them loaded client side.

So to recap the steps:

- A user hovers over the 1st image
- A counter checks how long they have been hovering
- If the time hovered is equal to a preset time milestone check if we are ready to display the second image, if the image is not yet loaded, hold off until it is, otherwise display
-Repeat for x number of images

The script can be given a value for the total number of images to look for in a pile and there is a pattern to the order naming of the jpegs.

Hope this makes sense and huge thankyou for your support :)

PHP is good as I use this :)

0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 36557069
Ok, here's a little animation on hover. When the mouse rolls out the image goes back to the default.

It's all in the source.

http://www.candpgeneration.com/EE-anim-on-hover.php

let me know if you have any questions...
0
 

Author Closing Comment

by:dolythgoe
ID: 36558550
Huge thanks for your help here. Really appreciate the effort you put into finding a solution. Top class!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36559349
:))))))

0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now