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

jQuery Image Viewer

My jQuery Image Viewer is an advanced plugin for jQuery which can be set up quickly and simple. It is though possible to highly customize the look and feel og the Image Viewer. It was written to display images as large as possible, the size of the user screen and browser.
This plugin is a remake of my previous plugin jQuery lightView that I could not take with me when switching jobs. Luckily this has given me the opportunity to create a much more solid plugin programmed for the future.

jQuery Image Viewer’s new features

Of new initiatives are major changes to the HTML data which forms the basis of the jQuery Image Viewer. This time I have made sure the HTML validates and, in cases of missing javascript or error in javascript the images will be displayed for the user the old fashioned way.

jQuery Modal Window

The basis for jQuery Image Viewer is my second great plugin jQuery Modal Window, which forms the entire backbone of the jQuery Image Viewer. jQuery Modal Window has functionality that calculates the space available in the browser window. Because of the high correlation between jQuery Modal Window and jQuery Image Viewer it’s also possible to send all jQuery Modal Window’s settings to the jQuery Image Viewer, wich in turn sends them to the jQuery Modal Window’s.

jQuery Image Viewer’s future updates

All functions from the old plugin is not designed for the new, even when I have focused on a solid foundation in the first place. For similar reasons, some of the demos removed from the new version.
Currently I am considering the following extension to the jQuery Image Viewer plugin.
  1. Autoplay feature which makes it possible to let the images shift without having to click
  2. Information Area for displaying additional information of the images
  3. Autopreload of all images. The gallery must be able to preload all the images without to sit on both the browser’s download slots


Below I have put a variety of demos up there all use the plugin.

Standard Configuration

This is how my jQuery Image Viewer behaves in it’s most raw form. I send no settings and my image tags contain only minimal information.

The default settings

My Image Viewer has many options. See them all on this page:
Image Viewer settings

Javascript

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

Html

<div id="ImageGalleryStandard">
  <a class="galleryImage" href="[Link to a the large image]">
    <img src="[Link to thumbnail]" />
  </a>
</div>

Example

The scraped version

Of course you can create a setup that strips the jQuery Image Viewer of all redundant stuff. In this example, some custom graphics for forward, backward and close buttons.

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 to a the large image]">
    <img src="[Link to thumbnail]" />
  </a>
</div>

Example

One button for opening the gallery

Sometimes you do not want to show thumbnails, but will just let the user open and flip through the pictures.

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 to a the large image]">
    <img src="[Link to thumbnail]" />
  </a>
</div>

Example

Click here to open the gallery

Try it yourself

Here you can try to fill in the settings and then run a jQuery Image Viewer with the new settings. Preferences will be dynamically downloaded from jQuery Image Viewer’s default settings.

Do the following

  1. Change the options you want
  2. Click on one of the images below the settings

Example

Will you use it?

You can freely use my plugin. If you are kind link back to my page, from where you use it.
Download my packaged version here:


Dansk version