Play Video

Create Hover effect using a hidden box vs a Wix Lightbox

Learn how to create hover effect using a hidden box vs a Wix Lightbox.  This video will demonstrate how we call a window on Wix to open up a lightbox.  You will see the difference in speed and reaction time between the code and the hidden box vs the code and the Wix lightbox. 

—————————————-

Links for this tutorial:
Tutorial Site:   https://codequeen.wixsite.com/wixrgv-home
Code: https://www.totallycodable.com/wix/corvid/open-lightbox-and-show-hide-a-hidden-element-code  

—————————————-

Join Facebook Group:  www.facebook.com/groups/wixcode
Official YouTube Website:  www.totallycodable.com
Facebook Page:  www.facebook.com/codequeen
Code Snippets: support.totallycodable.com/tutorials
Official Partners Page:  www.totallycodable.com/code-queen-partners
Contact Code Queen:  www.codequeen.co/contact
Official Wix Corvid Forum:  https://www.wix.com/corvid/profile/code-queen/profile

——————–

Totally Codable Logo by:  https://www.mattlowedesign.co.uk
Code Queen logo by:  https://www.wix.com/arena/wix-expert/sissi-wedgwood/portfolio

Video Intro by:  Code Queen

hi Nelly again this time I have somebody that wants to say hi to you before I start my video say hi hi what’s your name oh yeah and Who am I yes I’m her mommy this is the next little wicks Co genius in the making okay bye bye now so this video has been requested by lots of people and the most recent person is Toby from Australia the wicks expert so hi Toby just as promised here’s the video just for you um this is my wicks RGB website I’m a
wicks ambassador for the Rio Grande Valley so I decided to use this page as the example for what I’m about to show you so if you actually scroll down towards the middle right here in this little section there’s a via wicks partner be a venue partner and be a guest speaker well all three are actually buttons and I activated them using wicks code doing a couple of different effects so the first effect I’m gonna show you backwards I’m going to go
from the right to the left this one is actually just a regular button connected to a regular light box and like so you press on it and then a light box appears how do I know it’s a light box well light boxes are known to you know have that little nice faded out background which makes it looks really you know cute and fancy so this is a light box notice how when I hover over the clothes light box X little button thing it doesn’t change color so
let me close it out let me go back the middle button is actually connected using wicks code and I added the hide and show settings so once you click on it it’ll actually show a hidden object this was hidden before this is not a lightbox I created it to look exactly like a lightbox but if you notice here one that when you hover over it it’s just a regular button and it’s a regular letter X it’s not a it’s not a shape so when you click on that this
hides now let me go back to this lightbox when you click on the regular button this lightbox when you try to go up and down do you see the back of my screen the website is going up and down but the lightbox stays right in the middle that’s what a lightbox is supposed to do it’s supposed to stay on top of everything without moving so when you check the middle button for the be of any partner and you click on that button this is actually a hidden
element that is now shown after you click on that button so it stays exactly in that same spot so if you move down or if you move up it will stay there until you click the little X to make it hide again now the first button I’m not going to click on it notice how when I click do you see how my mouse does that little circle thing okay that’s how you know I’m clicking right well this one I did a hover effect so just by putting the mouse there then
voila a light box appears I just hovered over that button you can do an image you can do anything else as long as the code is right it’ll make something pop up and not just a hidden element like the other one that I had done that one was on the click this one was on a hover but um this one I put the code so that way it calls for a lightbox and it pops up so the way to close this lightbox of course is with the little X so we have three one a
regular button connected to a lightbox the second one a button connected through code to hide and show an element on like and this one is on hover it allows or it calls out for another page actually let box is considered like a Wix window page I guess you could say and it makes it pop up so how did I do this well once I show you how you’re gonna be blown away at how easy it was to do this now I’m in the editor so let me show you how it’s done
whoa lots of stuff going on yes so it’s gonna look like this this looks really weird cuz it’s just like in the middle of nowhere don’t worry because this is the result that everybody’s gonna be seen but while you’re at a teen you’re gonna see a whole bunch of different elements layered on top of each other including this giant container pucks that I put here if I click on it well then you can see it butter but if I click outside of it it’ll go
back to being faded cuz it’s actually a hidden object now I’m gonna move myself to this corner so I can show you what I mean so first off make sure that your Wix code tools are on and when you turn them on make sure the properties panel is also on from the properties panel this is the object that I’m going to start with let’s pretend I just like drop this image on here what I wanted to do is after somebody press this button the be of any a
partner button I wanted this object to appear in this exact spot this is why I put it here so let’s say I just dragged and dropped this it’s right where I want it to be the first thing I need to do is prepare it how do I prepare it when you click on the container the properties panel pops up and I want to select hidden onload I want it to be hidden when it loads that way there’s nothing on the page so once you hide it then you have to add some
code to make it appear how is it going to appear will you have to select something uh some type of either mouse in or click on you have to choose an event and once that event happens then the appear function like you wanted to show well it’ll appear on the page so I’ve already hit in it unload so it that parts good now I want it to show up so I am going to select this button now I’ve already layered it on top of different things so what I’m going
to do is right click because I want to view the overlapping items and there’s my button so I’m going to select the button because that’s the button I want to choose now the button is already selected you can kind of see it behind this little panel but the buttons name is button 14 hashtag a button 14 so remember that because I need that for the code down here at the bottom of your page are they coat the page code don’t look the codes already
there okay step button 14 well what I did was I actually pasted this little teeny-tiny code part it says export function and then button 14 underscore on click event how do I get this little thing to show up well let me put the cursor down here once you have selected button 14 and the properties panel for button 14 shows up go down towards the bottom and find on click as soon as you click on click they’ll be like a little plus sign let’s pretend
this is on click so once that little plus sign appears something automatically populates don’t leave it the way it is you actually have to modify it cuz there’s some words that might be missing so I recommend just type the whole thing in button 14 underscore on click with a capital C and just hit enter on your keyboard so it’ll save it now that’s what’s written down here I’m going to go ahead and delete this one because that’ll just mess up the
code so this is on click and that has butt 14 underscore on click something’s gonna happen on click so I’m already telling this button be ready you’re gonna do something so then under the export function which is up here I added this code dollar sign W and then in parentheses hashtag container nine and then the parentheses and then the colon so all this little code I didn’t just make it up it just figure it out because I don’t know how to code
I’m learning just like you guys um where I found this how to show and hide well the wicks code development team has this really really awesome example with an article and it’s called hide and show elements so when you go to this one you actually go to wix.com slash code slash home you hover over resources and then you go down to the examples and the examples it’ll give you different options of different examples that you can take a look well I
selected the one of hide and show elements on this basically you hover on top of items and something shows up right it pops up well all these little cool functions see how it does that really awesome right well at the very bottom of the page the example code is right here oh I had to do was guess which is the one that I need it so this little piece right here is one specific code this little piece right here is another specific code you don’t
need this entire thing to make this little button work all you need to do is find the code that belongs to the event you want to happen so I went down and I found one that said unclick because I want something to happen when you click something so all I did was copy and paste this exactly the way it was onto my editor under this section okay and I copied and pasted and I just deleted everything else so what I ended up doing is I left just one
because I only needed one object to do one thing and that was to show because I wanted this little container box to show up after they clicked on the button so I swapped out this field name item and I put my own which how do you know what is the correct item name you click on your object and or you hover on top it says hashtag container 9 I got exactly that little label put it inside hashtag container 9 I wanted to show and that’s it that is the
entire code and that little piece of little letters in and parenthesis and things makes that whole thing function look at that that little tiny bit of thing makes that do that and look how it looks so fast it’s responsive there’s no waiting look what happens when I click on the lightbox see that delay it took a little while well this is instant isn’t that cool instantly appears instantly closes instantly appears it’s it ok fine you get the idea
so this is what I love is so amazing this little bit of code made my website look like it was faster which you want to do cuz you want all of your visitors to stay on your page and and you want things to move fast so I recommend coding everything well so that’s the code for that part on click now for the on click for that little tiny X all I did was the same thing I copied and pasted at the exact same code and I changed the show I put it to hide
so everything is the same because I still want this container reduce something but I labelled this button button 22 on click I wanted it to do something so then over here on the code part I put button 22 underscore on click so when you click on that button this container 9 hides and that’s it so it’s the same exact code I just changed out the button before the on click event and instead of show now it says hide and that was it show and hide the
lightbox it’s a little bit more complicated and it kind of gave me a little bit of a headache because I didn’t change the mouse in Mouse out it’s actually a mouse in because when you hover on on the item it’ll pop up well when you add it this happens it says bent button 22 underscore Mouse in it didn’t have the word on without that little word on it didn’t allow the code and the function and the settings to work it didn’t pop out because I forgot
that little word so when you click on something make sure to type out the entire thing because trust me it will help so how did I get this piece of code well you won’t find it in this article you will actually find it in the Wix code reference articles all I’ll leave the link below so you can access it faster so under the Wix code reference articles there’s actually a section that says Wix window and then lightbox and so there’s a lot of
references for you to open the lightbox and etc etc it’ll tell you the code see it gives you examples open a lightbox and this is what you enter so uh all I did was copy and paste that right into the bottom and I just filled in the blanks everything that is in color most likely needs to be switched up for something else so it says import window from in little quotations it says wicks stash window and then export function button 15 on Mouse in so
this one is button 15 so whenever my mouse goes on top of any part of this button area something will happen so I prepared my button clicked on button 15 properties panel pops up I make sure that on Mouse in this part is activated so button 15 will do something on Mouse in so it’s typed in make sure it says on on Mouse in so Bund 15 on Mouse in what will happen window dot open lightbox and then in parentheses um you write down the name of your
lightbox how do you know what your lightbox name is see this little arrow right here it pops open your side panel here will be the names of your pages here will be the names of your light boxes find the name of the light box exactly as it appears here is how you need to type it in in these parentheses if it’s a capital letter this needs to be a capital letter if it’s not a capital letter then don’t put it um it has to be written exactly as is
spaces and everything capital letters lowercase letters everything so type it in and that’s it you’re done that is the entire code that you need for this button to call out the Wix window and open the lightbox that’s called whatever your name is that’s it that’s the whole code simple right you should try it out let me know what you create you know how to find the code for a hover in Mouse in Mouse out choose the function that you want click on
viewport play around with it let’s see what you can come up with I think this is what you needed I hope it answers your question get your creativity juices flowing and hopefully you can create something super amazing and I want to see it once you create it leave the link below I want to check it out I want to know what really cool Wix Co stuff you’re doing well I guess I’ll see you next time bye