Home/ Questions/Q 7729787
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T06:03:36+00:00

How could I implement an image preview feature like Google image search result, when

  • 0

How could I implement an image preview feature like Google image search result, when clicked on a thumbnail, Google shows a preview of website on the background and preview of the image on the foreground.

Is that possible to use Lightbox/Fancybox (or a clone of them) and iframe options? Do you have any suggestions or solutions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    making this type of lightbox is easy. You don’t necessarily need to use Lightbox/Fancybox.
    there are actually many examples of this online that you could use for a model…for instance I just found this one
    http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

    what I generally do for this type of pop-up-like thing is make a div with the following properties:

    position:fixed;
top:left;
height:100%;
z-index:(something high);
background-color:rgba(255,255,255,0.8);
display:none;

    this will cover the page with a semi-transparent layer, or curtain
    what I generally do to display the curtain is attach a function that sets “display:none” to “display:block” ( or alternatively, uses jquery’s .toggle() ) to a click event somewhere on the page.

    make sure that the contents of the pop-up are also initialized as display:none; in the css

    I would then put the image inside the div, and position it with position: absolute;

    I used this type of curtain/pop-up here on this page…http://asdf.us/imgrid/greatgrids
    click “select, then click here for details”

    EDIT : after reading your comment, I realize that this is more about using iframes WITH lightboxes. I would be careful using iframes, because some sites (like stackoverflow.com, for example) disallow iframe linking. Try this example below:

    <html><head><style>
iframe, #curtain{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#curtain{
background-color:rgba(255,255,255,0.8);
z-index:10;
text-align:center;
}
#theimg{
padding:20px;
border:1px solid black;
}
</style>
</head>
<body>
<iframe src="http://en.wikipedia.org/wiki/Stack_overflow"></iframe>
<div id="curtain">
  <img id="theimg" src="http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/220px-Wikipedia-logo-v2.svg.png"></img>
</div>
</body></html>
    • 0