Image preloader with jQuery

16. November 2011

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.

Tags: JavaScript, Images, JavaScript, jQuery, js, Plugin, Preloader, Preloading, setDragImage

Eigenes jQuery-Plugin selbst schreiben

2. November 2011

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

HTML-Code

<!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

(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

(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

(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:

<!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-Code:

(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);

Tags: JavaScript, jQuery, Plugin, schreiben, selbst

How to use jQuery within a WordPress plugin

2. Oktober 2011

This is just a short sample which shows how you can use jQuery within your own WordPress plugin to make cool JSON requests on PHP pages.

Tags: WordPress, jQuery, Plugin, WordPress

How to create a WordPress plugin with a custom database table

24. September 2011

You can create a custom table for the data of your WordPress plugin if you hook on the plugin activation. This has the effect that your custom table will be created if you activate the plugin in the WordPress backend. I created a sample code to show you how this works.

Tags: WordPress, database, Plugin, table

WordPress Suche ist nicht valide

28. Januar 2010

Das WordPress Suchen-Plugin generiert keine konforme Auszeichnung nach den Standards des World Wide Web Consortium (kurz: W3C). Der W3C Markup Validation Service stört sich am Attribut “role” der WordPress Suche:

Attribute “role” is not a valid attribute. Did you mean “frameborder” or “scrolling”?

Beheben kann man diesen Schönheitsfehler, indem man das role Attribut aus der Suche entfernt und den Quellcode dann in ein eigenes Template für die Suche kopiert und als searchform.php in seinem Template-Ordner abspeichert. Der Code dafür könnte folgendermaßen aussehen:

<form method="get" id="searchform" action="<?php bloginfo('siteurl'); ?>" >
	<div>
		<label class="screen-reader-text" for="s">Suche nach:</label>
		<input type="text" value="" name="s" id="s" ///>
		<input type="submit" id="searchsubmit" value="Suchen" ///>
	</div>
</form>

Wenn man alles richtig gemacht hat, dann freut sich der W3C-Validator mit einem:

This document was successfully checked

Eingebunden wird die Suche im Template mit:

<?php if (function_exists('register_sidebar') &&
	  dynamic_sidebar('search') ) : else : ?>
<!-- Vorher unter "WP Backend" - "Design" - "Widgets"
das "Suchen"-Widget zur Sidebar "Search" hinzufuegen  -->
<?php endif; ?>

Oder ganz einfach mit:

<?php get_search_form(); ?>

Tags: WordPress, Plugin, Search, Suche