Benjamin Mock

Wordpress und Ajax (JQuery) in Plugins

Zur Zeit schraube ich an einigen Wordpress Plugins. Und da Ajax immer mehr an Bedeutung gewinnt, sollen auch diese Plugins vom dynamischen Nachladen per JavaScript Gebrauch machen.

Mit Wordpress geht das überraschend komfortabel und sauber, denn für den Admin-Bereich ist bereits die Verwendung von Ajax vorgesehen. Mit kleinen Anpassungen, kann man die admin-ajax-Funktion auch für öffentliche Seiten nutzen.

Wie das geht steht hier:
Integration von JQuery in Wordpress
Ajax in Plugins (Auf sack, das im Beispiel verwendet wird kann man auch verzichten. Man muss nur die URL zur admin-ajax.php per PHP in JavaScript speichern und diese dann für die JQuery-Funktionen zur Kommunikation mit dem Server verwenden.)

Sollte Bedarf bestehen schreibe ich dazu auch gerne nochmal ein Tutorial – einfach per Kommentar oder Mail melden!

Suchen Sie einen freien Wordpress Entwickler zur Erstellung individueller Plugins? Dann melden Sie sich bitte!

JQuery CSS Reset Plugin

• summary: plugin resets css styles of given element
• version: 0.1
• date: 09.07.22

If you’re coding a widget which is not included in the page via an iframe you have to cope with a lot of different styles that are given by the css of the page. Using a lot of inline styles for your elements is most of the time not an option, because you need some easy injectable html-code for the users. So styling your widget with JavaScript is the best option. And therefore you will maybe like to reset the css for your elements. And that’s exactly what the beResetCSS-JQuery-Plugin does.

Download

Download BeResetCSS v0.1 as zip

Usage

$(document).ready(function(){
	$("YourElement").beResetCSS();
});

The reset-CSS is based on the suggestion from meyerweb.

BeZoom Lighweight JQuery Zoom Plugin

BeZoom is a simple and lightweight zoom plugin for the wonderful JQuery framework.

Update / Changelog

09.07.29 v0.11

• fixed overlow:hidden bug in IE6 & 7 when container has position:absolute;
• changed method to calculate relative mouse position to work in IE
• chaining of mouseenter, mouseleave and mousemove didn’t work in IE
• Plugin now works in Opera >= 9, Firefox >= 2, IE >= 7 & Chrome

Demo

To view this script in action simply hover of the following image:

Download

Download BeZoom v0.11 as zip

Usage

$(document).ready(function(){
	$(".zoom").bezoom();
});

HTML

The plugins works best with images with the same proportions.

<a href="img_big.jpg" class="zoom" title="Your Title">
    <img src="img_small.jpg">
</a>

Options

It’s not neccessary to link directly to the big image. You can also you the rel-Attribute for the preview-image or any other attribute.

$(document).ready(function(){
	var options = {imgSource = 'rel'};
	$(".zoom").bezoom();
});

<a href="some_page.html" rel="img_big.jpg" class="zoom" title="Your Title">
    <img src="img_small.jpg">
</a>

Options Overview

• Option
  Default Value
  Description
• marginLeft
  10
  left side margin
• identifier
  bezoom
  id that is used internally for the bezoom plugin; should not need to be changed as long as you don’t use an “bezoom”-id on your own page
• height
  200
  height of preview-container; height of title-container doesn’t count
• width
  200
  width of preview-container
• titleSource
  title
  Attribute that contains the title
• imgSource
  href
  Attribute that contains the url of the preview-image
• bgColor
  #5398EE
  background-color of title
• color
  #ffffff
  font-color of title
• size
  0.8em
  font-size of title; you can also use px instead of em

Alternatives

With jqzoom there is a well known alternative to BeZoom, I used some time. But jqzoom in my opinion is much to complicated and confusing. Changing something in this 1000 liner isn’t fun at all. After all jqzoom seems to be a mashup of prototip and lightview.

So I created BeZoom to suit my personal needs. It’s light and it’s easy to use.

If you are using BeZoom let me know it and I’m going to develop some more features for it. If you find any bugs I’d appreciate a short comment so I can fix it.