The code is really good work but I found a little problem if you change the resize “factor” of the image.

I fixed that and want to share my insights with you.

Demo: http://jsfiddle.net/BMoDesign/sAF8L/embedded/result,js,html,css/

I changed the process and the glideTo function.

    glideTo: function(index) {
        if (this.index < index) this.isback = false; if (this.index > index) this.isback = true;
        this.index = index;
        this.aniFx.start(this.aniFx.get(), index * -this.foc);
        if (this.cap) this.cap.set('html', this.getCurrent().title);
    },
    process: function(x) {
        var z, W, H, zI = this.iL,
            foc = this.foc,
            f = this.factor,
            sz = this.sz,
            oW = this.oW,
            offY = this.offY,
            div, elh, elw,
            isback = this.isback;

            this.master.images.each(function(el) {
                div = el.div.style;
                elw = el.width;
                elh = el.height;
                if (x > -foc * 6 && x < foc * 6) {
                    with(Math) {
                        z = sqrt(10000 + x * x) + 100;
                        H = round((elh / elw * f) / z * sz);
                        W = round(elw * H / elh);
                        if (H >= elw * 0.5) {
                            W = round(f / z * sz);
                        }
                        div.left = round(((x / z * sz) + sz) - (f * 0.5) / z * sz) + 'px';
                        div.top = round(oW * 0.4 - H) + offY + 'px';
                    }
                    el.con.style.height = H * 2 + 'px';
                    div.width = W + 'px';
                    if (isback==true)
                        div.zIndex = x <= -foc ? zI++ : zI--;
                    else
                        div.zIndex = x < 0 ? zI++ : zI--;
                    div.display = 'block';
                } else {
                    div.display = 'none';
                }
                x += foc;
            });
    }

In Onlineshops und Seiten, auf denen täglich viele Artikel gepostet werden, erspart der Einsatz eines Autocompleters viele Mühen. In vielen meiner Seiten verwende ich das glorreiche Tool “Magic Fields 2.0″ um mit Custom Fields zu arbeiten. Ich habe nun herausgefunden, wie sich der jQuery Autocompleter relativ einfach mit Magic Fields verknüpfen lässt. Hier meine Anleitung.

1. in unserem Theme benötigen wir eine neue Javascript-Datei, eine CSS-Datei und die “functions.php” des Themes.
2. Die Javascript-Datei nenne ich “adminJS.js” und die CSS-Datei “adminCSS.css”.
3. beginnen wir mit der adminJS.js:Zuerst lade ich das aktuelle Autocompleter jQuery Script von jQuery UI herunter. Wichtig, es reicht das Autocompleter script. Zusätzlich muss man core, widget und position herunter laden. Kopieren Sie nur das Autocompleter Script aus der heruntergeladenen JavaScript Datei heraus in die adminJS.js
4. Darunter schrieben wir unseren Code zum starten des Ajax Requests:

       //BMo Functions
       /*
       ---
       description: ...
       authors:
       - Benedikt Morschheuser (http://software.bmo-design.de) 2011
       requires:
       - jQuery
       */
       (function($) {
          $(document).ready(function(){
            var initMFAutocomplete = function() {
              //initalisiert Autocompleter für Magic Fields
              var lastXhr;
              var locURL = jQuery(location).attr('href').split('wp-admin')[0];
              $(".text_field_mf input").autocomplete({
                source: function( request, response ) {
                  var term = request.term;
                  //http://codex.wordpress.org/AJAX_in_Plugins
                  var data = {
                    action: 'jsonAutocomplete',
                    term: term,
                    field: $(this.element).attr("name").split('[')['1'].split(']')[0]
                 };
                 lastXhr = $.post(ajaxurl, data, function( anwser, status, xhr ) {
                 if ( xhr === lastXhr ) {
                   response(anwser);
                 }
                });
              }
            });
          };//Aufruf der Funktionen
          initMFAutocomplete();
         });
       })(jQuery);

5. In die adminCSS.css kommt das heruntergeladene jQueryUI CSS Framework. Bei mir “jquery-ui-1.8.18.custom.css”. Die Bilder benötigen wir nicht.
6. Nun wird es spannend. Die functions.php muss ergänzt werden. Als ersten benötigen wir die Scripts, als zweites muss die Ajax/JSON Antwort gebaut werden. Beginnen wir mit dem Einbinden der Scripts. Dafür verwenden wir folgenden Code:

   function load_custom_wp_admin_scripts(){
       wp_enqueue_style('admin_css', get_template_directory_uri() . '/adminCSS.css');
   	wp_enqueue_script('jquery-ui-core');
   	wp_register_script('admin_js', get_template_directory_uri() . '/adminJS.js', array('jquery'), '1.0' );
   	wp_enqueue_script('admin_js');
   }
   add_action('admin_enqueue_scripts', 'load_custom_wp_admin_scripts');

7. Danach folgt der Code für den Ajax Request. Damit das ganze auch sicher ist, setze ich auf die WordPress wp_ajax_… Funktion. Diese muss gleich heißen wie die action in unserem JavaScri, also “jsonAutocomplete”. Danach initalisieren wir eine Query auf die Posts, hier kann bei Bedarf auch ein Custo Post Type mitgegeben werden. Wir verarbeiten den Feldnamen des Custom Fields und holen dessen Werte aus der Datenbank.

   //ajax - falls user eingeloggt ist
   add_action( 'wp_ajax_jsonAutocomplete', 'jsonAutocomplete' );
   function jsonAutocomplete() {
      if(!isset($_POST['action']))
   		die();
   
   	$action = $_POST['action'];
           $term = $_POST['term'];
   	$field = esc_attr($_POST['field']);
   
   	if($action=="jsonAutocomplete"&&isset($field)){
   		$the_query = new WP_Query();
                   
                   $checkArray=array(); //zum prüfen auf duplicate
   
   		$out=array();
   		// The Loop
   		while ( $the_query->have_posts() ) : $the_query->the_post();//http://www.rarst.net/images/query_functions.png
                      $obj = get_post_meta(get_the_ID(), $field,1);
                      if($obj!=""&&in_array($obj, $checkArray)==false&&strstr($obj,$term)!=false){//ist nicht leer und kein duplikat und term kommt irgendwie in obj vor
                         array_push($checkArray,$obj);
                         array_push($out,array( 'id' => get_the_ID(),"label"=> $obj, "value"=> $obj));
                     }
                   endwhile;
   
   		// Reset Post Data
   		wp_reset_postdata();
   		//wp_reset_query();
   
   		if(!empty($out)){
   			// generate the response
   			$response = json_encode( $out );
   
   			// response output
   			header( "Content-Type: application/json" );
   			echo $response;
   		}
   	}
   
       // IMPORTANT: don't forget to "exit"
       exit;
   }

8. Fertig, sollte nun bei allen MagicField Textfeldern (inputs) funktionieren. Möchte man andere Felder hinzufügen, muss man gegebenenfalls den selector in der JS Datei anpassen:  $(“.text_field_mf input”).

Im Anhang die wichtigsten Code-Ausschnitte. Ich freu mcih über Kommentare.

Download the zip: MAGIC FIELDS AUTOCOMPLETER

<iframe width="560" height="315" src="http://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe>

but WordPress prohibits the inclusion of iframes in the standard configuration.

I found an easy way to change this.

1. You have to change your function.php, so go to “Appearance” -> “Editor” and open the function.php in the integrated wordpress editor. But be careful and if you’re don’t know what you are doing, I advise you to make a backup or ask someone.
2. Look in the code if there is already a row in which the filter “add_filter(‘tiny_mce_before_init’, …); is applied. If not, add the following code:
   /*Add iframe to TinyMCE*/
function fb_change_mce_options($initArray) {
$ext = ' iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';
if ( isset( $initArray['extended_valid_elements'] ) ) {
$initArray['extended_valid_elements'] .= ',' . $ext;
} else {
$initArray['extended_valid_elements'] = $ext;
}
return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

3. That’s it. Now you can use the new Youtube integration code by posting it into an articles html.

Now that the Google+ Button is available to use, I had the idea to integrate it into my WordPress Plugin. A little bit of linklove can not be wrong and SEO is important, also to spread an open source product.
Here you can read about what to do so.

First of all, the +-Button consists of two parts:

• The plusone.js script in the html head.
  <script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
• And the button place holder
  <g:plusone size=”small” count=”false” href=”http://your-domain-to-like.com”></g:plusone>

Both parts can easily integrated with standard wordpress functions.

To add the script into the wp-admin head you can use this code:

function set_admin_header() {
  //admin Header
  wp_deregister_script(array('plusone'));
  wp_register_script( 'plusone', 'https://apis.google.com/js/plusone.js');
  if (function_exists('wp_enqueue_script')) {
    wp_enqueue_script('plusone');
  }
}
add_action('admin_init', 'set_admin_header');//admin_init, admin_head is to late

For integration in a plugin-class, use this instead:

$classObj = new myClass();
add_action('admin_init'   , array($classObj,'set_admin_header'));

Then you need to integrate the button into the plugins overview / wordpress installed plugins list.

/* Add a link to plugins page */
function set_plugin_links($links, $file) {
  $plugin = plugin_basename(__FILE__);
  if ($file == $plugin) {
    return array_merge( $links, array(
      '<g:plusone size="small" count="false" href="http://your-domain-to-like.com"></g:plusone>'
    ));
  }
  return $links;
}
add_filter( 'plugin_row_meta', 'set_plugin_links', 10, 2 );

For integration in a plugin-class, use:

$classObj = new myClass();
add_filter( 'plugin_row_meta', array($classObj,'set_plugin_links'), 10, 2 );

After all, replace “http://your-domain-to-like.com” in my code with your url.

 I hope I could help you with my short tutorial. If so, please click on my + button