[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 600
  • Last Modified:

Hover over animation effect

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
dolythgoe
Asked:
dolythgoe
  • 4
  • 3
1 Solution
 
nixkuroiCommented:
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
 
dolythgoeAuthor Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Kyle HamiltonData ScientistCommented:
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
 
dolythgoeAuthor Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
dolythgoeAuthor Commented:
Huge thanks for your help here. Really appreciate the effort you put into finding a solution. Top class!
0
 
Kyle HamiltonData ScientistCommented:
:))))))

0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now