PDA

View Full Version : Placement of larger image



vkbarefoot
01-19-2010, 09:41 PM
1) Script Title: jQuery Image Magnify v1.1

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex4/imagemagnify.htm

3) Describe problem: The larger image pops up in the middle of the page and I would like it to pop up at the top of the page. Can you help? Thank you

jscheuer1
01-20-2010, 01:44 AM
Probably not a good idea because if the page has been scrolled the larger image may not be able to be seen.

However, since there is no way I can imagine all of what your setup may include, here's a simple way to get what you say you want to happen. Put this in the head of the page or add its rule to an existing stylesheet for the page:


<style type="text/css">
.magnify {
top: 0!important;
}
</style>

vkbarefoot
01-20-2010, 03:30 PM
I appreciate your help. You have always been the one to give me the solutions to my problems and I am very grateful that you are available to help us all out. Thank you, again. Viki Barefoot:)

vkbarefoot
04-12-2010, 01:55 PM
Probably not a good idea because if the page has been scrolled the larger image may not be able to be seen.

However, since there is no way I can imagine all of what your setup may include, here's a simple way to get what you say you want to happen. Put this in the head of the page or add its rule to an existing stylesheet for the page:


<style type="text/css">
.magnify {
top: 0!important;
}
</style>
John ... this doesn't seem to be working.

http://www.vikibarefoot.com/Products/Arch-Elements/architectural-details.htm
The images are in an iframe and that url is
http://www.vikibarefoot.com/Products/Arch-Elements/architectural-details-images.htm
http://www.vikibarefoot.com/Products/Arch-Elements/jquery.magnifier.js

The images are still displaying in the center of their page. Thank you for your time and expertise....viki

jscheuer1
04-13-2010, 05:20 AM
Sorry, my mistake. But you also skipped part of my advice.

Where I was wrong is that the .magnify selector is used for the thumbnails (smaller images). The .enlarged selector is used for them when they are shown enlarged. What you skipped is the !important keyword. So, where you have (on Arch-Elements/architectural-details-images.htm):


.magnify {
top: 0;
}


It should be:


.enlarged {
top: 0!important;
}

vkbarefoot
04-14-2010, 10:33 PM
John .... thanks so much for all your help. I appreciate it more than you know... again, thanks. viki ;)