Elevate Zoom



Zoom3. Zoom manager2. Billedkode
Eksempel 1. Enkelt billede - Simpelt zoom med grøn tint.
Blæksprutte <script>
$('#zoom_01').elevateZoom({
zoomType: "window",
cursor: "crosshair",
tint: true,
tintColour: "green",
});
</script> 		<img id="zoom_01" src="billeder/billed03.jpg" alt="Blæksprutte" data-zoom-image="billeder/zoom03.jpg" />
Eksempel 2. Enkelt billede - Varierende forstørrelse.
Blæksprutte

Kør med musehjulet under zoom

 <script>
$('#zoom_02').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 3750,
scrollZoom: true,
});
</script> 		<img id="zoom_02" src="billeder/billed04.jpg" alt="Blæksprutte" data-zoom-image="billeder/zoom04.jpg" />
Eksempel 3. Enkelt billede - Fancy Box
Blæksprutte

Klik på billedet for visning i Fancy box

 <script>
$('#zoom_03').elevateZoom({
zoomType: "lens",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750,
lensShape: "round",
lensSize: 150,
galleryActiveClass: 'active', // Ved overførsel til Fancy Box
});
//overførsel af billeder til Fancy box
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
ez.closeAll();
$.fancybox(ez.getGalleryList());
return false;
});
</script> 		<img id="zoom_03" src="billeder/billed01.jpg" alt="Blæksprutte" data-zoom-image="billeder/zoom01.jpg" />
Eksempel 4. Galleri
billed02 <script>
$("#zoom_04").elevateZoom({
gallery:'gal_04',
cursor: 'pointer',
imageCrossfade: true,
loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
</script> 		<img id="zoom_04" src="billeder/billed02.jpg" data-zoom-image="billeder/zoom02.jpg"/>

<div id="gal_04">

<a href="#" data-image="billeder/billed01.jpg" data-zoom-image="billeder/zoom01.jpg"/> <img src="billeder/thumb01.jpg" /> </a>

<a href="#" data-image="billeder/billed02.jpg" data-zoom-image="billeder/zoom02.jpg"/> <img src="billeder/thumb02.jpg" /> </a>
<br />

<a href="#" data-image="billeder/billed03.jpg" data-zoom-image="billeder/zoom03.jpg"/> <img src="billeder/thumb03.jpg" /> </a>

<a href="#" data-image="billeder/billed04.jpg" data-zoom-image="billeder/zoom04.jpg"/> <img src="billeder/thumb04.jpg" /> </a>

</div>
Eksempel 5. Galleri - Fancy box
billed03

Klik på billedet for visning i Fancy box

 <img id="zoom_05" src="billeder/billed03.jpg" data-zoom-image="billeder/zoom03.jpg"/>

<div id="gal_05">

<a href="#" data-image="billeder/billed01.jpg" data-zoom-image="billeder/zoom01.jpg"> <img src="billeder/thumb01.jpg" /> </a>

<a href="#" data-image="billeder/billed02.jpg" data-zoom-image="billeder/zoom02.jpg"> <img src="billeder/thumb02.jpg" /> </a>
<br />

<a href="#" data-image="billeder/billed03.jpg" data-zoom-image="billeder/zoom03.jpg"> <img src="billeder/thumb03.jpg" /> </a>

<a href="#" data-image="billeder/billed04.jpg" data-zoom-image="billeder/zoom04.jpg"> <img src="billeder/thumb04.jpg" /> </a>

</div>



Etableringen af Elevate Zoom på en HTML-side fordeles på 3 opgaver:

  • Links til .js og .css filer
  • Indsættelse af billeddata
  • Opbygning af jQuery med styredata. Her kaldet ZOOMmanager.


Generelt


Der kan vise zooms på 3 + 1 forskellige måder:


  • window
    Viser udsnit af zoombilledet i er separat vindue op mod ydersiden af det billede, der zoomes fra. Vinduet kan placeres i 16 forskellige positioner tæt knyttet til normalbilledet - eller i en div-boks hvorsomhelst på skærmen.
  • inner
    Viser udsnit af zoombilledet inde i det billede, der zoomes fra.
  • lens
    Viser udsnit af zoombilledet som en linse (et forstørrelsesglas) holdt hen over det billede, der zoomes fra.
  • Fancy Box
    Zoom-billedet kan vises i fuld størrelse med Fancy Box.


Der kan vises zooms i 2 forskellige udformninger:


  • enkeltbillede
    Visning af zoom for et enkelt billede.
  • galleri
    Visning af zoom for flere billeder samlet i et galleri med "frimærkebaseret" valg af aktuelt billede.



Installation

Udover opkobling til jQuery via en CDN-forbindelse anvender Elevate Zoom en enkelt javaScript/jQuery-fil. Den skal der aldrig røres ved idet al styring (ved afvigelser fra default) foretages i det event-skript (Zoom manager), der er knyttet til hver enkelt zoom-aktivitet. Dette betyder igen, at der kan være flere / mange zooms på en enkelt side med hver sin individuelle opsætning og fremtræden.


ElevateZoom installeres således:


  • Download ElevateZoom f.eks. herfra: Tags typer
  • Åbn Zip.filen i download-mappen.
  • kopier filen jquery.elevatezoom-x.x.x.min.js til relevant mappe i aktuelt site.
  • På de sider i aktuelt site, hvor ElevateZoomer skal anvendes, linkes der til filen som beskrevet nedenfor.



Links

Links til .js og .css filer placeres i den nederste del af <HEAD>-tagget.


.js og .css filerne placeres fysisk i overensstemmelse med praksis i eller efter rodfilen for aktuelt site. Nedenfor linkes der til dem.


<-- Links til ElevateZoomer (og Fancy Box) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> <!--eller en anden CDN-server-->
<script src='..sti../jquery.elevatezoom-x.x.x.min.js'></script>
<script src='..sti../jquery.fancybox.pack.js'></script> <!-- Kun når Fancy Box anvendes -->
<link rel="stylesheet" href="..sti../jquery.fancybox.css" media="screen" /> <!-- Kun når Fancy Box anvendes -->


CDN-filen hentes typisk ekternt, mens de øvrige filer placeres fysisk i overensstemmelse med praksis for aktuelt site.


Der linkes kun til de to sidste filer, når Fancy Box skal tilkobles.



Indsættelse af billeddata.

Til enkeltbilled-zooms skal benyttes 2 billeder: et normalbillede til indsættelse og et zoom-billede til at zoome fra. I galleri-zooms skal også benyttes et "frimærke"/"thumbnail"-billede. Med udgangspunkt i zoom-billedet etableres de andre ved downsizing. Der benyttes samme størrelsesforhold hele vejen igennem. Forslag om størrelser på 100x67, 411x274 og 1280x854px er set.


Både ved enkeltbilled-zooms og ved galleri-zooms indsættes data for et billede (det pågældende billede eller zoomen's startbilledet).


Opbygningen er den samme i begge tilfælde:


<img id="zoom_01" src="billeder/billed03.jpg" alt="Blæksprutte" data-zoom-image="billeder/zoom03.jpg" />


Billedet indsættes i HTML-koden, der hvor det skal vises.


Billedet linkes til ZOOMmanageren med id="xxx".


Ved gallerizooms indsættes yderligere en divbox der indeholder data for hvert af de billeder, der skal indgå i galleriet.


<div id="gal_05">

<a href="#" data-image="billeder/billed01.jpg" data-zoom-image="billeder/zoom01.jpg"> <img src="billeder/thumb01.jpg" /> </a>

<a href="#" data-image="billeder/billed02.jpg" data-zoom-image="billeder/zoom02.jpg"> <img src="billeder/thumb02.jpg" /> </a>

</div>


Div-boxen indsættes oftest lige under koden til billedet, men kan også placeres andetsteds.


Div-boxen linkes til ZOOMmanageren med id="xxx".



ZOOMmanageren.


ZOOMmanageren er det centrale element i anvendelsen af ElevateZoom. De skal placeres nederst i <BODY>-tagget for at fungere.


ZOOMmanageren er et lille jQuery script, der består af to dele:


<script>
$("#zoom_04").elevateZoom({
gallery:'gal_04',
cursor: 'pointer',
imageCrossfade: true,
loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
</script>


  • inddata-del
    Den første linie i scriptet indeholder linkene mellem hhv. (start-)billedet og manageren og mellem manageren og javaScript-programmet. Link-identen i manageren skal også være til stede i billedet. De kan være en hvilkensomhelst tekst, men skal altid være ens de to steder.
  • funktions-del
    I funktions-delen (mellem { og }) kan der være mange eller få parametre, der af hensyn til overskuelighed bør placeres med et pr linie. Eksempler på anvendelse af funktioner kan ses her: x.
    Såfremt defaultopsætningen ikke passer til det aktuelle behov, kan her (som en kommasepareret liste) indsættes de parametre og parameterværdier, der er nødvendige for at "flytte" zoomen fra default-funktionaliteten til den ønskede. Til denne opbygning gøres brug af den officielle oversigt over parametre x.
    Ved galleri-zoom skal parameteren "gallery: 'aaa'," medtages. Den linker til id="aaa" i divboxen.


Husk javaScript er case-sensitive.


Der kan laves zoom for et i princippet ubegrænset antal enkelt-billeder / gallerier på samme HTML-side - og de kan zoome på hver sin måde så længe der er parametervariationer til rådighed dertil. For hvert indsat billede skal der også indsættes en ZOOMmanager. Hver billede - divbox / manager kombination skal have sin egen indivuduelle ident.



Fancy box - enkeltbilleder og galleri


ZOOMmanageren kan tilføres kode så zoom-billederne kan vises i FancyBox (der skal være installeret). Koden består af to dele:

  • I <HEAD> Efter linkene til Fancy Box indsættes:

    <script>
    $(document).ready(function(){
    $('.fancybox').fancybox();
    });
    </script>

  • ZOOMmanageren tilføjes parameteret "galleryActiveClass: 'active'" og nedenunder data-delen indsættes nogle ekstra kodelinier. ZOOMmanageren kan herefter se således ud:


    <script>
    $('#zoom_03').elevateZoom({
    zoomType: "lens",
    cursor: "crosshair",
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 750,
    lensShape: "round",
    lensSize: 150,
    galleryActiveClass: 'active', // Ved overførsel til Fancy Box
    });
    //overførsel af billeder til Fancy box
    $("#zoom_03").bind("click", function(e) {
    var ez = $('#zoom_03').data('elevateZoom');
    ez.closeAll();
    $.fancybox(ez.getGalleryList());
    return false;
    });
    </script>

    Bemærk at FancyBox-koden skal have id-værdien fra ZOOMmanagerens inddata-del indsat 2 steder. Resten af koden skal lades uændret.



Ekstern styring


Der er set indikationer på, at man med den rette viden kan foretage tilpasninger af Elevate Zoom ved at indlægge egen kode i Zoom Manageren. Dokumentationen omkring hvad og hvordan er dog så mangelfuld, at en nærmere beskrivelse ikke er mulig her.
x
x