Rune Grønkjærs Blog
Abonnér på mit feed
Forsiden

jQuery Lightview 2.0

Af Rune Grønkjær | Udgivet 14. april 2010 | Read this in english English version
Mit jQuery LightView er et avanceret plugin til jQuery, der enten kan sættes op hurtigt og simpelt. Det er dog også i den grad muligt at customisere udseendet og funktionaliteten. Herunder har jeg sat en række forskellige demoer op der alle benytter pluginet.

Standardopsætningen

Sådan ser min lightview ud i sin mest rå form. Jeg sender ingen settings med og mine imagetags indeholder kun et minimum af informationer. imagehref type showinfo

Standard settings

Mit LightView har rigtigt mange indstillingsmuligheder. Se dem alle på denne side:
LightView settings

Javascript

jQuery(document).ready(function() {
  jQuery("#ImageGalleryStandard img").CreateGallery();
});

Html

<div id="ImageGalleryStandard">
  <img src="[Link til thumbnail]" imagehref="[Link til stort billede]" />
</div>

Eksempel

The Full monty

Dette eksempel sparer ikke på lir og gejl. Den viser alle de ting galleriet kan… På een gang.

Javascript

jQuery(document).ready(function() {
  var settings = {
    blockOpacity: 0.25,
    blockBgColor: "white",
    showImageList: true,
    imageInformationHeight: 95,
    imageInformationTemplate: '<h5>[header]</h5>[description]<br />Størrelse: [width] x [height] og [imagesize] KB<br />Billede [imagenumber] af [numberofimages]<br /><a href="[href]">Download billedet</a>'
  };
  jQuery("#ImageGalleryFullMonty img").CreateGallery(settings);
});

Html

<div id="ImageGalleryFullMonty">
  <img src="[Link til thumbnail]" imagehref="[Link til stort billede]" href="[Link til download billede]"
    type="image" header="Åkandeblomst" description="Hvid åkandeblomst med gult centrum"
    showinfo="true" />
</div>

Eksempel

Den skrabede version

Man kan selvfølgelig også lave en opsætning der stripper galleriet for al overflødig snas. I dette eksempel benyttes nogle custom grafikker til frem og tilbage, samt slet knapperne.

Javascript

jQuery(document).ready(function() {
  settings = {
    Corner_TR: 'http://jscripts.s3.co3.dk/Co3Gallery/x.gif',
    Corner_BL: 'http://jscripts.s3.co3.dk/Co3Gallery/x.gif',
    Corner_BR: 'http://jscripts.s3.co3.dk/Co3Gallery/x.gif',
    Corner_TL: 'http://jscripts.s3.co3.dk/Co3Gallery/x.gif',
    ArrowPrev: 'http://rune.gronkjaer.dk/blog/wp-content/BlogPages/javascript_rgLightview/arrow-left.png',
    ArrowNext: 'http://rune.gronkjaer.dk/blog/wp-content/BlogPages/javascript_rgLightview/arrow-right.png',
    Close: 'http://rune.gronkjaer.dk/blog/wp-content/BlogPages/javascript_rgLightview/btn-close.png',
    Play: '',
    SideMargin: 10,
    PaddingTop: 0,
    PaddingRight: 0,
    PaddingBottom: 0,
    PaddingLeft: 0,
  };
  jQuery("#ImageGallerySkrabet img").CreateGallery(settings);
});

Html

<div id="ImageGalleryStandard">
  <img src="[Link til thumbnail]" imagehref="[Link til stort billede]" />
</div>

Eksempel

Enkelt knap til åbning af galleriet

Nogle gange har man ikke lyst til at vise thumbnails, men vil bare lade brugeren åbne og bladre igennem billederne.

Javascript

jQuery(document).ready(function() {
  jQuery("#ClickToOpen").click(function(){
    jQuery("#ImageGalleryHidden img").CreateGallery(settings);
  });
});

Html

<div id="ImageGalleryStandard">
  <img src="[Link til thumbnail]" imagehref="[Link til stort billede]" />
</div>

Eksempel

Klik mig for at åbne galleriet

Cases

jQ LightView er efterhånden blevet benyttet på rigtigt mange sites. Herunder er et udpluk, hvor den er blevet brugt på forskellige måder.

MCH Messecenter Herning

Opdateret: 6. maj 2010
MCH benytter jQ LightView til at vise billeder fra deres møder, kongresser og fester. De benytter informationsområdet, til at skrive filens navn ud.
Løsningen benytter Dynamicwebs Billedgallerimodul til at liste billederne
MCH’s “Møder” side
MCH

Alux

Opdateret: 6. maj 2010
Alux viser deres produkter i jQ LightView. De benytter både de små thumbnails og informationsområdet. For Alux betyder det at de kan vise endnu flere informationer på mindre plads.
Løsningen benytter Dynamicwebs Billedgallerimodul til at liste billederne
Alux rullegitter side (Tryk på “Se flere billeder af Rullegitter” til højre i det store billede)
Alux

Alfred Priess A/S

Opdateret: 6. maj 2010
Alfred Priess A/S har et caseområde hvor jQ LightView gør det muligt at vise nogle store versioner af deres billeder. Der er ændret en hel del på udseendet af jQ LightView, som her har kantede hjørner og custom luk- og næste/forrigeknapper.
Løsningen bruger Dynamicwebs almindelige afsnit til at vise billederne
Alfred Priess Casesider
Alfred Priess

Idrætsskolerne Ikast

Opdateret: 6. maj 2010
Idrætsskolerne Ikast har et stort fotoarkiv til deres højskole. Der benyttes informationsområdet, til at tilbyde en downloadversion af billederne, samt de små thumbnails, så man kan se hvor mand er i billedrækken.
Løsningen benytter Dynamicwebs Billedgallerimodul til at liste billederne
Forsiden til Højskolens fotoarkiv
Idrætsskolerne Ikast

Dansk fitness

Opdateret: 6. maj 2010
Dansk fitness benytter jQ Lightview til at visse en rækker teaserbilleder for firmaet.
Løsningen benytter Dynamicwebs Billedgallerimodul til at liste billederne
Dansk fitness billedgalleri
Dansk fitness


Da de ovennævnte sider ind imellem skifter deres indhold kan det være at en side er fjernet eller jQ LightView ikke længere benyttes. Skriv endelig til mig her hvis det er tilfældet.

Vil du bruge det?

Du kan frit benytte mit plugin. Hvis du er venlig vil du meget gerne linke tilbage til min side, hvor du benytter det.
Download min pakkede version her:
English version