Ninja Slider / Posts /

How to insert url link in ninja video slider

0

HI
I wish to play product video at my page and add product url inside the video slide

I am studying this code but no luck to make it happened. I wish to change the wording from "Supports Youtube, Vimeo and HTML video/audio" to "Buy Now" and go to product url when people click on it. May I know how to get it done?

<li>

                    <div class="video">

                        <iframe src="https://player.vimeo.com/video/93292237" frameborder="0" allowfullscreen></iframe>

                    </div>

                    <a class="ns-img" href="img/2.jpg"></a>

                    <div class="caption">Supports Youtube, Vimeo and HTML video/audio</div>

                    <div class="video-playbutton-layer"></div>

                </li>


Thanks

engbok  one month ago   viewed: 136    

4 Answers

0

<li><a href="/"><img class="ns-img" src="img/3.jpg"></a></li>

For details please read the "Scalable image, lazy load" section in Ninja Slider.

Milo   one month ago
0

Thanks for the reply and I have been trying to get this to work since last week but no luck.

My current idea is to use the demo5.html. as template, but the caption need to show below the slide like demo8.html.

I have studied "Show each slide image caption outside the slider" in  http://www.menucool.com/slider/show-image-gallery-on-modal-popup. I fail to get the recommended caption css modification to work. Once i change the code, caption gone missing from my demo5.html. 

This is the caption style in demo 5' css file:

#ninja-slider .caption {

    padding:20px 40px;

    margin:auto;

    left:0;right:0;

    top:auto;bottom:8%;

    width:50%;

    text-align:center;

    font-family:sans-serif;

    font-size:2.2em;

    color:#fff;

    background:rgba(0,0,0,0.6);

    border:1px solid rgba(255,255,255,0.4);

    border-radius:4px;

    position:absolute;

    box-sizing:border-box;

    opacity:0;

    -webkit-transition:opacity 1s ease-in;

    transition:opacity 1s ease-in;

}

#ninja-slider li[class*='-s'] .caption {

    opacity:1;

}

 
 Can you write me the code that make the caption below the video slider in my demo5.html?

Thanks



engbok   one month ago
0

another 2 days of trying, just can't get it to work. Please check my CSS setup as below:
MOD made: 
1) Caption: Changed the position to absolute and top:100% 

ninja-slider .caption {

    padding:20px 40px;

    margin:auto;

    left:0;right:0;

    top:100%;bottom:8%;

    width:50%;

    text-align:center;

    font-family:sans-serif;

    font-size:2.2em;

    color:#fff;

    background:rgba(0,0,0,0.6);

    border:1px solid rgba(255,255,255,0.4);

    border-radius:4px;

    position:absolute;

    box-sizing:border-box;

    opacity:0;

    -webkit-transition:opacity 1s ease-in;

    transition:opacity 1s ease-in;

2) Reserves a 100px space under the slider:

#ninja-slider .slider-inner {

    max-width:800px;

    margin:0 auto;/*center-aligned */

    font-size:0px;

    position:relative;

    box-sizing:border-box;

    padding-bottom: 100px!important;

}

#ninja-slider li {

     width:100%;

    height:100%;

    top:0;

    left:0;

    position: absolute;

    font-size:12px;

    list-style:none;

    margin:0;

    padding:0;

    opacity:0;

    box-sizing:border-box;

    margin-bottom: 100px!important;

}

3) And remove the overflow:hidden; settings:

#ninja-slider ul {
    /*overflow:visible;*/
    position:relative;
    list-style:none;
    padding:0;
    box-sizing:border-box;
}

#ninja-slider li {
Removed over flowed hidden, as shown above.

Please help to check on my page
http://mmo.net.my/demo5.html

the caption still fail to display 


engbok
  28 days ago
0

Do you have a testing page online? That would be much easier for us to investigate.

Thanks!

Milo   28 days ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: