How Do I Uniquely Reference an Element in Question?

JavaScript
1

Hi Sitepoint folks,

I’m trying to add video thumbnail links to my portfolio. I’ve gotten one to work where it loads the video, plays, and then when it closes it removes the src. It’s great. It took me about a day to get the right combo of video commands, but I’ve arrived.

Now I’m trying to replicate the same set of commands with video #2 and I realize that my video commands hinge their reference of getElementByID(“video1”). So the caveman in me first thinks repeat all of this 4 times (for the 4 videos, e.g. video1, video2, video3, video4), but that’s a terribly redundant use of code.

I can’t do get ElementsByClassName because then it’s liable to open all the videos, so I’m stuck with a “this” instance question of how do I script in JS to say, “Hey, reference this element in question that I’m clicking on”.

Does that question make sense? If anybody can point me in the direction of how “this” is used in syntax for this sort of thing, I’d really appreciate it. Thank for reading.

HTML:

<!-- MOTION EXAMPLES -->

                            <div id="m1" class="thumb25 hide">
                                <a data-fancybox data-src="#v1" class="fancybox">

                                <div id="v1" style="display:none">
                                    <video id='myVideo' width="600" >
                                    <source src="__section_01_portfolio/_motion/v1.mp4" type="video/mp4">          
                                    Your browser does not support HTML5 videos.
                                    </video>
                                </div>

                                    <div class="thumbM">
                                        <img id="gif1" class="imageM" src="_img/_thumbs/m_01.jpg" />
                                    </div>
                                    <ul class="text_thumb">
                                        <li class="caption">AMD | HP</li>
                                        <li class="sub-caption">ANIMATION (VIDEO)</li>
                                    </ul>
                                </a>
                            </div>

                            

                            <div id="m2" class="thumb25 hide">
                                <a data-fancybox data-src="#v2" class="fancybox">

                                <div id="v2" style="display:none">
                                    <video id='myVideo2' width="600" >
                                    <source src="__section_01_portfolio/_motion/v2.mp4" type="video/mp4">          
                                    Your browser does not support HTML5 videos.
                                    </video>
                                </div>

                                    <div class="thumbM">
                                        <img id="gif2" class="imageM" src="_img/_thumbs/m_02.jpg" />
                                    </div>
                                    <ul class="text_thumb">
                                        <li class="caption">AMD | HP</li>
                                        <li class="sub-caption">ANIMATION (VIDEO)</li>
                                    </ul>
                                </a>
                            </div>

JS:

$(document).ready(function() {
    $("[data-fancybox]").fancybox({

    afterShow: function() {
        var vid = document.getElementById("myVideo2"); 
        vid.play();
    },

    afterClose: function () {
        var vid = document.getElementById("myVideo2");
        vid.pause();
        vid.currentTime = 0;
        vid.removeAttribute('src'); // empty source
    }

    });
  });
2

Hi @soupking, hehe yes you can indeed get the current fancybox content via this.$content (which is a jQuery object) inside the event handlers:

$(document).ready(function () {
  $('[data-fancybox]').fancybox({
    afterShow: function () {
      const video = this.$content.find('video').get(0)
      video.play()
    },

    afterClose: function () {
      const video = this.$content.find('video').get(0)
      video.pause()
      video.currentTime = 0
      video.removeAttribute('src')
    }
  })
})
3

Awesome, does vanilla JS have anything pre-defined to determine “this.$content” or is it pretty common to rely on jQuery for active access to elements?

Thanks, m3g4p0p

4

Happy to help. :-) It’s actually specific to fancybox, which does itself rely on jQuery… in a vanilla event handler (as added with addEventlistener()), this would just refer to the DOM element the listener was added to; here however it’s the fancybox context.

5

Ahhh, right. That makes sense. I was raised on Actionscript, so that looks more familiar. There’s like next to Zero API info on Fancybox, just some mysterious codepens so thanks so much for the assist!

1 Like
6

Yeah, FWIW I just figured that out by setting a breakpoint inside the event handler and inspecting the context from the debugger. ^^

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.