2010-07-02 18 views
25

Qualcuno sa di un plug-in che consente di scorrere un collegamento di ancoraggio e vedere un'anteprima della pagina Web?jQuery Anteprima pagina Web

Quindi, in sostanza, potremmo avere un link sulla pagina per dire www.mysite.com e quando si passa al link mi piacerebbe vedere un'anteprima del sito.

So che ci sono dei plug-in che mostrano un file immagine ma sto cercando qualcosa che mostri l'anteprima della pagina live.

Modifica

Mi piacerebbe vedere una miniatura della pagina.

risposta

62

Se si desidera effettivamente un'anteprima della pagina live, sarà necessario utilizzare un iframe. Se vuoi solo un'anteprima dell'immagine, il suggerimento di Fulvio funzionerà, ma non mostrerà un'anteprima "live" (cioè, nessuna animazione che normalmente vedresti, se l'utente è connesso a una pagina, vedrai solo la parte anteriore pagina, ecc.). È possibile per ridimensionare effettivamente il contenuto di un iframe in modo che sia una miniatura, ottenendo così l'effetto desiderato. Per esempio:

<html> 
<head> 
<!--[if IE]> 
<style> 
#frame { 
    zoom: 0.2; 
} 
</style> 
<![endif]--> 
<style> 
#frame { 
    width: 800px; 
    height: 520px; 
    border: none; 
    -moz-transform: scale(0.2); 
    -moz-transform-origin: 0 0; 
    -o-transform: scale(0.2); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.2); 
    -webkit-transform-origin: 0 0; 
} 
</style> 
</head> 
<body> 
<iframe id="frame" src="http://www.bing.com"> 
</iframe> 
</body> 
</html> 

Buon divertimento :)

Copia e incolla nella barra degli indirizzi del browser per visualizzare in anteprima:

data:text/html,<html><head><!--[if IE]><style>iframe{zoom:0.2;}</style><![endif]--><style>iframe{width:800px;height:520px;border:none;-moz-transform:scale(0.2);-moz-transform-origin:0 0;-o-transform:scale(0.2);-o-transform-origin:0 0;-webkit-transform:scale(0.2);-webkit-transform-origin:0 0;}</style></head><body><iframe src="http://www.bing.com"></iframe></body></html> 
+4

+1 non solo perché è una buona risposta, ma anche per la novità di essere in grado di cercare "ciao mondo" in una versione ridotta di Google. – icktoofay

+0

+1 e per la possibilità di fare ancora clic sui pulsanti. :) questo potrebbe essere il modo di andare penso, ma è necessario giocare per primo – griegs

+0

Sarà più lento di un'anteprima basata su immagini il 90% delle volte, dal momento che deve caricare un'intera pagina web. A seconda dei tuoi usi, potresti voler caricare una miniatura da uno qualsiasi dei servizi disponibili (come quello usato da qtip), e quindi sfumarla sull'iframe una volta terminato il caricamento. A cosa stai pensando di usarlo, comunque? – crazy2be

4

qTip è un plug-in tooltip per il framework jQuery. È cross-browser, personalizzabile e ricco di funzionalità.

http://craigsworks.com/projects/qtip/demos/content/thumbnail

UPDATE:

QTIP 1.0 sarà presto obsoleta ... il check-out la qTip2 preview.

+1

+1, mi piace. Lasciami giocare con questo e torna da te – griegs

+1

Queste miniature sembrano essere schermate statiche. Passa il mouse su MySpace e poi guarda la pagina reale facendo clic sul link. –

+0

@Gert G, utilizza lo snap e accoda e accoda la pagina in un secondo momento. incerto questo è abbastanza dinamico – griegs