How to use the clappr.$ function in clappr

_buildImg(thumb, height) {
    var scaleFactor = height / thumb.h
    var $img = $("<img>").addClass("thumbnail-img").attr("src", thumb.url)

    // the container will contain the image positioned so that the correct sprite
    // is visible
    var $container = $("<div>").addClass("thumbnail-container")
    $container.css("width", thumb.w * scaleFactor)
    $container.css("height", height)
    $img.css({
      height: thumb.imageH * scaleFactor,
      left: -1 * thumb.x * scaleFactor,
      top: -1 * thumb.y * scaleFactor
    })
    $container.append($img)
    return $container
  }
</div>

this._updateMarkerTime(marker)
    }
    marker.emitter.on("timeChanged", marker.timeChangedHandler)
    $marker.click((e) => {
      // when marker clicked seek to the exact time represented by the marker
      this.core.mediaControl.container.seek(marker.time)
      e.preventDefault()
      e.stopImmediatePropagation()
    })
    this._$markers.append($marker)

    // tooltip
    var $tooltip = marker.$tooltip;
    if ($tooltip) {
      // there is a tooltip
      let $tooltipContainer = $("<div>").addClass("tooltip-container")
      marker.$tooltipContainer = $tooltipContainer
      $tooltipContainer.append($tooltip)
      this._$tooltips.append($tooltipContainer)
      marker.tooltipChangedHandler = () =&gt; {
        // fired from marker if it's tooltip contents changes
        this._updateTooltipPosition(marker)
      }
      marker.emitter.on("tooltipChanged", marker.tooltipChangedHandler)
      this._updateTooltipPosition(marker)
    }
  }
</div>

_buildTooltipEl () {
    if (!this._tooltipImage) {
      return null
    }
    var $img = $('<img>').attr('src', this._tooltipImage).css({
      width: this._width,
      height: this._height
    })
    $img.one('load', this.notifyTooltipChanged.bind(this))
    return $('<div>').addClass('image-tooltip').append($img)
  }
}</div>

render() {
    this._remove()
    this._$adContainer = $("<div>").addClass("preroll-container").attr('data-preroll', '')
    this._$clickOverlay = $("<div>").addClass("preroll-overlay").attr('data-preroll', '')
    this.$el.append(this._$adContainer)
    this.$el.append(this._$clickOverlay)
    this.$el.append(Styler.getStyleFor(pluginStyle))
    this._adContainer = this._$adContainer[0]
    this._clickOverlay = this._$clickOverlay[0]

    return this
  }
</div></div>

bindEvents () {
    $(window).resize(() => {
      this.resize()
    })
  }
  resize () {

constructor (core) {
    super(core)
    let playerInfo = PlayerInfo.getInstance(this.options.playerId)
    this.playerWrapper = playerInfo.options.parentElement
    $(document).ready(() => { this.resize() })
  }
  bindEvents () {

_buildInternalMarker(marker) {
    var $tooltip = marker.getTooltipEl()
    if ($tooltip) {
      $tooltip = $($tooltip)
    }
    return {
      source: marker,
      emitter: marker.getEmitter(),
      $marker: $(marker.getMarkerEl()),
      markerLeft: null,
      $tooltip: $tooltip,
      $tooltipContainer: null,
      tooltipContainerLeft: null,
      tooltipContainerBottom: null,
      tooltipChangedHandler: null,
      time: marker.getTime(),
      timeChangedHandler: null,
      onDestroy: marker.onDestroy
    }
  }

_buildTooltipEl () {
    return $('<div>').addClass('standard-tooltip').text(this._tooltipText)
  }
}</div>