Okay
  Public Ticket #1512149
Video Button Lightbox Pop UP
Closed

Comments

  • JanKorgaard started the conversation

    Hi,

     I need help to create a button. In the link that i send at the bottom of that page there buttons. The one on the left have the right functionality and the one on the right have the proper styling.

    How do I combine these 2? Do I need code? 

    I want a lot of these buttons on my site so how do make it simple?

    I copied code for the left button from a blog post 


    Best Jan  



  •  9,012
    Tahir replied

    Hey Jan,

    Try adding like this and check . You only need to add in this "magnific-popup" class : http://prntscr.com/iucj6m .

    <a class="nectar-button medium see-through-2  has-icon wpb_animate_when_almost_visible wpb_fadeInUp fadeInUp animated wpb_start_animation magnific-popup" href="https://vimeo.com/256924827" data-color-override="#f7a812" data-hover-color-override="#f7a812" data-hover-text-color-override="#ffffff">Video<i class="iconsmind-Video-5"></i></a>

    Bes.t


    ThemeNectar Support Team 

  • JanKorgaard replied

    Hi Tahir,

    Where should I add it? And the screenshot doesn't really make sense to.

    If a paste the code string in a box for raw Html it works.

    Since you've written a class can I add the code to global and then add a short code for that bottom. Is that how i should understand?

    I know a little code but far from mastering it 


    Cheers


     




  •  9,012
    Tahir replied

    Hey Again,

    No you will have to add the Button HTML code in a Raw HTML Page Element for it to work .

    Best 


    ThemeNectar Support Team 

  • JanKorgaard replied

    Hi Tahir,

    if I copy your code into Raw Html, it stays a link and I want it popup. I don't now why it doesn't work now?

    I want when press the button Video the Vimeo video pop up, so that the visitor stays on the site. 

    What am I missing?


    Jan 


  • JanKorgaard replied

    Hi tried to modify the code and this seems to work. Or is this only working on my computer?


    <a class="nectar_video_lightbox nectar-button medium see-through-2  has-icon wpb_animate_when_almost_visible wpb_fadeInUp fadeInUp animated wpb_start_animation magnific-popup" target="_blank" href="https://vimeo.com/247325197" data-color-override="#f7a812" data-hover-color-override="#f7a812" data-hover-text-color-override="#fff" rel="prettyPhoto">Video<i class="iconsmind-Video-5"></i> </a>
  •  9,012
    Tahir replied

    Hey Again,

    This button seems to be loading up the lightbox perfectly : http://prntscr.com/j3b9s3 ? .

    Best


    ThemeNectar Support Team 

  • JanKorgaard replied

    Hi Tahir,

    I can't find a way to use the button everywhere in the theme. If want the button in the backside of a flipcard, it's not possible. If I want the button in a Nectar Header, it's not possible.   

    So maybe there will be an upgrade, where you can make a button like want, and then use it everywhere in the theme?

  •  3,034
    Andrew replied

    Hey there,

    Thanks for reaching in,

    We shoot this over to the developers, see what they think. If worthwhile it will be implemented in the future.

    Regards

  • JanKorgaard replied

    Hey,

    I'm really having problems with that button.

    On some pages the icon are now gone on some it's there. What is wrong? The code is the same? 

     


  •  9,012
    Tahir replied

    Which url are you referring to ?.


    ThemeNectar Support Team 

  • JanKorgaard replied

    When you're on the front page an hover over the video button it shows the icon

    On the page "om" if you hove hover the video button there is no icon.

     I'm trying to work around the fact that you can have the same button every where.

    If you could make it possible to check in the button Lightbox Video, so that the when the button it's pushed, video is show in the a light box. I know it needs development and as written I try to work around it.  


  •  9,012
    Tahir replied

    This is giving a 404  :http://d42912355.u319.surf-town.net/om/  ? .


    ThemeNectar Support Team 

  •  9,012
    Tahir replied

    Hey Again,

    So i found an easier way by using the button shortcode and not use Raw Html :

    [button open_new_tab="true" color="accent-color nectar_video_lightbox magnific-popup" hover_text_color_override="#fff" size="medium" url="https://vimeo.com/247325197" text="Video" color_override="" image="iconsmind-Delete-Window"]
    

    You need to add these 2 classes to the color attribute : 

    color="nectar_video_lightbox magnific-popup"
    

    Best


    ThemeNectar Support Team 

  • JanKorgaard replied

    HI Tahir,

    I appreciate your effort but it doesn't work. 

    I think a found another way to get the design i want.  

    Thanks :-)