-
Posts
-
Hi. Our client has a single image at the top of his site gochronicle.com. The image has a number of places (e.g. track it, act on it, succeed where he wants to show text or an image in a lightbox when the user clicks that spot.
I did something similar to this several years ago with an image map to define the trigger areas and some javascript to reveal a hidden div when the user clicked the trigger. It seems to me there must be an easier way now…
I’m thinking about absolutely positioned elements with rel=”lightbox”, does that sound like it would work? Or do you have an alternative to suggest?
submitted by Chuck Gregory, developer for Barbara Deckmeyer
Hey BarbaraD!
Thank you for using the theme.
You can actually use the full screen slider to achieve this. Add an image which will act as the background then separate the button or graphics that you want to be clickable. Use the Caption Text field to add these buttons. Something like this:
<a href="LIGHTBOX IMAGE URI HERE" id="image-1"><img src="GRAPHIC URI HERE" /></a> <a href="LIGHTBOX IMAGE URI HERE" id="image-2"><img src="GRAPHIC URI HERE" /></a>Use this on Quick CSS to remove the default background of the caption:
.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title { background: transparent; }If you noticed, we added an id for each image. Use this to adjust the position of the button:
a#image-1 { top: 20px; left: -50px; } a#image-1 { top: -20px; left: 50px; }Cheers!
Ismaelwhy not use the advanced layer slider
than you had the advantage of buttons in motion :lol:
you can create every png you want and choose a link on that layer, or have some text-layers with rounded corners, custom background etc.
you can set on the layer an id or class – so you can figure out some hover-effects for it.This could replace a hole navigation!
Hey!
You need to set position: absolute to the trigger:
#trackit-trigger { position: absolute; }Regards,
JosueWell, josue, that was a pretty obvious mistake wasn’t it?!?!?!
thanks.
Although that allowed me to move the trackit-trigger around, the containing div was neither full size nor in the right place. I had to do quite a bit more before I could achieve what I needed:#full_slider_1 ul.avia-slideshow-inner {position:relative;width:100%;height:100%;}
#full_slider_1 div.container.caption_container {position:relative;width:100%;height:100%;margin:0;left:0;}
#full_slider_1 div.slideshow_caption {position:relative;width:100%;height:100%;}
#full_slider_1 div.slideshow_inner_caption {position:relative;width:100%;height:100%;}
#full_slider_1 div.slideshow_align_caption {position:relative;width:100%;height:100%;}
#full_slider_1 div.avia-caption-content {position:relative;width:100%;height:100%;}a#trackit-trigger{position:absolute;top:33%;left:37%;width:8%;height:20%;background-color:white;}
This seems to work pretty well. Tracking between sizes isn’t 100% reliable but close. I would appreciate any further recommendations, but I think I’ve pretty much got it at this point.
- The topic ‘Need to add several lightboxex triggered by clicking at hotspots’ is closed to new replies.