I am wanting to create an effect where the viewer can hover over a button and see a before and after of the image. Specifically I want to show a person before they exercised and then the after pic. I’d also like to include a Topbox lightbox which provides a testimonial.
Currently I’ve got the Topbox working no problem. But the trigger is a static photo of the before pic and the lightbox is the after pic along with a testimonial from the client. I’d like to have the initial trigger be able to rollover when hovered over between the before and after. Sort of a quick look if that makes sense.
HoverBox can be set as a trigger for a TopBox. Some consideration has to be made towards the handling of hover effects on touch devices (devices that lack conventional mouse input). The latest version of HoverBox lets you choose in the settings how to handle the effect on touch devices - like permanently displaying the hovered or static image.
There’s a free demo version provided for download, so feel free to experiment with it and see if it comes close towards what you want to achieve.
@willwood
Hoverbox is perfect. Trying to figure out how to get it to trigger the top box content. This is how I set up so far, as it looked logical to me. But it isn’t working. Can you figure out what I did wrong? Doing it like this also kills the hover effect as well.
@willwood I’m terribly sorry but I just don’t understand what you mean exactly. I watched your video and read your webpage, but I still am confused and I’m sure it’s because I’m new to this Weaver world…
Should I keep the hover stack of the two photos in the Topbox trigger area? This makes logical sense to me. If that’s true then I need to go to the settings area for Topbox and select “custom trigger” which means I then go to the Advanced area “custom trigger:” and name this, in this case I chose .gail. When I do this the hover stack disappears and your preset text appears in the TopBox Trigger section letting me know that “This TopBox can be triggered using a custom ID…”
Since the Hover stack contains images I will logically assume that per your website instructions I need to add the code identified as “Custom Trigger… or an image” But I have no idea where to put this code. I’d like to associate it with the images in the Hover stack but like I said above they disappeared once I selected custom trigger. And honestly even if they were there I would have no idea how or where to add that code.
Sorry I’m ignorant of what is probably a very basic thing. I’m trying to learn for what it’s worth.
I think you might be over-thinking this and making it a lot more complicated than it has to be.
Start with a HoverBox stack in the page. Set the the link address of the HoverBox to simply # and give it a class attribute of something like myTopBox (you don’t want the HoverBox to link to another page and the class attribute is used as a custom trigger for the desired TopBox stack on the page). HoverBox is now your TopBox trigger. Nothing else to configure in here.
Go ahead and add a TopBox stack to the page if you’ve not done so yet. You’ll want to set the TopBox Trigger to Custom and make sure the entry against the Custom Trigger setting matches what you gave HoverBox.
The key towards getting this to work is to ensure the custom trigger (e.g. myTopBox) is the same for both the TopBox and the HoverBox. Because this is a class attribute, the custom trigger used in TopBox starts with a full stop. Other than that, they’re both identical. Standard web development practices. The flexibility exists to use ID’s or other selectors if you choose too.
Keep HoverBox outside of TopBox. Otherwise (as per my previous post) the link layer used for your Topbox trigger will smother the HoverBox stack nested below. The HoverBox stack will not then be able to receive mouse focus and the rollover effects will not work. Use the custom triggers option instead within TopBox. It’s exceptionally powerful and opens up the ability to use TopBox in various configurations, while avoiding conflicts with other stack elements.
I can’t even begin to express my appreciation and thankfulness at your excellent description of the method I needed to follow. The screen shots and written explanation were spot on and did what I needed them to do!
Will - your level of support and care for my silly issue is amazing and wonderful!
I included Dan because I’m hopeful he will mention this on the podcast and feature this testimonial on the website.
I’m floored with your response and helpfulness…
PEOPLE SPEND MONEY WITH WILL!!! You will not be disappointed!
I’ve not got much experience with using recent versions of Hype. If you’ve got something generated in Hype that you want to use in RapidWeaver, then the free Builder stack can be perfect for this:
Just paste the generated JS, CSS and HTML code into the required boxes. I know some people have used Builder stack before in conjunction with Hype, and told me it works perfectly for them. So that might be worth a try.
Yes as you’ve pointed out, HoverBox will generate full-sized layers. Possibly you can create your graphics to give the illusion of a background layer. But you would still be using two separate images. It’s not easily feasible to have the topmost layer partially obscure the bottommost layer.
The RWExtras company I have recently aquired had an old stack available called ‘animatePro’. It’s not been updated in several years and is not responsive. But it was a close comparison to some of the things you can do with Hype. When I update it and re-release it again, that might do everything (and more) you want.
Thank you so much! I woke this morning and was pleasantly surprised by the numerous responses. I’ve yet had the chance in reading and responding to them but will do so now. It’s been a slight challenge using a WYSIWYG builder as I’m used to hands-on coding, etc., a bit ironic in some aspects. Thankfully the RapidWeaver forums are extremely helpful and thank you for taking the time in helping me.
Hype 3.5 Pro has greatly improved and well worth the investment as a time saving, versatile HTML5 builder. Thanks so much for confirming it works with RW and recommending the Builder stack, a relief as I already have everything done.
Congratulations on the RWExtras acquisition and definitely keep me posted on any development with “animatePro”, I’m definitely interested.
