Need help to call fancy box from wayfinder

Hi,
I want to call fancy box from a wayfinder link. I have tried but didnot get any success. Can any one suggest me how I can do that.

My fancy box call is

$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : '#data',
padding : 5
});
});



<a id="fancybox-manual-b" href="javascript:;">Open single item, custom options</a>


This is working fine with above link but I am not able to call it from way finder link.

Please help.

Thanks in advance

Do you wish to apply this to some links in Wayfinder or to all links in the Wayfinder menu?
If to more than one link, then I would use class="" instead of id="" in the code I am checking out now... [ed. note: donshakespeare last edited this post 13 years, 5 months ago.]

To reproduce

Where 234 is the id of the weblink resource
For the weblink url, just type in this: javascript:;


In your Wayfinder rowTpl throw this in

Note! all the links in your menu will then have an id="fancybox-manual-[[their-id]]" set.
So you can use jQuery to do what you want. Affect multiple or all the links.

Thanks for your reply.

Basically my main menu is also done by wayfinder and that is working fine and I donot want that menu to get effected.

But my other menu which will call the jQuery. So if there is any way out for that.


Thank you



Quote from: donshakespeare at May 01, 2013, 02:10 PM

To reproduce

<a id="fancybox-manual-234" href="javascript:;">Open single item, custom options</a>

Where 234 is the id of the weblink resource
For the weblink url, just type in this: javascript:;


In your Wayfinder rowTpl throw this in

<li class="[[+wf.classnames]]">
<a id="fancybox-manual[[+wf.docid]]" href="[[+wf.link]]"> [[+wf.linktext]]</a>
[[+wf.wrapper]]</li>

Note! all the links in your menu will then have an id="fancybox-manual-[[their-id]]" set.
So you can use jQuery to do what you want. Affect multiple or all the links.

$("#fancybox-manual-234").click(function() {
$.fancybox.open({
href : '#data',
padding : 5
});
});

If I can trigger any javascript from resource.Quote from: pronab.saha at May 02, 2013, 01:57 AM

Thanks for your reply.

Basically my main menu is also done by wayfinder and that is working fine and I donot want that menu to get effected.

But my other menu which will call the jQuery. So if there is any way out for that.


Thank you



Quote from: donshakespeare at May 01, 2013, 02:10 PM

To reproduce

<a id="fancybox-manual-234" href="javascript:;">Open single item, custom options</a>

Where 234 is the id of the weblink resource
For the weblink url, just type in this: javascript:;


In your Wayfinder rowTpl throw this in

<li class="[[+wf.classnames]]">
<a id="fancybox-manual[[+wf.docid]]" href="[[+wf.link]]"> [[+wf.linktext]]</a>
[[+wf.wrapper]]</li>

Note! all the links in your menu will then have an id="fancybox-manual-[[their-id]]" set.
So you can use jQuery to do what you want. Affect multiple or all the links.

$("#fancybox-manual-234").click(function() {
$.fancybox.open({
href : '#data',
padding : 5
});
});

The footer links where I want to call this fancy box are done with this code

footer_nav_column_last_tpl

<span class="nav-group">
<ul>
<li><a href="[[~[[+id]]]]">[[+pagetitle]]</a>
[[Wayfinder? &startId=`[[+id]]` &level=`1` &sortBy=`menuindex` &sortOrder=`DESC`]]
</li>

</ul>
</span>



$tpl = 'footer_nav_column_tpl';
$tplLast = 'footer_nav_column_last_tpl';
$params = array(
'tpl' => $tpl,
'resources' => $documents,
'sortDir' => 'ASC',
'tplLast' => $tplLast,
'level' => 2,
'parents' => -1,
);
return $modx->runSnippet('getResources', $params);


Can I modify this to add that fancy box trigger.


Quote from: pronab.saha at May 02, 2013, 03:37 AM

If I can trigger any javascript from resource.Quote from: pronab.saha at May 02, 2013, 01:57 AM

Thanks for your reply.

Basically my main menu is also done by wayfinder and that is working fine and I donot want that menu to get effected.

But my other menu which will call the jQuery. So if there is any way out for that.


Thank you



Quote from: donshakespeare at May 01, 2013, 02:10 PM

To reproduce

<a id="fancybox-manual-234" href="javascript:;">Open single item, custom options</a>

Where 234 is the id of the weblink resource
For the weblink url, just type in this: javascript:;


In your Wayfinder rowTpl throw this in

<li class="[[+wf.classnames]]">
<a id="fancybox-manual[[+wf.docid]]" href="[[+wf.link]]"> [[+wf.linktext]]</a>
[[+wf.wrapper]]</li>

Note! all the links in your menu will then have an id="fancybox-manual-[[their-id]]" set.
So you can use jQuery to do what you want. Affect multiple or all the links.

$("#fancybox-manual-234").click(function() {
$.fancybox.open({
href : '#data',
padding : 5
});
});

For your second Wayfinder call create another rowTpl chunk, call it rowTpl2 with this content This will apply the fancybox effect to only the links in the second Wayfinder call.