Schlagwort: jQuery

Image preloader with jQuery

Today I saw a tiny JavaScript code on Stack Overflow which can be used as a jQuery plugin for preloading images. It is very handy and can be used easily:

jQuery.fn.preload = function() 
{
  this.each(function()
  {
    $('<img/>')[0].src = this;
  });
}
 
jQuery(document).ready(function($)
{    
  $(['./images/image1.png', './images/image2.png']).preload();
});

I use this function to preload drag images which are used by event.dataTransfer.setDragImage but you can still preload everything else. It makes also much sense for hover images.

How to get the iPad viewport size with jQuery

Detecting the viewport size of an Apple iPad is very easy with jQuery. You just have to use the following code example:

1
2
3
4
5
6
7
8

    <script src="./js/jquery.js"></script>
    <script type="text/javascript">
      var width = $(window).width(); 
      var height = $(window).height(); 
      var pre = document.createElement('pre');
      pre.textContent = 'Viewport: '+width+'x'+height+' pixels';
      document.body.appendChild(pre);
    </script>

The viewport for an iPad in landscape mode (with address bar) is 1024×690 pixels.
The viewport for an iPad in portrait mode (with address bar) is 768×946 pixels.
The viewport for an iPad in portrait mode (with address bar and debug console) is 768×896 pixels.

If you want to hide the address bar in portrait mode then you have to add the website to your homescreen and their must be this meta tag in your website’s header:

<meta name="apple-mobile-web-app-capable" content="yes" />

The viewport for a fullscreen portrait mode is then 768×1004 pixels.
The resolutions are based on the following setting:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

If you do not have this setting (or if you use different values for it), then the viewport will be lager or even smaller.

Eigenes jQuery-Plugin selbst schreiben

Das JavaScript-Framework jQuery lässt sich ganz leicht mit eigenen Plugins erweitern. Wie das geht, seht ihr hier:

HTML-Code

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery Plugin Example</title>
  </head>
  <body> 
    <div id="my_div"></div>
    <script src="./js/jquery.js"></script>
    <script src="./js/my_jquery_plugin.js"></script>
  </body>
</html>

my_jquery_plugin.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function($)
  {
    $.fn.myPlugin = function(title, params)
    {      
      var object = $(this);
      $.extend(object, params); 
      alert(title);
      alert(object.greeting);
      alert(object.isReceived);
      return this; // to allow jQuery chaining
    }
  })(jQuery);
 
$('#my_div').myPlugin('This comes from my jQuery plugin.',
{
  greeting: 'Hello World!',
  isReceived: true
});

my_jquery_plugin.js mit Standard-Einstellungen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function($){
  $.fn.myPlugin = function(params)
  {      
    var settings = 
    {
      firstName:'Max',
      lastName:'Mustermann'
    };
    if (params) 
    { 
      $.extend(settings, params);
    }
    alert(settings.firstName+' '+settings.lastName);
    return this;
  }
})(jQuery);
 
$('#my_div').myPlugin({firstName:'Benny'});

my_jquery_plugin.js mit Funktionsnamen als Parameter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

(function($)
  {
    function myRedFunction(element, settings)
    {
      $(element).css({
        width:'200px', 
        height:'200px', 
        backgroundColor:'red'
      }).html(settings.firstName+' '+settings.lastName);
    }
 
    $.fn.myPlugin = function(params)
    {
      var settings = 
      {
        firstName:'Max',
        lastName:'Mustermann',
        callback:myRedFunction
      };
      if (params) 
      { 
        $.extend(settings, params);
      }
      return settings.callback(this, settings);
    }
  })(jQuery);
 
function myBlueFunction(element, settings)
{
  $(element).css({
    width:'200px', 
    height:'200px', 
    backgroundColor:'blue'
  }).html(settings.firstName+' '+settings.lastName);
}
 
$('#my_div').myPlugin({
  firstName:'Benny', 
  lastName:'Neugebauer',
  callback:myBlueFunction
});

Eine gute Basis für ein jQuery-Plugin könnte wie folgt aussehen:

HTML-Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My jQuery-Plugin</title>
    <style type="text/css">
      * { margin: 0; padding: 0; border: 0; }
      html { background-color: wheat; }
      #testdiv
      {
        width: 400px;
        height: 400px;
        background-color: sienna;
      }
    </style>
  </head>
  <body>
    <div id="testdiv"></div>
    <script src="./js/jquery.js"></script>
    <script src="./js/my_jquery_plugin.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($)
      {
        $('#testdiv').myPlugin();
      });
    </script>
  </body>
</html>

JavaScript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

(function($)
  {
    function mergeSettings(parameters)
    {
      var settings = {
      };
      if (parameters) 
        $.extend(settings, parameters);
      return settings;
    }
 
    $.fn.myPlugin = function(parameters)
    { 
      var element = $(this);
      var settings = mergeSettings(parameters);
      alert('Plugin activated on: '+element.attr('id'));
      return element;
    }
  })(jQuery);

jQuery Gallery Tutorial

The best gallery for jQuery I’ve found so far is the jQuery lightbox plugin. The usage is very easy:

Exact sequence of steps

  1. Include jQuery
  2. Include lightbox JavaScript
  3. Include lightbox CSS
  4. Write a little function that selects links which should be used by lightbox
  5. Insert lightbox links which will have the fullsize image as target
  6. Surround your thumbnail images with those links

jQuery Gallery Tutorial weiterlesen