Large picture placed on page with scrollbars to view all

Is there a way to put a picture into a say 900 pixel scroll box?

I have a jpeg map that is too large for the page to view and don’t want to divide it up.
If you shrink the image, the graphics & text will be too small.

(Note this will be on a single device at 960 width and not meant for public view. Have property for sale and only potential customers will view)

@golden1one, I would either lay the picture as is on the web page or turn it into a pdf and link it to a “View Map” button.

Why not simply embed a google map into an HTML page and leave the map app to do the rest?

1 Like

Hi grenskin, That may work. I made the PDF of the map. I understand making a button to point & open a PDF file (or download). I know I have viewed a PDF file online at web sites quite a few times. Right now I need to figure out how to put the PDF file on a Sparkle page. The documentation has no help on that as yet. At least the PDF should have the scroll bars to view all of it.
Thank you for the help.

Hi francbrowne, the map has overlaid boundaries, markers, monuments, etc that would not be on a Google map. Would have been nice.
Thank you for your time.

@golden1one, You would need to assign your preferred button…

Most browsers will load the pdf into a preview window and from there, if the User wishes, they can download the pdf map.

As @greenskin notes the google map works extremely well and have used it frequently. It is very developed and imbed offers no problem.
-w

Hi greenskin, yes most will show a pdf and give an opportunity to download it. What places the pdf on the page and do you have to make a new page to put it on? It would be really nice if it worked like Google Maps; place on page, size the way you want and have scroll bars to see any part.

Hi Woodrow, that would be great if (and what I would like to have) it was just a plain map. There is quite a few things overlaid in the map that is not available with Google Maps.

@golden1one, Mmm… You are not able to place a pdf onto the Sparkle canvas, but you can link to a pdf.

Maybe convert your 1 page map pdf to a jpg and use the click even “lightbox” so it expands open to a larger viewable image. Overall this would have limitations on the smaller devices so the best way would be to link the map pdf to a click event and allow it to open in the browser for the best user-experience.

greenskin, that sounds like the pdf will reside in my ftp and the button will open the pdf in the browser itself. Ok I’ll work on that, thanks!

1 Like

@golden1one, You can also have the pdf as part of your Sparkle document which would be a better idea. That way you wouldn’t have to fuss over on-server FTP.

Text is the only content Sparkle can make scrollable.

The easiest way to solve your problem is to convert the JPG or PDF to a vector file. For Sparkle this would be SVG. Affinity Designer, Affinity Publisher, and Adobe Illustrator would be your best Mac based App options. There are Web tools that can do this too, but they are limited. Once you have the SVG file, you can size as needed in the Sparkle canvas.

You can use other software to create a scrollable PDF in an iFrame and embed it in Sparkle. But that’s a lot more work.

@golden1one

Hello.
You could also put a large image in a “Popup” and set it to “Modal / Lightbox” and then it becomes scrollable … with these settings:

1 Like

greenskin > Thanks!

thetravelhikelife, I am familiar with SVG’s and Illustrator. The map is so complicated getting it into a SVG would be some work, but that sounds like an alternative if other things do not work out. Thank you.

Shadowfax, that really sounds good. I did make a popup, placed the map inside, but do not know how to exit. What I mean is everything behind the popup is grayed out and even if I “save” the Sparkle web page it disappears. Just blank. I started over a few times, but have not found a way to keep it. Will not let me preview it either.

Hello @golden1one

Maybe the documentation can help:

https://sparkleapp.com/docs/popups.html

Within the popup you need a “close button”, so a site visitor can close the popup in the browser.

While you are working in Sparkle, you can close the popup via the tool bar:

Screenshot

Or you select a different object in the “Layers” panel, that will also close the popup.

I hope this helps.

Hi Shadowfax, Seems I might be at fault.
First I have a Sparkle Pro Lic since mid 2018. Seems since I do not see the tool bar “Close” as in your screenshot and have run around in circles. I checked and it seems I am running version 3.0.8 am not licensed for v3. There is padlocks in the icons popup & seo. Maybe the whole time I have been having problems it I have to upgrade for another $59.99 to make this work. I’ll consider upgrading to have this one item (map) working. Thank you for all your time. Sorry.

Hello @golden1one

You’re welcome. No need to apologise. :relaxed:

Yes, that could be the reason why you can’t continue with popups. If you see padlocks, that could mean your current license does not cover all the new features of Sparkle 3.

You can check with @duncan

Yes the popup is part of the v3 upgrade.

Hi Shadowfax, I upgraded.

I appreciate your help thanks.
I made an image button to open the popup (Modal/Lightbox) and one to close. That went ok. The picture is larger in width than the 960 pixels as I mentioned. The picture is at full resolution which is great. I can scroll up and down.
Unfortunately I have not figured how to get scroll bars for the left / right.

So far it seems once you make a popup and close it, you never see it again, nor are able to recall it up except when you attach it to an image or button and preview it. Also cannot remove all the Popup 1-7 (they kept disappearing) that I do not need. If I need to adjust something, I will just make another. That’s ok.

Hello @golden1one

If you need a larger width than the 960 pixels, you have to add another device layout, the “Wide Desktop PCs” layout, that is 1200 pixels wide.
That is the largest layout that Sparkle will allow.

You can find all the popups that you created in the “Layers” panel on the left side of the window.

There you can select and delete them.

Great thank you Shadowfax. Layers
Thanks Duncan, Sparkle has always been great from the start.