Creați o galerie de imagini cu creșterea

Îți place? Doriți să creați site-ul dvs. ca o galerie cu zoom vozmozhnsotyu?

pentru a crea un ghid:

Du-te la galeria pagina de descărcare Highslide. selectați cea mai recentă versiune, faceți clic pentru a descărca (descărcare), aproba acordul de licență (în cazul în care site-ul dvs. nu este comercial).
Creați un director de pe site-ul dvs. js. copiați fișierele în ea din Highslide dosar
În secțiunea head a paginii includ:
- HTML:
- JS:

Încărcat la site-ul în directorul / images / imagine necesare

Sfat: Pentru a crea un subfolder mini schite / imagini / mini, umple imaginea în același format, și lăsați mini-schiță și imaginea originală același nume, acesta va simplifica sarcina de a plasa imagini în materialele.

Acum, în materialul de după insera o legătură cu href atributul și înregistrarea evenimentului onclick. care este declanșat atunci când link-ul se face clic. Atribuiți clasa Highslide link-ul. Un loc în interiorul link-uri tag-ul img indicând mini-schiță.

Studiu de caz galerii cu imagini de tip pop-up:

O altă opțiune este plasarea galerie cu imagini de tip pop-up:

Acesta poate fi, de asemenea, utilizat cu dimensiuni diferite de aceeași imagine. Să presupunem că: un mini-schiță pentru a seta o lungime de 300 de pixeli, iar lungimea inițială în nici o limită.

Notă: nu uitați să specificați (în cazul în care o anumită lungime și lățime nu a fost pregătită în prealabil de mini-miniatură) atribut lățime (sau înălțime) pentru tag-ul img.

Notă: Este necesară Formatul de înregistrare. Faptul că valoarea se întoarce (false în cazul unui obiect de succes Highslide de inițializare) vom anula evenimentul implicit (click).

Memento: lățime și înălțime (numere întregi), a declarat tag-ul img au cea mai mare prioritate în fața aceleași setări în jgheabul css clasa sau ID-ul.

Adăugați un titlu în fereastra pop-up pentru galeria cu mini-schite.

Acest lucru necesită funcții hs.expand treci opțiuni suplimentare.

Cum se poate adăuga un titlu. Pentru a face acest lucru, ar trebui să solicite un atribut titlu tag-ul și să transfere hs.expand sale funcții:

Sfat: mini schițe întotdeauna gata și pop-up fotografii de aceeași dimensiune pentru frumusetea site-ului. (Miniaturi mici sau închise într-un container de aceleași dimensiuni).

Memento: Nu uitați să setați atributul alt pentru imaginea Img. Oferirea de orientare temă imagine Bots (pentru a atrage vizitatorii pentru a căuta după imagine.

Grupa imaginile din galerie cu expunere de diapozitive și elemente de navigare în Highslide.

Secțiunea cap se adaugă următoarele linii:

Un link către galeria cu mini-schițe și fotografii pentru a crește duce la minte.

Asta e tot. Dacă faceți clic pe orice imagine și de a spori aceasta, devin elemente de navigație disponibile (înainte pe imagine înapoi la imagine), începe o expunere de diapozitive cu efect de lightbox;.

Să examinăm galeria de imagini de configurare cu posibilitatea de creștere:

var galleryOptions = <> - Am înființat un grup de grup de imagini opțiunea „mysite“
slideshowGroup: „mysite“ - definește un grup de imagini mysite
dimmingOpacity: „0.8“ - Solicitarea transparenței pentru fundal în efectul lightbox;
captionEval: „this.a.title“ - un alt mod de titlu fereastra pop-up cu atributul titlu al etichetei și
hs.addSlideshow (<>) - adăugați un slideshow pentru grup „mysite“
slideshowGroup: „mysite“ - atribuie un grup de imagini
dimmingOpacity: „0.8“ - Solicitarea transparenței pentru fundal în efectul lightbox;
Interval: 3000 - specifică intervalul de diapozitive
repet: fals - un spectacol fără sfârșit de diapozitive (true) sau o expunere de diapozitive doar o singură dată - (fals)
useControls: true - utilizați bara de navigare (butoane: o imagine înainte, unul înapoi, dimensiunea originală, inclusiv un slide show)
specificați unde să plaseze Highslide și navigare elementele de titlu a ferestrei (în acest caz, partea de sus-centru)

În acest moment am zakonchku scurtă excursie în folosință pentru a organiza Highslide JS galerii cu zoom imagini vomozzhnostyu si slide-show la crearea unui site.

Trucuri pentru setarea Highslide JS
galeria de stiluri predefinite
Built-in galerie imagini înseamnă Highslide js
Și totuși, aici este un exemplu de script-ul pentru a adăuga în mod automat la Highslide JS toate imaginile cu o clasă specificată.
Precum și revizuirea se va face în viitorul apropiat, de altă parte, nu mai puțin de divertisment, galerii imageflow și de combinarea cu Highslide js

Mai multe informații despre tehnologiile web pot fi găsite în lista noastră a tuturor articolelor de pe site-ul: