Ingevoegde afbeeldingen automatisch Fancybox

[timdebuurman]

Hoi,

Ik zou graag (met jquery) een afbeelding welke met TinyMCE editor ingevoegd wordt automatisch met Fancybox maken.
Iemand hoeft dan alleen een afbeelding in t voegen waardoor deze automatisch als Fancybox op geklikt kan worden.

Voorbeeld:
<img src="mapnaam/afbeelding.jpg" width="300" height="200">

moet worden:
<a href="mapnaam/afbeelding.jpg" class="fancybox" rel="group">
<img src="mapnaam/afbeelding.jpg" width="300" height="200">
</a>

Het volgende moet dus gebeuren:

- Afbeelding moet gevonden worden
- de src moet gevonden/opgeslagen worden
- de <a href, met de class en group moet ervoor worden gezet
- de </a> moet erachter worden gezet
- in de ahref moet de verwijzing gevuld worden met de opgeslagen src

Ervan uitgaande dat de afbeeldingen in een div met class 'main' staan, heb ik tot nu toe het volgende:

Code: Select all

$(".main").find("a:has(img)").addClass('fancybox');
$(".main").find("a:has(img)").attr('rel','group');   $("a.fancybox").fancybox({'transitionIn':'elastic','transitionOut':'elastic','speedIn':600,'speedOut':200,'overlayShow':false});

Maar dit gaat ervan uit dat de afbeelding al in een link staat.
De link zelf moet dus nog eerst worden toegevoegd.

Kan iemand hiermee verder helpen?

gr Tim

[Jos]

Ik weet het niet zeker, maar volgens mij kan de Toolbox module dat voor je verzorgen. dev.cmsmadesimple.org/projects/toolbox

[velden]

Ik zou de links ook gewoon met jQuery maken. En volgens mij werkt jouw opzet niet zo. Je maakt een rel="group" maar vervolgens selecteer je die met "a.group" (= class selector)

[timdebuurman]

@velden

Ja, is zo..was nog even snel een soort testcode.
Moet natuurlijk a.fancybox zijn.

Ik heb het in mijn eerste post aangepast.

Volgens mij kan ik zoiets doen:

Code: Select all

$( ".main1" ).find("img").before( '<a href="#" class="fancybox" rel="group">' );

Nu moet alleen nog de src van de img opgevangen worden en op de plaats gezet worden van de #