how to change opening a new window method, how to change opening a new window method Options

[kianoush]

Hello.
I have the code below in a webpage and it's job is: when the mouse just goes over the image, a new window shows up and when the mouse goes out, it disapears. All it does is ok but i just want it to shows up when i CLICK on the image and it disapears when i CLICK on outside of the new window. Check it out.Help is needed.

The code in header:

CODE

<style type="text/css">
a.imPop {
position:relative;
z-index:0;
}  
a.imPop:hover {
display:inline;
z-index:auto;
}
a.imPop span {  
display:none;  
}
a.imPop:hover span {
display:inline;
position:left;
top:1em;
left:1em;
width:128px;
height:128px;
}

</style>

The code in body:

CODE

<a class="imPop" title="" style="color:#0000FF" font:large"">
<img src="images/1.gif" alt="" /><span>

<img src="images/2.jpg alt="" />


        </span> </a>

[pandy]

You can't do that with CSS alone, but you can by letting JavaScript manipulate CSS. For the other image to appear (it's an image, not a window) you could use onclick with the first image. To make it disappear when you click anywhere but on the second image is harder. Couldn't you limit it a little?

You have several errors in the snip above. Your quotes are all over the place. Does it really work?

[kianoush]

You can't do that with CSS alone, but you can by letting JavaScript manipulate CSS.

You have several errors in the snip above. Your quotes are all over the place. Does it really work?

yep it works properly. And yes i can't do it with css. So i need a useful code to replace it

[pandy]

Well, how far have you got? What do you have so far?

If your real markup looks as above it can't possibly work (and it didn't in the browsers I tried). You need to sort those quotes out.

[Frederiek]

Aren't you simply searching for a lightbox effect? Go see:
http://lokeshdhakar.com/projects/lightbox2/
http://fancybox.net
http://www.jacklmoore.com/colorbox/

Or search for "lightbox alternatives".

[Frederiek]

BTW, it is possible with CSS3, but only in browsers that support the :target pseudo class ( see: http://caniuse.com/#search=target ).
http://tympanus.net/codrops/2011/12/26/css3-lightbox/

This post has been edited by Frederiek: May 26 2014, 07:39 AM

[kianoush]

Aren't you simply searching for a lightbox effect? Go see:
http://lokeshdhakar.com/projects/lightbox2/
http://fancybox.net
http://www.jacklmoore.com/colorbox/

Or search for "lightbox alternatives".

Thank you frederik. I'm working on it and it looks better than the current code. But at the moment the only problem is all the pictures have to show in little windows as a group. It would be so better if we could just see them in the lightbox by clicking on one button or one text. I don't know you got exactly what i mean. I'm working on it to see if there is any solution for this or not. Thank you for it

[Frederiek]

If I understand you correctly, you want the thumbnails to show inside the lightbox overlayer.

That's been done in version 2 of fancybox at http://fancyapps.com/fancybox/ . Look for thumbnail helper in the examples and in the documentation.

I don't know if you can hide the thumbnails on the page itself though. Maybe there's something about that in the documentation and/or options.

This post has been edited by Frederiek: May 27 2014, 03:23 AM

[kianoush]

If I understand you correctly, you want the thumbnails to show inside the lightbox overlayer.

That's been done in version 2 of fancybox at http://fancyapps.com/fancybox/ . Look for thumbnail helper in the examples and in the documentation.

I don't know if you can hide the thumbnails on the page itself though. Maybe there's something about that in the documentation and/or options.

It resolved. I replaced the entire codes with another one by js. everything is ok now. Thank you Frederiek

[Frederiek]

You're welcome.