MrZoom

Lente di Ingrandimento sulle immagini della Pagina Web!

Le immagini disposte nella pagina sottostante sono immagini normali. I primi due rimarranno normali, ma gli altri tre hanno proprietà speciali. Fai clic su una di queste tre immagini per trasformarle in immagini magnifiche. Le immagini convertite includeranno una finestra più piccola che può essere trascinati sull'immagine per mostrare un ingrandimento dell'area sottostante.

Caratteristiche:
  • Offri agli utenti la possibilità di vedere i dettagli nelle tue foto.
  • Il codice di ingrandimento sostituisce l'immagine esistente e non influisce sul layout di pagina.
  • È possibile selezionare le immagini da ingrandire.
  • Uno script di una pagina può essere utilizzato per tutte le immagini selezionate.
  • Le immagini possono essere di qualsiasi dimensione o forma.
  • Protezione dalla copia: il clic con il pulsante destro del mouse è disabilitato nella lente di ingrandimento.

joga   spinning

Clicca su una delle foto qui sotto per attivare la lente d'ingrandimento. (Le foto sopra non hanno una lente d'ingrandimento.)

Queste due foto sono state aggiunte con l'allineamento sinistro e destro nei tag immagine. Quando si fa clic, i codici immagine verranno completamente riscritti e la posizione CSS verranno aggiunti al nuovo DIV che contiene la foto. Potrebbe esserci un certo riaggiustamento della posizione. Le tabelle potrebbero essere utilizzate per mantenere un posizionamento preciso.

test image

Notare i dettagli nella foto della strada, quasi si riesce a leggere le targhe delle Automobili. Che dire poi della Foto del Bus, si vede chiaramente il viso dell'autista.

farfalle

Riesci a contare tutte le farfalle nella foto sopra? La foto viene visualizzata con dimensioni effettive di 400x300 e l'ingrandimento 3X è perfetto per ingrandire i dettagli.

Cornici e Bordi Gratuiti su Tools MrBorders


Integrazione della Lente di Ingrandimento sulle tue Pagine

Per utilizzare la lente d'ingrandimento nelle tue aste, copia il codice dalla finestra sottostante e incollalo nel modello dell'asta. Se consenti agli utenti di attivare la lente d'ingrandimento facendo clic sulle immagini, inserisci il codice nella parte superiore del modello. Se prevedi di utilizzare lo script dell'attivatore automatico, puoi posizionare il codice della lente di ingrandimento vicino alla parte superiore o inferiore del modello.

Ciascuna delle tue immagini dovrà essere racchiusa in questo codice di collegamento per poter utilizzare lo script.

    <a href="javascript:initMagnifier()">
    <img src="http://www.myhost.com/image.jpg"
     width="400" height="300" border="0">
</a>


Il passaggio finale è decidere come attivare la lente d'ingrandimento. Il codice sopra attiverà la lente d'ingrandimento non appena l'utente fa clic su una delle immagini e presumibilmente le immagini saranno state caricate in quel momento. Se desideri attivare automaticamente la lente d'ingrandimento (e quindi applicare automaticamente la protezione dalla copia), aggiungi questo script di attivazione in fondo sotto il codice della lente d'ingrandimento e sotto tutte le immagini. Questo è in aggiunta all'aggiunta dei codici di cui sopra a ciascuna immagine.

     <script language="javascript" defer>initMagnifier()</script>

Quando si utilizza l'attivazione automatica, i tag delle immagini DEVONO includere sia l'altezza che la larghezza della foto, altrimenti la lente d'ingrandimento non sarà in grado di adattarsi all'immagine.

Una volta attivato, l'ingrandimento rimane attivo mentre la pagina è aperta. Passare il mouse dentro e fuori una foto farà apparire o scomparire la lente d'ingrandimento.

Altre Opzioni

Il codice del collegamento deve essere applicato solo a una foto per l'attivazione manuale. Potrebbe essere sull'ultima immagine se lo scopo è quello di consentire il caricamento delle immagini. Se ritieni che siano necessarie indicazioni più esplicite per il tuo utente, l'attivazione potrebbe essere applicata a un pulsante. Il codice del pulsante sarebbe simile al seguente:

    <input type="button" onclick="initMagnifier()" value="Use Magnifier">

Un'altra opzione di codifica consente wrapper di immagini alternative che devono solo portare questo designatore di classe nel tag wrapper. Qualsiasi altro contenuto tra i wrapper, a parte il codice dell'immagine, verrà cancellato. Questo tipo di codice viene utilizzato con l'attivazione automatica o potrebbe essere applicato ad altre immagini non cliccabili quando desideri che la lente di ingrandimento venga avviata da un'immagine specifica nel tuo gruppo.

    <span class="magnify_this">
    <img src="http://www.myhost.com/image.jpg"
     width="400" height="300">
</span>


Problemi?

Evita di avvolgere o annidare le tue immagini ingrandite nel P-tag. Questo non è un wrapper compatibile con Internet Explorer per il tag DIV con lente d'ingrandimento. Non utilizzare TurboLister o l'Editor delle inserzioni di eBay per riposizionare le tue immagini sulla pagina, poiché possono aggiungere / sostituire codice (in particolare il P-wrapper) che non è compatibile con il codice Magnifier dell'immagine. Il posizionamento più efficace è con i codici tabella (che è anche un modo pratico per aggiungere didascalie).

0


L'Angolo del Designer

Puoi integrare questa lente d'ingrandimento nei design delle tue pagine che vendi, ma potresti non addebitare la lente d'ingrandimento stessa. Ti chiediamo di non alterare il codice o rimuovere i crediti incorporati. Quando pubblicizzi un modello o una pagina che utilizza questo visualizzatore, includi un credito o un link a questa pagina o alla home page (http://www.mrlamart.it/Biblioteca).

Non concediamo il diritto di vendere questa lente d'ingrandimento e potrebbe non essere inclusa nelle raccolte di freeware in vendita.