Lightbox Problem (gelöst)

This article is also available in: English

Schon seit ich WordPress 2.7 benutze habe ich ein Problem damit Lightbox 2 zum laufen zu kriegen.
Nach ewigem Recherieren, stundenlangem Herumprobieren, habe ich herausgefunden woran es liegt: am Theme. Ich benutze SimpleX.
Dieses Theme lädt eine Version von jQuery und benutzt ein Objekt mit der Variablen $.

$(function(){
var tabContainers = $(‘div#maintabdiv > div’);
tabContainers.hide().filter(‘#comments’).show();

$(‘div#maintabdiv ul#tabnav a’).click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$(‘div#maintabdiv ul#tabnav a’).removeClass(‘current’);
$(this).addClass(‘current’);
return false;
}).filter(‘#comments’).click();

});

Das Problem dabei: Lightbox benutzt diese Variable ebenfalls!
Wie ist das Problem zu lösen? Variable umbenennen:

mjq(function(){
var tabContainers = mjq(‘div#maintabdiv > div’);
tabContainers.hide().filter(‘#comments’).show();

mjq(‘div#maintabdiv ul#tabnav a’).click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
mjq(‘div#maintabdiv ul#tabnav a’).removeClass(‘current’);
mjq(this).addClass(‘current’);
return false;
}).filter(‘#comments’).click();

});

Einfach die Datei /wp-content/themes/simplex/header.php bearbeiten und den ersten durch den von mir zweiten genannten Text ersetzen.

Dann muss noch der von SimpleX mitgelieferten jQuery mitgeteilt werden, dass sie nicht mehr nach $ sondern nach mjq suchen soll. Dazu die Datei /wp-content/themes/simplex/js/jquery-1.2.6.min.js (o.Ä.) bearbeiten und folgendes ersetzen:

var _jQuery=window.jQuery,_$=window.$;durchvar _jQuery=window.jQuery,_mjq=window.mjq;
var jQuery=window.jQuery=window.$=function(selector,context)durchvar jQuery=window.jQuery=window.mjq=function(selector,context)
window.$=_$;durchwindow.mjq=_mjq;

Danach funktionieren die Lightbox Plugins und das Theme problemlos miteinander!

Angehängte Dateien
mod_simplex_files

This entry was posted on Samstag, Mai 23rd, 2009 at 14:43 and is filed under code. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  1. Christian sagt:
    05.30.2009 um 03:12

    hi, das Problem lässt sich viel einfacher lösen. Es muss nur der no-conflict Mode von JQuery aktiviert werden.

    jQuery.noConflict();

    $(function(){
    var tabContainers = $('div#maintabdiv > div');
    tabContainers.hide().filter('#comments').show();

    $('div#maintabdiv ul#tabnav a').click(function () {
    tabContainers.hide();
    tabContainers.filter(this.hash).show();
    $('div#maintabdiv ul#tabnav a').removeClass('current');
    $(this).addClass('current');
    return false;
    }).filter('#comments').click();

    });

    lg. Christian

  2. Christian sagt:
    05.30.2009 um 06:33

    Sorry, das war zu schnell … so gehts:

    jQuery.noConflict();

    jQuery(document).ready(function($){

    var tabContainers = $(‘div#maintabdiv > div’);
    tabContainers.hide().filter(‘#comments’).show();

    $(‘div#maintabdiv ul#tabnav a’).click(function () {
    tabContainers.hide();
    tabContainers.filter(this.hash).show();
    $(‘div#maintabdiv ul#tabnav a’).removeClass(‘current’);
    $(this).addClass(‘current’);
    return false;
    }).filter(‘#comments’).click();

    });

  1. There are no trackbacks for this post yet.

Leave a Reply