Centering enlarged image on mouse hover

  • 1
  • Question
  • Updated 8 years ago
I added a picture gallery (custom coding) to my school website
http://www.smkpuchongutama1.com/akade...
but the pictures on the right and at the lower bottom are cut off when zoomed (mouse hover). How do I correct this (centered the enlarged image)?

Thanks for your help.
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Laili
You've placed the enlarger css coding in the site css overrides which is I think the problem, delete it from there and place it in a HTML widget on your gallery page using this code inbetween the <!-- -->

<!--
<style type="text/css">

Your enlarger code here

</style>
-->

There is also some adjustment in the code under .ienlarger a:hover span
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
Thanks David but that didn't work!

but i did remove '.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
} (I googled this)
and the zoomed pop up now went above ...

How do i make the pop up appear on the center of the page?
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Laili, the code is still showing in the site overrides, have you published the edits? You also need to paste back in the code you deleted.
Can you provide a link to the site you got the code from.
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
The link is http://www.dynamicdrive.com/style/css...

I have many pictures to upload to the web and I really like this gallery. I'd love to have this gallery if I can centre the zoomed image. This gallery is the easiest since only one picture is used both for the thumbnail and the zoomed one.

Really glad if you can help me.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Laili
Gop's suggestion is sound and I think the only answer if you wish to continue to use your present gallery. I'm currently using a dynamic drive gallery on my site which centres the large images but you do need two images, this is it

http://www.dynamicdrive.com/dynamicin...
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Selamat petang Laili,

You may like to try position:fixed

see the section in W3schools tutorial on position
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
Hi Gop;

Thanks for the reply but I'm not good at css. I don't really understand your suggestion. I don't understand the W3schools tutorial either.

I have a lot to learn ...
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi laili,

The problem with this setup and your layout is that if you cneter your enlarged image it will then appear over the top of other images and you won't be able to access them.

That is the reason for this setup as it is.

Ideally you would really need to align your images as a one column vertical layout and this will then work as you have entered the code. This may be your best bet as it only requires that you move your gallery into a single vertical column.

To alter the code is quite an involved procedure and you have to work out where you want your image to be that allows access to your other images and then create a blank space on your page for this to occur. ( this is what requires you to set a position:fixed)

Nasib baik untuk anda

PS: You may also like to reduce your enlarged image a bit to say half the height and width of the current setting. The very large image that you are currently displaying will inevitably go below the bottom of your screen. A reduction will help this problem a fair bit and won't interfere with the easily seen enlarged image.
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
Hi Gop,

I think I've got this settled.

Please visit http://www.smkpuchongutama1.com/blog-... and
http://www.smkpuchongutama1.com/blog-...

Please advise on which one is better for the school web.

Thank you. Appreciate your time on this.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Laili,

They both look good but I think that the second (http://www.smkpuchongutama1.com/blog-...) is a better way of presenting a school activity. The contents of the album are most interesting to your fellow students and families and of course your teachers. A slide show is a good way to show the spectrum of your activity on the camp.

Ask a few of your fellow students and a teacher or two and see what they like as well?

Gop.
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
Hello,

Yup, I think I prefer the slide show, too! You did say you think this one is better right? I got confused with your choice. heheheee ...

But, I'm afraid many slide shows will then slow the page loading. Won't they?

Selamat malam.

Laili
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes. The slide show is my choice.

You can limit the number of displayed posts in your blog at the one time and this will in effect prevent an unviewed slide show loading.
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
I'll do as you suggest. Thanks.