Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

disjointed jquery image rollovers and fade

Hi,

I've a grid of images that you can see at:

http://andrewmoreton.co.uk/guests/grid/grid.htm

I want it so that as you mouseenter an image, all other images src change and there's a fade between the change.

In the example I've posted, I want all the faces to point toward the face being moused over. I have all the images I need for this, but can't work out how to create the face and disjointed rollover effect with jQuery

User Gravatar

amort2000

Posted Jun 18 2014 5:17 UTC

$50


  • Assigned To Gaby
  • Solved
  • jquery
  • 540 Views

9 Replies


What angles you have from every people? Do you have only north, south, east and west or also northeast, southeast, southwest and northwest?

I can do this code for you. Maybe also provide example images of every angle?

User Gravatar

renekorss

Posted Jun 18 2014 5:25 UTC

Hi, I'm afraid I haven't got the full set of images yet..

Can we use placeholders? I'm imagine that if you can create me an example or two, that I can take it from there.

Thanks for coming back so quickly,

Andrew

User Gravatar

amort2000

Posted Jun 18 2014 5:38 UTC

I just created a demo for this (using placeholders that show which direction each image must look)

See http://jsfiddle.net/gaby/KVRQx/show/
code at http://jsfiddle.net/gaby/KVRQx/

It assumes that we know how many items fit in a row.. (i set a variable at the beginning)

The idea, is to bind a custom event handler on all the .mug_shot items which decides which image to show, and then trigger that event on all mug-shots whenever you hover over one of the images.

User Gravatar

Gaby

Posted Jun 18 2014 6:23 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi Gaby, that looks really promising - how do I change the source img's for the rolled over states?

As you may've guessed I'm not a natural with jQuery..

User Gravatar

amort2000

Posted Jun 18 2014 6:36 UTC

It is at the line

src: placeholder + direction

at that point you have access to the variable pos.image which holds the original image at that point. You also have direction which holds one of

  • "left" (directly left)
  • "right" (directly right)
  • "up" (directly up)
  • "down" (directly down)
  • "leftup" (to the left and up)
  • "leftdown" (to the left and down)
  • "rightup" (to the right and up)
  • "rightdown" (to the right and down)

This way you can combine them to create the target image you want to show.

For example (assuming all images are .png images)

src: pos.image.replace('.png','-' + direction + '.png')

will show images with format originalImage-leftright.png


If you post the naming convention you use i could post the exact way to do it.

User Gravatar

Gaby

Posted Jun 18 2014 6:46 UTC

Gaby, that's really great.

I'll see if I can get it to work with my images and if I have a problem, may ask you to help.

Thanks for your help,

Andrew

User Gravatar

amort2000

Posted Jun 18 2014 6:51 UTC

Glad to help, Andrew.

Thanks for the reward:)

User Gravatar

Gaby

Posted Jun 18 2014 6:52 UTC

Hi Gaby, sorry to bother you so quickly!

where you set

var placeholder = 'http://placehold.it/350x150&text='

where should I be pointing that?

User Gravatar

amort2000

Posted Jun 18 2014 7:19 UTC

You should remove that completely. It was only required for the placeholder images.

User Gravatar

Gaby

Posted Jun 18 2014 7:29 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions