Expanding Thumbnail of image on rollover in another area

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Hi,

I'm currently working on a Image thumbnail rollover bit on my site but can't get what I want to work. The sort of thing I'm trying is like this:

http://www.dynamicdrive.com/dynamicin...#

Basically I want to roll on to the thumbnail and have another area expand the thumbnail to show the image. Unfortunately the script written on the tutorial requires uploading a .js file which is not allowed. Is there an alternative to this?

I don't want the rollover replacing the thumbnail as thats the nearest I can find but that messes up the formatting of the page due to the expansion of the image.

What I ideally want is a box, with a load of thumbnails around the outside of the box, and when the mouse rolls over/hovers over one of the thumbnails, the middle of the box will show the full image.

Can anyone please help?

Thanks,

Henry
Photo of henry

henry

  • 4 Posts
  • 1 Reply Like
  • confused

Posted 9 years ago

  • 1
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Henry,
I take it you are talking about this file, thumbnailviewer2.js. If you click on it it will show you the contents: thumbnailviewer2.js ,copy it.

Just wrap it with Javascript tags (eg. < script type="text/javascript" > CODE HERE < script >, remove spaces.) and place it in-between your header tags. This should allow the script to work. It may put a little extra time on your page load, but it's a small piece of code so it won't be noticeable.

Connor
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Connor for your help on this!
Photo of henry

henry

  • 4 Posts
  • 1 Reply Like
You sir are a gentleman and a scholar! Thank you! If there was a way I could rep you, I would. :)

I do have one more question, I'm quite new to all this and I was wondering how I would be able to align the box so instead of it opening below the link/thumb, I could have it opening somewhere along the middle of my page. I'm sure using < div > or something is the key here but I'm unsure how to code table alignments manually.

Once again, many thanks,

Henry
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Are you using the script in the link you provided? Do you want it set up like in the example they show?
Photo of henry

henry

  • 4 Posts
  • 1 Reply Like
Yes I am. I want it similar to the way they've shown but instead of all the thumbs being aligned left and the target div being the only one on the right, I want my target div to be in the center of all my thumbs.

For example:

TTT
T#T
TTT

T = thumb
# = Target

I'm not sure if that is complicated or not, if it is, then I don't mind having it similar to the one shown on the site.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Henry

If you cannot get the gallery to work, you may want to consider using this gallery set up: http://www.cssplay.co.uk/menu/gallery.... Stu Nichols has a lot of great stuff on his site that you may be interested in checking out.
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
I knew I seen something like that before using css, just couldn't remember where!