Javascript Image Slider / Posts /

Enable clicking thumbnail plays the video?

44
Is there a way that when the user clicks the thumnail, the video is automatically loaded and plays on the page? We don't want it to autoplay, but to just reduce that one click from the navigation flow. When you click the thumbnail, it takes you to the page clicking the larger image would have without loading the larger image.

Thank for a great tool!
Jen  4 years ago   viewed: 14206    

2 Answers

5

Since release v2013.8.27 of the JavaScript Image Slider, you don't need Milo's customizing code in this thread any more.

You can simply add data-autovideo="true" either to the thumbs' containing <div id="thumbs"> element, or to any <div class="thumb"> element where click-and-play is desired. For example: <div id="thumbs" data-autovideo="true">.....</div>.

For details please visit http://www.menucool.com/slider/play-html5-video-or-audio-in-slider (the page mainly discuss the html5 video, but you can also apply the attribute to YouTube or Vimeo videos).

John   3 years ago
2
Yes, you can add the following script at the bottom of your page, just before the body's closing tag </body>:

    <script type="text/javascript">

        function setPlayVideoClickEventForThumbs() {
            //1. helper functions
            var addEvent = function (el, eventName, eventHandler) {
                if (el.addEventListener)
                    el.addEventListener(eventName, eventHandler, false);
                else if (el.attachEvent) //IE
                    el.attachEvent('on' + eventName, eventHandler);
            }
            var getChildren = function (node) {
                var ns0 = node.childNodes;
                var ns1 = [];
                if (ns0) {
                    for (var i = 0, len = ns0.length; i < len; i++) {
                        if (ns0[i].nodeType == 1) ns1.push(ns0[i]);
                    }
                }
                return ns1;
            };

            var playVideo = function (thumb) {
                for (var i = 0; i < links.length; i++) {
                    if (links[i] != null) {
                        if (parseInt(thumb.getAttribute("rel")) == i)
                            links[i].setAttribute("autoPlayVideo", "true");
                        else
                            links[i].setAttribute("autoPlayVideo", "false");
                    }
                }
            };

            //2. set links
            var links = [];
            var slides = getChildren(document.getElementById("slider"));
            for (var i = 0; i < slides.length; i++) {
                if (slides[i].className.indexOf("video") != -1) {
                    links.push(slides[i]);
                }
                else links.push(null);
            }

            //3. set thumbnail click event
            var divs = document.getElementById("thumbs").getElementsByTagName("div");
            for (var i = 0; i < divs.length; i++) {
                if (divs[i].className == "thumb") {
                    divs[i].setAttribute("rel", i);
                    addEvent(divs[i], "click", function () { playVideo(this); });
                }
            }

            //4. return links
            return links;
        }
    
        function afterSlideChange(args) {
            //args: [0]-currentSlide index, [1]-currentImage
            for (var i = 0; i < videoSlides.length; i++) {
                if (videoSlides[i] != null) {
                    videoSlides[i].setAttribute("autoPlayVideo", "false");
                }
            }
        }

        var videoSlides = setPlayVideoClickEventForThumbs();
    </script>

How to test it?

1. add five thumbnails to the downloaded demo6.html page (just below the sliderFrame):
        <!--thumbnails-->
        <div id="thumbs">
            <div class="thumb"><img src="images/thumb1.jpg" /></div>
            <div class="thumb"><img src="images/thumb2.jpg" /></div>
            <div class="thumb"><img src="images/thumb3.jpg" /></div>
            <div class="thumb"><img src="images/thumb4.jpg" /></div>
            <div class="thumb"><img src="images/thumb5.jpg" /></div>
        </div>
2. add the script to the bottom of the page, just as I mentioned at the beginning of this post.

3. Click thumbnails to watch the videos.

Note: This solution will enable the autoPlayVideo by clicking the related thumnail,
        but it will also disable the autoPlayVideo via the slider's auto sliding, even if you have
        set the slide to autoPlayVideo="true" 

Milo   4 years 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: