Wide image with pan and zoom?

Help / Discuss
#1

I have a very wide image I want on an xwiki page. Is there a way to embed the image in some kind of pan and zoom frame?

#2

Hello @AlecJames,

Is Image Lightbox Application (XWiki.org) what you are looking for?

#3

My image is very wide, when squashed into the available width the content is too small. So I want to show it bigger with a scroll bar to scroll the overflow.

I found this but I get a syntax error when I try it. my_wide_image.png is attached to the page.

{{velocity}}
#set ($width = 500) ## Change the value as needed
#set ($height = 500) ## Change the value as needed
#set ($imgurl = “$doc.getURL(‘view’, ‘xpage=plain’, ‘attachment=my_wide_image.png’)”)
#set ($img = “<img src=”$imgurl" width="$width" height="$height"/>")
#set ($css = “div.scroll {overflow: auto;}”)
#set ($div = “<div class=“scroll”>$img”)
$css$div
{{/velocity}}

Failed to execute the [velocity] macro. Cause: [Encountered “$imgurl” at xwiki:Path.To.Page.my_wide_image.png.WebHome[line 4, column 26] Was expecting one of: “||” … “)” … … … “-” … “+” … “*” … “/” … “%” … <LOGICAL_AND> … <LOGICAL_OR> … <LOGICAL_LT> … <LOGICAL_LE> … <LOGICAL_GT> … <LOGICAL_GE> … <LOGICAL_EQUALS> … <LOGICAL_NOT_EQUALS> … ]

#4

Hi @AlecJames,

I think there are a couple issues here.

  • $doc.getURL() didn’t resolve for me and I had to use $doc.getAttachmentURL() instead.
  • I don’t think you can use CSS directly in Velocity, or even in the HTML Macro, so directly adding the attribute to the div, including the size of the box on the div
  • Setting the image to be it original size inside of that new div
  • There also might be something weird with your single and double quotes, or it was just an arifact of me copying them :man_shrugging:

The below worked for me to show an oversized image inside a smaller scroll-able box. I’m not sure why but the HTML macro kept getting a in-line error until I either grouped it inside the same velocity script or moved it to it’s own velocity script.

{{velocity}}
#set ($width = 500) ## Change the value as needed
#set ($height = 500) ## Change the value as needed
#set ($imgurl = $doc.getAttachmentURL('attachment=my_wide_image.png'))
#set ($img = "<img src=$imgurl style='max-width: fit-content;max-height: fit-content'/>")
#set ($div = "<div class='scroll' style='overflow: auto;width: ${width}px;height: ${height}px;'>$img</div>")
((({{html}}
  $div
{{/html}})))
{{/velocity}}
#5

Thanks for that, now I’ve got it working.