▼
Streaming live at 10am (PST)

Trying to generate a link from a slide to point to via image hotspots

Design help General
#1

I am trying to link hotspots to a custom popup modal that has an image slider within the modal so when the user clicks on a specific image hotspot it takes the user to the exact image they clicked on. In a nut shell, I just want the popup modal image slider to open up to the user’s click and then be able to slide through the rest of the images as well.

Here is how i am trying to do it now - Using Dreamweaver I input an image (example below) and then make my hotspots around the text labels shown however, I need the hotspot to point to a url and I can’t figure out how to extract a link from a slider image for the hotspot to point to…

E-Enclosure-Graphic_1.png1000×940 137 KB

Is it possible to extract a url or otherwise something to get the hotspots to point in the correct spot?
Capture.PNG1034×612 255 KB

Here is my public share link: https://preview.webflow.com/preview/glcac?preview=646d71e490397efbb06c7b09465b4b49

#2

image hotspots is an old method. It was really called “imagemaps”.

I would suggest using a background image and overlay it was elements that are position absolute.

The reason why the imagemap method isn’t used is because it is not SEO friendly. Text in images cannot be read by search engines.

Hope this helps :slight_smile:

1 Like
#3

Hello, @Brian_M_Fromknecht

I do not know how to get link to certain slide in the slider, but in you situation, I would use lightboxes, connected in one group, so there would be option to slide through other images.

1 Like
#4

i still have the same problem though. Using hotspots or imagemaps I don’t know of a way to generate specific links from a light box or image slider. i guess that is the real issue at hand…

#5

if i use this method of using the image as a background and then placing absolute link blocks over the text won’t the positioned link blocks be thrown off by the different viewport sizes? Even if i design a separate view for each device i still will have little to no control of where the positioned link blocks will land on the user’s device, right?

#6

With standard Webflow lightboxes you don’t need to know specific link to each lightbox.

How I would do this:

  1. each lightbox contain media image
  2. remove thumbnail and add the text instead
  3. add all lightboxes in the same group

Here is example of the result: http://video-gallery-experiment.webflow.io/categories/architecture

1 Like
#7

I tried this before however, but I was not able to position the links to the lightboxes in such a way that when the screen resizes - the links will follow staying in the same defined area??? I guess that is my real issue - getting the links to stay would they should no matter the scale of the image…

#8

Well, it is probably the hardest part of this case. Did you use % in the absolute positioning?

1 Like
#9

I did not try using percentages for the positioning. Lemme give it a go and see what I come up with. Thanks @sabanna I will let ya know how it pans out hopefully later today. Stay tuned… :slight_smile:!

1 Like
#10

@sabanna
This is the problem i keep running into. As the viewport resizes the lightbox links do not follow suite. i used percentages as well… The links work fine until I resize my screen. Any ideas???

#11

I will take a look a little bit later, if it can wait. Currently without computer.

1 Like
#12

Roger that @sabina - Thanks again for all your help with this issue that has plagued me for far too long! Talk soon!

#13

Ok, I found at least one reason why you could not keep lightboxes in the correct position.

Since they are absolute positioned, there should be a parent with relative position. The perfect solution is the parent with fixed size. In your case, it is a container. Change its setting to the position: relative and adjust each lightbox link relatively to that container edges. It will keep your lightboxes in the same position on all desktop screens.

With Tablet view you can do the same, only adjust lightbox positions because container probably will be smaller.

With mobile view it will not work, since you have many links and image will be pretty small.

Regards,
Anna

1 Like
#14

I’ll give it a go and let ya know what I come up with! This may take a while…
Thanks @sabanna!

1 Like
#15

Hi Sabanna,

How are you?

I was looking for this but i don´t know how to add text inside the slide, is there any trick?.

thanks for your help.
@sabanna

#16

Hey Brian,

Just wonder, how did you manage to put text inside de light boxes pop up?

thanks @Brian_M_Fromknecht

#17

the lightbox is actually an image along with the text. i didn’t use the captions option. All the images within the the pop up lightboxes were made in PhotoShop. Hope that helps @Dave01

#18

Thanks, i just wondering how to include text but it seems very difficult…

#19

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.