Nwlapcug.com


Come utilizzare una miniatura per Link per una galleria di immagini con JavaScript

Come utilizzare una miniatura per Link per una galleria di immagini con JavaScript


JavaScript è un popolare linguaggio di scripting lato client; è leggero, veloce e viene eseguito nel browser, che consente l'interazione in tempo reale tra il visitatore del sito e la pagina Web. Un'applicazione comune per JavaScript è quello di creare gallerie di immagini che rispondono alle azioni dell'utente; ad esempio, mediante la visualizzazione di un'immagine full-size quando un utente fa clic il mouse su un'immagine di anteprima, senza caricare un'intera nuova pagina nel browser.

Istruzioni

1

Fare un elenco non ordinato di miniature delle immagini. Ogni miniatura è legato all'immagine full-size. Il codice potrebbe essere simile al seguente:

Clicca per vedere l'immagine full-size. </p > < p >
< ul id = \ "imageGallery\" >

&lt;li>&lt;a href=\&quot;cat-pic-large.jpg\&quot;>&lt;img src=\&quot;cat-pic-thumb.jpg\&quot; alt=\&quot;cat\&quot; title=\&quot;This is my cat, Tabby\&quot; />&lt;/a>&lt;/li>
&lt;li>&lt;a href=\&quot;dog-pic-large.jpg\&quot;>&lt;img src=\&quot;dog-pic-thumb.jpg\&quot; alt=\&quot;dog\&quot; title=\&quot;This is my dog, Toby\&quot; />&lt;/a>&lt;/li>
&lt;li>&lt;a href=\&quot;hampster-pic-large.jpg\&quot;>&lt;img src=\&quot;hampster-pic-thumb.jpg\&quot; alt=\&quot;hampster\&quot; title=\&quot;This is my hampster, Tibby\&quot; />&lt;/a>&lt;/li>

</UL >

2

Implementare una funzione di gestione degli eventi. Ci sono molti tali script disponibili online. Gli esempi seguenti per implementare la sintassi facile-a-uso della funzione addEvent Dean Edwards.

3

Inizializzare lo script Galleria quando la pagina viene caricata. Aggiungere un listener di eventi per l'evento di caricamento della finestra e usarlo per attivare la funzione di inizializzazione.

addEvent (window, 'load', setupGallery);

4Come utilizzare una miniatura per Link per una galleria di immagini con JavaScript


Listener di eventi di rilevare quando l'utente fa clic suo mouse.


Aggiungere un listener di eventi del mouse-click per ogni immagine nella tua lista di Galleria. Quando l'utente fa clic su un'immagine, si chiamerà la funzione showFullSize. Per rendere la funzione stizzoso, precaricare l'immagine full size nel browser.

Function setupGallery() () {
Galleria di var = document.getElementById('imageGallery')
VAI
immagini di var = gallery.getElementsByTagName('img')
VAI
per (var i = 0; i < images.length; i + +) {
addEvent (immagini [i], 'click', showFullSize)
VAI
preloadFullSize(images[i])
VAI
}
}

5

Creare una funzione per visualizzare l'immagine full-size. Recuperare informazioni sui file di origine dell'immagine grande dal tag link che avvolge l'elemento image. Creare un nuovo elemento "div" come un contenitore di visualizzazione. Creare un nuovo elemento di immagine con le informazioni di origine appropriata e aggiungere l'immagine al contenitore. Poiché l'esempio qui coprirà l'intera pagina, creare un collegamento per rimuovere l'immagine full-size e rivisualizzare la galleria. Infine, aggiungere il contenitore al corpo del documento HTML per renderlo visibile.

Function showFullSize(e) () {

cancelClick(e)
VAI

var source = this.parentNode.getAttribute('href')
VAI
visualizzazione di var = document.createElement('div')
VAI
display.setAttribute ('id', 'imageDisplayFrame')

pic di var = document.createElement('img')
VAI
pic.setAttribute ('src', fonte)
VAI
display.appendChild(pic)
VAI

rimozione = document.createElement('p')
VAI
removal.innerHTML = \"Close window\"
Removal.OnClick = function(){removeFullSize();}
display.appendChild(removal)
VAI

document.getElementsByTagName('body')[0].appendChild(display)
VAI
}

6

Utilizzare lo stesso metodo per ottenere il percorso del file dell'immagine full-size nella funzione preloader immagine. Questa funzione crea un nuovo oggetto immagine e assegna un valore di origine, causando il browser a caricare l'immagine prima di essere visualizzato.

Function preloadFullSize(image) () {
var source = image.parentNode.getAttribute('href')
VAI
var newPic = new Image
VAI
newPic.src = sorgente
VAI
}

7

Si noti che la funzione di showFullSize chiama un'altra funzione chiamata cancelClick. Questa funzione impedisce l'azione predefinita di clic del mouse dell'utente, vale a dire navigando per l'immagine full-size.

Function cancelClick(e) () {
try {
window.event.cancelBubble = true
VAI
window.event.returnValue = false
VAI
} {catch(error)
e.stopPropagation()
VAI
e.preventDefault()
VAI
}
restituire false
VAI
}

8

Creare una funzione di removeFullSize, che verrà chiamata quando l'utente sceglie di chiudere l'immagine full size e tornare alla Galleria.

Function removeFullSize() () {
visualizzazione di var = document.getElementById('imageDisplayFrame')
VAI
display.parentNode.removeChild(display)
VAI
}

9

Gli elementi dell'elenco con i CSS (Cascading Style Sheets) per fare un'esposizione attraente di stile. Questo esempio ha un solido background nero; è possibile utilizzare un'immagine png semitrasparente nell'implementazione.

< stile tipo = \ "testo/css\" >

UP2 {

margin: 0;
padding: 0
VAI
}

UP2 li {

margin: 0;
padding: 0;
Larghezza: 200px;
Height: 200px;
border: 1px solid #8E8E8E;
float: left;
text-align: center
VAI
}

UP2 li a {img

border: 0;
margin: 20px auto
VAI
}

imageDisplayFrame () {

background-color: #000;
Posizione: absolute;
Top: 0;
Left: 0;
Larghezza: 100%;
Altezza: 100%;
text-align: center;
margin: 0;
padding: 0
VAI
}

imageDisplayFrame img {

margine: 150px 10px automatica
VAI
}

imageDisplayFrame p {

colore: #FFF
VAI
}
< / stile >

10

Testare la tua galleria di immagini basato su JavaScript nel vostro browser e modificare lo stile CSS da gustare.