[jQuery + Lightbox] Lightbox via js activeren als groep

[Verwijderd]

Ik ben binnen een site bezig om een pagina te maken waarbij de achtergrond gevormd wordt door een grid van monochrome plaatjes, waarvan je de originele versie in een lightbox ziet als je er op klikt. De pagina bestaat uit de volgende stappen:

Een php script waarmee je plaatjes kan uploaden, deze worden vervolgens gekopieerd en monochroom gemaakt zodat er een monochrome thumbnail en een origineel aanwezig is (in verschillende mappen).

Een php script waar het grid dynamische mee opgebouwd wordt aan de hand van de inhoud van de folder met monochrome thumbnails. Het grid bestaat uit html code:

HTML:

<ul id="grid">
<li id="item-1">
<a id="image-1"><div id="image-placeholder-1" class="image-placeholder"></div></a>
</li>
</ul>

Het cijfer 1 in bovenstaand voorbeeld is een door php ingevulde variabele welke overeenkomt met een specifieke plaats in het grid.

Vervolgens voegt het php script de volgende js code toe:

JavaScript:

$("#image-1").attr("href", "grid/jjb2op.jpg");
$("#image-1").attr("class", "lightbox-enabled");
$("#image-1").attr("rel", "lightbox-myGroup");
$("#image-placeholder-1").css("background-image", "url(grid/output/jjb2op.jpg.png)");

Hiermee wordt dus aan de div in de html een achtergrond plaatje toegevoegd - dat is de monochrome thumbnail, er wordt een actieve lightbox groep van alle plaatjes gemaakt (ik gebruik de jQuery ballupton edition van Lightbox), en er wordt aan de <a> een href toegevoegd die naar de originele afbeelding verwijst.

Dan voeg ik nog een stukje js toe om ervoor te zorgen dat de thumbnails die achter de rest van de site liggen toch klikbaar zijn (zodat de lightbox opent als je erop klikt), en om te zorgen dat de cursor veranderd als je over zo'n thumbnail muist:

JavaScript:

$(document).ready(function(){
var x1 = $("#item-1").offset();
$(document.body).click(function(e1){
if (x1.top <= e1.pageY && x1.top+85 >= e1.pageY && x1.left <= e1.pageX && x1.left+113 >= e1.pageX) {
$.Lightbox.init(1, "lightbox-myGroup"); $.Lightbox.start()
}
});
$().mousemove(function(b1){if (x1.top <= b1.pageY && x1.top+85 >= b1.pageY && x1.left <= b1.pageX && x1.left+113 >= b1.pageX) {
$("body").css("cursor","pointer");}
if(!(x1.top <= b1.pageY && x1.top+85 >= b1.pageY && x1.left <= b1.pageX && x1.left+113 >= b1.pageX))  {
$("body").css("cursor","default");
}
});
});

Ik doe dat dus aan de hand van de coordinaten van de mouseover die ik afzet tegen de coordinaten van de afbeeldingen.

Twee dingen werken niet:
De cursor veranderd niet on mouseover.
De lightbox opent niet.

Waarom de cursor niet veranderd begrijp ik eigenlijk niet. Als ik de laatste check weghaal (de check waarbij ik aangeef dat als de cursor zich niet in een actief gebied bevind hij op default moet staan) veranderd de cursor bij de eerste mouseover in een pointer (dat werkt bij alle thumbnails), maar dan verandert hij natuurlijk nooit meer terug. De mouseover werkt dus wel, maar ik zoek nog een manier om hem terug te zetten.

De lightbox opent niet:
Het werkt wel als niet gegroepeerde lightbox als ik de lightbox-aanroep-code verander door:

JavaScript:

$(".lightbox-enabled").lightbox({start:true,events:true}); return false;

Maar de bedoeling is natuurlijk dat de boel als group opent. Bij de code zoals in het eerste voorbeeld krijg ik de volgende foutmelding:

"illegal operation on wrappednative prototype object"

Voor zover ik kan nagaan krijg je die foutmelding over het algemeen als er een conflict is tussen verschillende js libraries. Ik gebruik echter alleen jQuery. De foutmelding begrijp ik dus niet.
Ik denk dat de group-variabele niet goed wordt doorgegeven door dit stukje:

JavaScript:

$.Lightbox.init(1, "lightbox-myGroup"); $.Lightbox.start()

Maar die code heb ik rechstreeks van de support pagina van deze plugin op jquery.com: http://plugins.jquery.com/project/jquerylightbox_bal

Mijn vragen zijn:
Waarom werkt mijn cursor-verander script niet goed?
Hoe kan ik de lightbox op deze pagina als group openen?

Hier nog de url van de pagina waar het om gaat:
http://mevrouwmeijer.nu/cms/wat-weet-mevrouw-meijer/index.php

Veel dank!

[Verwijderd]

Even een fout uit de code gehaald - de div in de html van het grid vervangen door een span:

HTML:

<ul id="grid">
<li id="item-1">
<a id="image-1"><span id="image-placeholder-1" class="image-placeholder"></span></a>
</li>
</ul>

[ Voor 40% gewijzigd door Verwijderd op 02-11-2009 10:24 ]

[Verwijderd]

Opgelost:

JavaScript:

$.Lightbox.init(0, $('.lightbox-enabled')); $.Lightbox.start();

[Bosmonster]

Vervolgens voegt het php script de volgende js code toe:

Waarom doe je zo moeilijk (en inefficient) door al die attributen met javascript in te vullen? Die kun je toch met PHP dan wel direct in die elementen zetten?

[Verwijderd]

Omdat het grid achter de 'hoofd content' van de site valt, en als zodanig zijn de elementen dus niet direct klikbaar. Dus moet ik met coordinaten afvangen en js werken. Of maak ik een denkfout?