[xwiki-devs] Using Lightbox Application with syntax 2.0 page
I'm trying to use http://code.xwiki.org/xwiki/bin/view/Applications/LightboxApplication, but encountered an issue with the WYSIWYG editor. When I input the following code in the SOURCE mode and afterward switch to WYSIWYG mode and then switch back, some garbage is appended at the end. {{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}} Switching back to SOURCE mode, it becomes: {{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}} (% id="overlay" style="display: none;" %) ((( ))) (% id="lightbox" style="display: none;" %) ((( (% id="outerImageContainer" style="width: 250px; height: 250px;" %) ((( (% id="imageContainer" %) ((( (% id="hoverNav" %) ((( [[#||id="prevLink"]][[#||id="nextLink"]] ))) (% id="loading" %) ((( [[image:/xwiki/bin/download/XWiki/Lightbox/loading.gif]][[#||id="loadingLink"]] ))) ))) ))) (% id="imageDataContainer" %) ((( (% id="imageData" %) ((( (% id="imageDetails" %) ((( ))) (% id="bottomNav" %) ((( [[image:/xwiki/bin/download/XWiki/Lightbox/closelabel.gif]][[#||id="bottomNavClose"]] ))) ))) ))) ))) Question1 : Do you have any idea how to fix it? Question2 : A suggestion. Lightbox is really a great extension. So I think the standard [[image:picture.png||width="25" height="25"]] should do something similar. WDYT? -- -- Currahee! We stand alone together!
Hi Zhaolin, On Fri, Nov 13, 2009 at 7:36 PM, Zhaolin Feng <[email protected]>wrote:
I'm trying to use http://code.xwiki.org/xwiki/bin/view/Applications/LightboxApplication, but encountered an issue with the WYSIWYG editor.
When I input the following code in the SOURCE mode and afterward switch to WYSIWYG mode and then switch back, some garbage is appended at the end. {{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
Switching back to SOURCE mode, it becomes:
{{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
(% id="overlay" style="display: none;" %) (((
)))
(% id="lightbox" style="display: none;" %) ((( (% id="outerImageContainer" style="width: 250px; height: 250px;" %) ((( (% id="imageContainer" %) ((( (% id="hoverNav" %) ((( [[#||id="prevLink"]][[#||id="nextLink"]] )))
(% id="loading" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/loading.gif]][[#||id="loadingLink"]] ))) ))) )))
(% id="imageDataContainer" %) ((( (% id="imageData" %) ((( (% id="imageDetails" %) (((
)))
(% id="bottomNav" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/closelabel.gif]][[#||id="bottomNavClose"]] ))) ))) ))) )))
Question1 : Do you have any idea how to fix it?
I'm not sure. I think this is caused by the fact that the JS code gets executed and the WYSIWYG retrieves and stores the HTML output generated by the lightbox on the fly. A potential solution could be for you to edit your code pages in wiki edition mode and then to include them in other pages using the {{include document="MyCodePage"}} macro so that they don't get executed in your current page in WYSIWYG edition mode. Let me know if it works. Question2 : A suggestion. Lightbox is really a great extension. So I
think the standard [[image:picture.png||width="25" height="25"]] should do something similar. WDYT?
Could be an optional parameter of the image syntax. In the meanwhile you could write a {{lightbox}} macro using the wiki macro creation feature. It would be very easy to use for your users. Guillaume
-- -- Currahee! We stand alone together! _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Guillaume Lerouge Product Manager - XWiki SAS Skype: wikibc Twitter: glerouge http://guillaumelerouge.com/
Hi Zhaolin, On Fri, Nov 13, 2009 at 7:36 PM, Zhaolin Feng <[email protected]>wrote:
I'm trying to use http://code.xwiki.org/xwiki/bin/view/Applications/LightboxApplication, but encountered an issue with the WYSIWYG editor.
When I input the following code in the SOURCE mode and afterward switch to WYSIWYG mode and then switch back, some garbage is appended at the end. {{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
Actually there's a simple fix for your issue: simply add the following check before your code: {{velocity output="false"}} #if($context.action != 'edit') $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") #end {{/velocity}} And it will work fine. Guillaume
Switching back to SOURCE mode, it becomes:
{{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
(% id="overlay" style="display: none;" %) (((
)))
(% id="lightbox" style="display: none;" %) ((( (% id="outerImageContainer" style="width: 250px; height: 250px;" %) ((( (% id="imageContainer" %) ((( (% id="hoverNav" %) ((( [[#||id="prevLink"]][[#||id="nextLink"]] )))
(% id="loading" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/loading.gif]][[#||id="loadingLink"]] ))) ))) )))
(% id="imageDataContainer" %) ((( (% id="imageData" %) ((( (% id="imageDetails" %) (((
)))
(% id="bottomNav" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/closelabel.gif]][[#||id="bottomNavClose"]] ))) ))) ))) )))
Question1 : Do you have any idea how to fix it? Question2 : A suggestion. Lightbox is really a great extension. So I think the standard [[image:picture.png||width="25" height="25"]] should do something similar. WDYT?
-- -- Currahee! We stand alone together! _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Guillaume Lerouge Product Manager - XWiki SAS Skype: wikibc Twitter: glerouge http://guillaumelerouge.com/
On 11/13/09 8:42 PM, Guillaume Lerouge wrote:
Hi Zhaolin,
On Fri, Nov 13, 2009 at 7:36 PM, Zhaolin Feng<[email protected]>wrote:
I'm trying to use http://code.xwiki.org/xwiki/bin/view/Applications/LightboxApplication, but encountered an issue with the WYSIWYG editor.
When I input the following code in the SOURCE mode and afterward switch to WYSIWYG mode and then switch back, some garbage is appended at the end. {{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
Actually there's a simple fix for your issue: simply add the following check before your code:
{{velocity output="false"}} #if($context.action != 'edit') $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") #end {{/velocity}}
And it will work fine.
Actually no, that will not work :) WYSIWYG renders the content in view mode (- in an iframe, and activates the contentEditable mode in that frame). Jerome.
Guillaume
Switching back to SOURCE mode, it becomes:
{{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
(% id="overlay" style="display: none;" %) (((
)))
(% id="lightbox" style="display: none;" %) ((( (% id="outerImageContainer" style="width: 250px; height: 250px;" %) ((( (% id="imageContainer" %) ((( (% id="hoverNav" %) ((( [[#||id="prevLink"]][[#||id="nextLink"]] )))
(% id="loading" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/loading.gif]][[#||id="loadingLink"]] ))) ))) )))
(% id="imageDataContainer" %) ((( (% id="imageData" %) ((( (% id="imageDetails" %) (((
)))
(% id="bottomNav" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/closelabel.gif]][[#||id="bottomNavClose"]] ))) ))) ))) )))
Question1 : Do you have any idea how to fix it? Question2 : A suggestion. Lightbox is really a great extension. So I think the standard [[image:picture.png||width="25" height="25"]] should do something similar. WDYT?
-- -- Currahee! We stand alone together! _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
Hi, On Fri, Nov 13, 2009 at 9:46 PM, Jerome Velociter <[email protected]> wrote:
On 11/13/09 8:42 PM, Guillaume Lerouge wrote:
Hi Zhaolin,
On Fri, Nov 13, 2009 at 7:36 PM, Zhaolin Feng<[email protected] wrote:
I'm trying to use http://code.xwiki.org/xwiki/bin/view/Applications/LightboxApplication, but encountered an issue with the WYSIWYG editor.
When I input the following code in the SOURCE mode and afterward switch to WYSIWYG mode and then switch back, some garbage is appended at the end. {{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
Actually there's a simple fix for your issue: simply add the following check before your code:
{{velocity output="false"}} #if($context.action != 'edit') $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") #end {{/velocity}}
And it will work fine.
Actually no, that will not work :)
WYSIWYG renders the content in view mode (- in an iframe, and activates the contentEditable mode in that frame).
Really? How do you explain the "edit" I see on http://guillaume.myxwiki.org/xwiki/bin/edit/Main/SomeTestPage?editor=wysiwyg while http://guillaume.myxwiki.org/xwiki/bin/view/Main/SomeTestPage renders "view" then? You can check the code on http://guillaume.myxwiki.org/xwiki/bin/view/Main/SomeTestPage?viewer=code I tested my fix before suggesting it ;-) Guillaume Jerome.
Guillaume
Switching back to SOURCE mode, it becomes:
{{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
(% id="overlay" style="display: none;" %) (((
)))
(% id="lightbox" style="display: none;" %) ((( (% id="outerImageContainer" style="width: 250px; height: 250px;" %) ((( (% id="imageContainer" %) ((( (% id="hoverNav" %) ((( [[#||id="prevLink"]][[#||id="nextLink"]] )))
(% id="loading" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/loading.gif]][[#||id="loadingLink"]]
))) ))) )))
(% id="imageDataContainer" %) ((( (% id="imageData" %) ((( (% id="imageDetails" %) (((
)))
(% id="bottomNav" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/closelabel.gif]][[#||id="bottomNavClose"]]
))) ))) ))) )))
Question1 : Do you have any idea how to fix it? Question2 : A suggestion. Lightbox is really a great extension. So I think the standard [[image:picture.png||width="25" height="25"]] should do something similar. WDYT?
-- -- Currahee! We stand alone together! _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Guillaume Lerouge Product Manager - XWiki SAS Skype: wikibc Twitter: glerouge http://guillaumelerouge.com/
On 11/13/09 11:19 PM, Guillaume Lerouge wrote:
Hi,
On Fri, Nov 13, 2009 at 9:46 PM, Jerome Velociter<[email protected]> wrote:
On 11/13/09 8:42 PM, Guillaume Lerouge wrote:
Hi Zhaolin,
On Fri, Nov 13, 2009 at 7:36 PM, Zhaolin Feng<[email protected] wrote:
I'm trying to use http://code.xwiki.org/xwiki/bin/view/Applications/LightboxApplication, but encountered an issue with the WYSIWYG editor.
When I input the following code in the SOURCE mode and afterward switch to WYSIWYG mode and then switch back, some garbage is appended at the end. {{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
Actually there's a simple fix for your issue: simply add the following check before your code:
{{velocity output="false"}} #if($context.action != 'edit') $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") #end {{/velocity}}
And it will work fine.
Actually no, that will not work :)
WYSIWYG renders the content in view mode (- in an iframe, and activates the contentEditable mode in that frame).
Really?
How do you explain the "edit" I see on http://guillaume.myxwiki.org/xwiki/bin/edit/Main/SomeTestPage?editor=wysiwyg while http://guillaume.myxwiki.org/xwiki/bin/view/Main/SomeTestPage renders "view" then?
You can check the code on http://guillaume.myxwiki.org/xwiki/bin/view/Main/SomeTestPage?viewer=code
I tested my fix before suggesting it ;-)
Hehe :) My bad, forget what I said. Jerome.
Guillaume
Jerome.
Guillaume
Switching back to SOURCE mode, it becomes:
{{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
(% id="overlay" style="display: none;" %) (((
)))
(% id="lightbox" style="display: none;" %) ((( (% id="outerImageContainer" style="width: 250px; height: 250px;" %) ((( (% id="imageContainer" %) ((( (% id="hoverNav" %) ((( [[#||id="prevLink"]][[#||id="nextLink"]] )))
(% id="loading" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/loading.gif]][[#||id="loadingLink"]]
))) ))) )))
(% id="imageDataContainer" %) ((( (% id="imageData" %) ((( (% id="imageDetails" %) (((
)))
(% id="bottomNav" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/closelabel.gif]][[#||id="bottomNavClose"]]
))) ))) ))) )))
Question1 : Do you have any idea how to fix it? Question2 : A suggestion. Lightbox is really a great extension. So I think the standard [[image:picture.png||width="25" height="25"]] should do something similar. WDYT?
-- -- Currahee! We stand alone together! _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
Thank you. I adopted both of your suggestions. in XWiki.Lightbox: {{velocity output="false"}} #if($context.action != 'edit') $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") #end {{/velocity}} When used in pages, add: {{include document="XWiki.Lightbox" /}} And I've updated it in the code.xwiki.org. On Sat, Nov 14, 2009 at 6:23 AM, Jerome Velociter <[email protected]> wrote:
On 11/13/09 11:19 PM, Guillaume Lerouge wrote:
Hi,
On Fri, Nov 13, 2009 at 9:46 PM, Jerome Velociter<[email protected]> wrote:
On 11/13/09 8:42 PM, Guillaume Lerouge wrote:
Hi Zhaolin,
On Fri, Nov 13, 2009 at 7:36 PM, Zhaolin Feng<[email protected] wrote:
I'm trying to use http://code.xwiki.org/xwiki/bin/view/Applications/LightboxApplication, but encountered an issue with the WYSIWYG editor.
When I input the following code in the SOURCE mode and afterward switch to WYSIWYG mode and then switch back, some garbage is appended at the end. {{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
Actually there's a simple fix for your issue: simply add the following check before your code:
{{velocity output="false"}} #if($context.action != 'edit') $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") #end {{/velocity}}
And it will work fine.
Actually no, that will not work :)
WYSIWYG renders the content in view mode (- in an iframe, and activates the contentEditable mode in that frame).
Really?
How do you explain the "edit" I see on http://guillaume.myxwiki.org/xwiki/bin/edit/Main/SomeTestPage?editor=wysiwyg while http://guillaume.myxwiki.org/xwiki/bin/view/Main/SomeTestPage renders "view" then?
You can check the code on http://guillaume.myxwiki.org/xwiki/bin/view/Main/SomeTestPage?viewer=code
I tested my fix before suggesting it ;-)
Hehe :)
My bad, forget what I said.
Jerome.
Guillaume
Jerome.
Guillaume
Switching back to SOURCE mode, it becomes:
{{velocity output="false"}} $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js") $xwiki.ssx.use("XWiki.Lightbox") $xwiki.jsx.use("XWiki.Lightbox") {{/velocity}}
(% id="overlay" style="display: none;" %) (((
)))
(% id="lightbox" style="display: none;" %) ((( (% id="outerImageContainer" style="width: 250px; height: 250px;" %) ((( (% id="imageContainer" %) ((( (% id="hoverNav" %) ((( [[#||id="prevLink"]][[#||id="nextLink"]] )))
(% id="loading" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/loading.gif]][[#||id="loadingLink"]]
))) ))) )))
(% id="imageDataContainer" %) ((( (% id="imageData" %) ((( (% id="imageDetails" %) (((
)))
(% id="bottomNav" %) (((
[[image:/xwiki/bin/download/XWiki/Lightbox/closelabel.gif]][[#||id="bottomNavClose"]]
))) ))) ))) )))
Question1 : Do you have any idea how to fix it? Question2 : A suggestion. Lightbox is really a great extension. So I think the standard [[image:picture.png||width="25" height="25"]] should do something similar. WDYT?
-- -- Currahee! We stand alone together! _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- -- Currahee! We stand alone together!
participants (3)
-
Guillaume Lerouge -
Jerome Velociter -
Zhaolin Feng