Jump to content
Stef's Coding Community
Sign in to follow this  
joecool

My Pop up larger image is not working - How to fix?

Recommended Posts

Hello all,

 

I have been trying to do something for a total of about 6 hours and I have looked up so many things on google that I think I am going crazy. :blink:

 

I am simply trying to create 3 images, one beside the other and when you hover over each one a larger version of that image pops up.

 

I have managed to get it working okay in firefox, even though now that is even messing up, but it has never worked properly in IE7. I am just learning css and feel sure that it is something that I am doing wrong there.

 

Can anyone please help me, before I go insane?

 

Here is the css I am using to control the images.

 

 

.thumbnail{

 

position: relative;

 

z-index: 0;

 

}

 

.thumbnail:hover{

 

background-color: transparent;

 

z-index: 50;

 

}

 

.thumbnail span{ /*CSS for enlarged image*/

 

position: absolute;

 

background-color: white;

 

padding: 5px;

 

left: -1000px;

 

border: 3px solid gray;

 

visibility: hidden;

 

color: black;

 

text-decoration: none;

 

}

 

.thumbnail span img{ /*CSS for enlarged image*/

 

border-width: 0;

 

padding: 2px;

 

}

 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/

 

visibility: visible;

 

top: 0;

 

left: 60px; /*position where enlarged image should offset horizontally */

 

}

 

 

 

And is the code with images that it is trying to control to produce the result I want. (I have removed all personal references to my website since I am not sure if I can post personal URL's here).

 

 

<div style="width:94%;margin-bottom:10px;margin-right:auto;margin-left:auto;">

<div style="float:left;width:300px;text-align:center;">

<div style="text-align:center;line-height:21px;font-size:14pt;padding-bottom:15px;padding-top:15px;"><strong><a href="#">start Your Own Group</a></strong></div>

<div style="text-align:justify;padding:5px 5px 15px 5px;">Easily set up your own groups or join an existing group. You an even set up private groups that are only for people you invite and which you have total control over. Within your group you can manage your own forums as well.</div>

<br />

<a class="thumbnail" href="#"><img src="#" width="300" height="171" alt="groups" /><span><img src="#" width="600" height="342" alt="join a group" /></a></div>

<br />

<br />

<div style="float:left;width:300px;text-align:center;margin-left:10px;">

<div style="text-align:center;line-height:21px;font-size:14pt;padding-bottom:15px;padding-top:15px;"><strong><a href="#">Join in the Forum</a></strong></div>

<div style="text-align:justify;padding:5px 5px 15px 5px;">Join in with our active forum where you can ask question of other members and easily interact with others who have suffered with the same problems as you as well as medical professionals. Be active in the forum and become a trusted member.</div>

<br />

<a class="thumbnail" href="#"><img src="#" width="300" height="171" alt="forum" /><span><img src="#" width="600" height="342" alt="join the forum" /></span></a></div>

<br />

<br />

<div style="float:left;width:300px;text-align:center;margin-left:10px;">

<div style="text-align:center;line-height:21px;font-size:14pt;padding-bottom:15px;padding-top:15px;"><strong><a href="#">Control Your Privacy</a></strong></div>

<div style="text-align:justify;padding:5px 5px 15px 5px;">Control your privacy settings. In this day and age we all want to be careful with the sort of information that we are sharing with other people. Our extensive privacy settings allows you to only share what you want to share and nothing else.</div>

<br />

<a class="thumbnail" href="#"><img src="#" width="300" height="171" alt="privacy" /><span><img src="#" width="600" height="342" alt="control your privacy" /></span></a></div>

<br />

<br />

<div class="clear"></div>

</div>

 

Help... :(

Share this post


Link to post
Share on other sites

I've got a tutorial for exactly that, 3 thumnails and larger popups appearing in the same place as each other:-

item 2 http://www.wickham43.net/hoverpopups.php

All the styles are in the stylesheet. See the /*THUMBNAIL HOVERPOPUPS*/ section in

http://www.wickham43.net/tutorial.css

Good luck.

 

Edit: You may not need to look at the code in my tutorial because it's very similar to your code. I can get your code to work in IE7 and Firefox with the edits below. I can see a few things which are affecting IE7:-

You have a missing </span> in the first image code

<div style="float:left;width:300px;text-align:center;">
<div style="text-align:center;line-height:21px;font-size:14pt;padding-bottom:15px;padding-top:15px;"><strong><a href="#">start Your Own Group</a></strong></div>
<div style="text-align:justify;padding:5px 5px 15px 5px;">Easily set up your own groups or join an existing group. You an even set up private groups that are only for people you invite and which you have total control over. Within your group you can manage your own forums as well.</div>
<br />
<a class="thumbnail" href="#"><img src="#" width="300" height="171" alt="groups" /><span><img src="#" width="600" height="342" alt="join a group" /></span></a>  <!--</span> added here before </a>-->
</div> 
<!--<br />
<br />-->

and delete the br tags between the three sets of code as it makes the three floated divs stagger in IE7 (the second is slightly lower than the first and the third lower than the second).

 

I also think that a container width: 94% and divs inside width: 300px plus margins will cause trouble when the 94% of a small width window isn't wide enough. Don't mix px with %.

Edited by Wickham

Share this post


Link to post
Share on other sites

Hmm,

 

I am still having a few problems. My biggest problem I think I figured out. Basically I removed all the <br />'s and that made my layout okay again, but now in IE7 the larger image that pops up is in a different position than it is in firefox.

 

I have played around with the code for hours and I can't get them to look the same. It has got to be something in the CSS (I assume) but I can't figure out what. I have been through all the tutorials etc at w3schools, but still can't figure it out.

 

Any more help would be greatfully recieved. This is a brand new site and I want to get it right before it goes live.

 

Thanks

Share this post


Link to post
Share on other sites

It would be easiest to help if we could see your page live. Can you upload and send a link? You can put it into a test folder to keep it out of public view.

Share this post


Link to post
Share on other sites

It would be easiest to help if we could see your page live. Can you upload and send a link? You can put it into a test folder to keep it out of public view.

 

Here it is.

 

http://realpatientvoices.co.uk/community/

 

It is a combination of various bits of software integrated such as phpfox and vbulletin. The page in question is phpfox so I don't know if you will have problems finding the css page, which is why I posted it instead of the link.

Share this post


Link to post
Share on other sites

I'm looking at your page in FX, but the pop-ups aren't working well. The left and middle one show up ok width-wise, but the bottom is cut off. The right one gives me a horizontal scroll bar and most of it appears off-screen.

 

Before working on a fix, I'd ask if these pop-ups are even necessary. They enlarge the image, but it's no that they allow me to see something better that I can't see properly in small. I still can't read what's on there, and I don't get a better idea of what it's all about just because the box is larger. If you still want to have that pop-up effect, and since you're not gaining anything in clarity, consider making the pop-ups just a little larger than the thumbnails. At this size, you'll always have an issue having all 3 placed in the exact same relation to their 'trigger thumbnail' - the right one can only go off screen (unless the resolution is set pretty wide).

 

Just some thoughts.

 

And, btw, of course we can find the stylesheet - we can view source, and FX even creates it with a link directly to it. However, the way your CSS appears, iit's pretty impossible to work in.

Share this post


Link to post
Share on other sites

Hi Andrea,

 

Thanks for replying again. I planned to change the bigger images to something more legible. These were just test ones, so I am hoping that once I do better quality ones that it will add to the overall value of what the visitors get and it will be useful.

 

Yes, I agree that the larger ones do need to be a bit smaller.

 

From what you are saying one of the problems appears to be that the popups can't take up the same space, is that right? For example, when you hover over the left or right one I potentially wanted the large versions to show in exactly in the same position as the middle one. Since people will not be hovering over two at exactly the same time, I thought this might work.

 

Is there any reason why I can't do that? Please bear with me, because I am currently a totally novice at working with css and have relied on programs such as xsitepro or templates to do it all for me for the last 3 years.

 

I can always copy that particular css page here if it would help?

 

Thanks again everyone for trying to help.

Share this post


Link to post
Share on other sites

One thing you might consider - perhaps using a lightbox effect, something that pops up in a modal window when clicked on, rather than getting displayed when the image is hovered over? (which might be a bit nicer on the visitor, since that is something they have control over, whereas there is no indication that there will be a larger preview on hover.)

 

Something like http://colorpowered.com/colorbox/ or a similar script - take a look at the examples, since there are a couple different styles available.

Share this post


Link to post
Share on other sites

Something like http://colorpowered.com/colorbox/ or a similar script - take a look at the examples, since there are a couple different styles available.

 

 

Hi Ben,

 

I am definitly open minded to using something like a Lightbox effect. I looked at the example you gave and I am lost. I didn't see any of there examples showing a thumbnail image that when clicked on opens up into a larger image. However, I think I probably just need to download it and play with it. I can see that I am going to have to do a lot of playing around and trying to figure that out to.

 

This stuff is quite difficult for a new person to it; however, I need to learn the code properly and stop using some of the software that I have used in the past where I am restricted in the sort of sites I build.

 

At list now I have something else to look up - "lightbox effect" to see if there are any easy, to use scripts, if the one you recommended is to difficult for me to figure out right now. :blink:

Share this post


Link to post
Share on other sites

Thanks again Ben,

 

I have only been a member here for a few days and I am blown away by the help you guys give. Special thanks to you and Andrea, but everybody here is awesome.

Share this post


Link to post
Share on other sites

Thanks again Ben,

 

I have only been a member here for a few days and I am blown away by the help you guys give. Special thanks to you and Andrea, but everybody here is awesome.

Happy to help. ;)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...