Solved

Hover over animation effect

Posted on 2011-09-17
8
584 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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
 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

785 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