jQuery Image Viewer

Mit jQuery Image Viewer er et avanceret plugin til jQuery, der kan sættes op hurtigt og simpelt. Det er dog også i den grad muligt at customisere udseendet og funktionaliteten. Den er skrevet til at kunne vise billeder i så stor, som muligt, størrelse på brugerens skærm og browser.
Dette plugin er et remake af mit tidligere plugin jQuery LightView, som jeg ikke kunne få med mig, efter jeg skiftede job. Ingenting er så skidt at det ikke er godt for noget, og den nye udgave er langt mere solidt og fremtidssikret programmeret end det gamle.

jQuery Image Viewer’s nye tiltag

Af nye tiltag, er store ændringer af den html der danner datagrundlag for jQuery Image Viewer. Jeg har denne gang sørget for at html’en validerer og af man i tilfælde af manglende javascript eller fejl i javascript vil få vist billedet alligevel.

jQuery Modal Window

Grundlaget for jQuery Image Viewer er mit andet store plugin jQuery Modal Window, som udgør hele rygraden i jQuery Image Viewer. jQuery Modal Window har funktionalitet, som udregner den plads der er til rådighed i browservinduet. På grund af den store sammenhæng imellem jQuery Modal Window og jQuery Image Viewer er det også muligt at sende alle jQuery Modal Window’s indstillinger med til jQuery Image Viewer.

jQuery Image Viewer’s fremtidige opdateringer

Alle funktioner fra det gamle plugin er ikke lavet til det nye endnu, da jeg har fokuseret på et solidt fundament i første omgang. Af samme årsag er nogle af demoerne fjernet fra den nye version.
Jeg går allerede nu og overvejer hvordan følgende funktioner skal implementeres bedst muligt.

1. Autoplay funktion, som gør det muligt at lade billederne skifte uden selv at skulle klikke
2. Informationsområde til visning af ekstra information tilhørende billederne
3. Autopreload af alle billeder. Galleriet skal kunne preloade alle billederne uden at sætte sig på begge browserens download slots

Herunder har jeg sat en række forskellige demoer op der alle benytter pluginet.

Standardopsætningen

Sådan ser mit jQuery Image Viewer ud i sin mest rå form. Jeg sender ingen settings med og mine imagetags indeholder kun et minimum af informationer.

Standard settings

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

Javascript

jQuery(document).ready(function() {
  jQuery("#ImageGalleryStandard a").ivPrepare();
});

Html

<div id="ImageGalleryStandard">
  <a class="galleryImage" href="[Link til stort billede]">
    <img src="[Link til thumbnail]" />
  </a>
</div>

Eksempel

Den skrabede version

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

Javascript

jQuery(document).ready(function() {
  var settings = {
    corner_bl_background: 'none',
    corner_br_background: 'none',
    corner_tl_background: 'none',
    corner_tr_background: 'none',
    cornerSize: '0',
    padding: '0',
    arrowOffset: 0,
    next_background: 'url(http://rune.gronkjaer.dk/blog/wp-content/BlogPages/javascript_rgLightview/arrow-right.png)',
    nextWidth: 20,
    nextHeight: 43,
    prev_background: 'url(http://rune.gronkjaer.dk/blog/wp-content/BlogPages/javascript_rgLightview/arrow-left.png)',
    prevWidth: 20,
    prevHeight: 43,
    close_background: 'url(http://rune.gronkjaer.dk/blog/wp-content/BlogPages/javascript_rgLightview/btn-close.png)',
    closeWidth: 22,
    closeHeight: 23
  };
  jQuery("#ImageGallerySkrabet a").ivPrepare(settings);
});

Html

<div id="ImageGallerySkrabet">
  <a class="galleryImage" href="[Link til stort billede]">
    <img src="[Link til thumbnail]" />
  </a>
</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("#ImageGalleryHidden a").ivPrepare();
    jQuery("#ClickToOpen").click(function(){
      jQuery("#ImageGalleryHidden a:first").click();
    });
});

Html

<div id="ImageGalleryStandard"  style="display: none;">
  <a class="galleryImage" href="[Link til stort billede]">
    <img src="[Link til thumbnail]" />
  </a>
</div>

Eksempel

Klik mig for at åbne galleriet

Prøv selv

Her kan du selv prøve at udfylde indstillingerne og derefter køre åbne en jQuery Image Viewer med de nye indstillinger. Indstillinger bliver dynamisk hentet fra jQuery Image Viewer’s standard indstillinger.

Gør følgende

1. Ret i de indstillinger du ønsker rettet
2. Vælg et af billederne under indstillingerne

Eksempel

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: