Wie könnte ich eine Bildvorschau-Funktion wie Google-Bild-Suchergebnis implementieren, wenn auf ein Thumbnail geklickt wird, zeigt Google eine Vorschau der Website auf dem Hintergrund und Vorschau des Bildes im Vordergrund.Bildvorschau-Funktion wie Google und Lightbox + Iframe
Ist es möglich, Lightbox/Fancybox (oder einen Klon von ihnen) und Iframe-Optionen zu verwenden? Haben Sie Vorschläge oder Lösungen?
machen diese Art von Leuchtkasten ist einfach. Sie müssen Lightbox/Fancybox nicht unbedingt verwenden. es gibt tatsächlich viele Beispiele für diese online, die Sie für ein Modell verwenden könnte ... zum Beispiel fand ich nur diese eine http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
, was ich für diese Art von Pop-up-like, was im Allgemeinen tun, ist ein div machen mit den folgenden Eigenschaften:
position:fixed;
top:left;
height:100%;
z-index:(something high);
background-color:rgba(255,255,255,0.8);
display:none;
dies der Seite mit einer halbtransparenten Schicht abdecken wird, oder Vorhang, was ich tue, um im allgemeinen der Vorhang Anzeige ist eine Funktion anschließen, die Sets „display: none“ auf „display: block "(oder alternativ verwendet jquery's .toggle()) zu einem Klick-Ereignis irgendwo auf der Seite.
Stellen Sie sicher, dass der Inhalt des Popup-Fensters auch als Anzeige initialisiert wird: none; in der css
Ich würde dann das Bild innerhalb der div, und positionieren Sie es mit der Position: absolut;
habe ich diese Art von Vorhang/pop-up auf dieser Seite ... http: //asdf.us/imgrid/greatgrids Klick "auswählen, dann klicken Sie hier für weitere Details"
EDIT : Nachdem ich Ihren Kommentar gelesen habe, merke ich, dass es mehr um die Verwendung von iframes mit Leuchtkästen geht. Ich würde vorsichtig sein, wenn ich iframes verwende, weil einige Seiten (wie zum Beispiel stackoverflow.com) Iframe-Verknüpfungen nicht zulassen. Versuchen Sie dieses Beispiel unten:
<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>
Bitte überprüfen Sie meinen Kommentar, danke. – Ali
Ich habe gerade meine vorherige Antwort – pepperdreamteam
mit diesem Code aktualisiert, ich habe ein Problem mit Bildern, die mehr Höhe als meine Bildschirmgröße und ohne Position haben: behoben; Bilder werden nicht korrekt angezeigt. – Ali
I Inhalt einer anderen Seite in diesem Feld und ein Bild als Vordergrund angezeigt werden soll, ex: http://www.google.com/imgres?tbnid=kPx4DAW9zSohZM:&imgrefurl=http: //userlogos.org/node/4924&docid=agRsH34bP-1G7M&imgurl=http://userlogos.org/files/logos/pek/stackoverflow2.png&w=300&h=225&ei=E016T-_aKI_EtAbOtJj6AQ – Ali
Was würde passieren, wenn Sie die Lightbox schließen? Bleibt auf der Seite oder verweist erneut auf die Seite, auf der sich das Bild befindet. – JFK
Wenn in Google das Bildfenster geschlossen wird, wird die Seite auf die Seite umgeleitet, auf der sich das Bild befindet. – Ali