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…
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.
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…
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?
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…
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… !
@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???
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.
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