Slick Slider

Javascript/Jquery

@rstringa

Show() - Display Flex Scroll Window to Bottom Javacript cambios varios de cursor - Performance snippet Slick Slider - Video Play slide activo Slide In (as you scroll down) Boxes | CSS-Tricks Scroll into a div with buttons Is in Viewport - Detecta si esta en pantalla Toggle between 2 clasess is in Viewport Detect CSS Transition END Connect to WooCommerce Rest API using Javascript – IT Creative Labs Close when click outside a container Leaflet.js la mejor alternativa gratuita a la API de Google Maps

@rstringa

Slick Slider - Video Play slide activo

#video #slider #slick

Slick Slider - Video Play slide activo

// On slide change, pause all videos
$('#main-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  $('video').each(function() {
    $(this).get(0).pause();
  });
});

// On slide chnage, play a video inside the current slide
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  if( $('.project-slide.slick-current').find('video').length !== 0) {
    $("#main-slider .slick-current video")[0].play();
  }
});

#snippet #wp #shortcode #slider

Content Slider – Documentation – Shortcodes Ultimate

<strong>Mixed content</strong>
[su_content_slider effect="goDown" autoplay="0" style="dark" pages="yes"]
[su_content_slide]
[su_spoiler title="Spoiler shortcode" style="fancy" icon="plus-square-1"]Hidden content[/su_spoiler]
[/su_content_slide]
[su_content_slide]
[su_service title="Service shortcode" icon="icon: star" icon_color="#fccb00"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis. Donec molestie tempor mattis. Sed elementum, est vitae tincidunt faucibus, metus dui lobortis orci, non auctor ipsum elit quis nunc. Integer nec mattis nunc, eu dapibus nisl. Proin in eleifend lorem. Praesent mattis eros in orci aliquet fermentum.[/su_service]
[su_box title="Box shortcode" box_color="#dddddd" title_color="#393939"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis.[/su_box]
[/su_content_slide]
[su_content_slide]
[su_row][su_column size="1/2"]
<h3>YouTube video</h3>
[su_youtube url="http://www.youtube.com/watch?v=DR2c266yWEA"]
[/su_column][su_column size="1/2"]
<h3>Google map</h3>
[su_gmap]
[/su_column][/su_row]
[/su_content_slide]
[/su_content_slider]

#slider #wp #snippet

Slider – Documentation – Shortcodes Ultimate

[su_slider source="media: 1650,1648,1649" link="image" target="blank" responsive="yes" title="no" arrows="yes" pages="no" mousewheel="no"]

#slider #swiper

Swiper Slider

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>

<body>
  <!-- Swiper -->
  <div class="swiper swiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination1"></div>
  </div>

  <!-- Swiper -->
  <div class="swiper swiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination2"></div>
  </div>

  <!-- Swiper -->
  <div class="swiper swiper3">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination3"></div>
  </div>



  <!-- Initialize Swiper -->
  <script type="module">
    import Swiper from 'swiper/swiper-bundle.esm.js';
    import 'swiper/swiper-bundle.css';
    var swiper1 = new Swiper('.swiper1', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination1',
        clickable: true,
      },
    });
    var swiper2 = new Swiper('.swiper2', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination2',
        clickable: true,
      },
    });
    var swiper3 = new Swiper('.swiper3', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination3',
        clickable: true,
      },
    });
  </script>

  <!-- Demo styles -->
  <style>
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin: 20px 0;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>
</body>

</html>
© 2022 GitHub, Inc.
Terms
Privacy
Security
Status
Docs
Contact GitHub
Pricing
API
Training
Blog
About

#slider #carousel #cards

card-carousel-colors-3D

<div class="carousel">
  <ul class="carousel__list">
    <li class="carousel__item" data-pos="-2">1</li>
    <li class="carousel__item" data-pos="-1">2</li>
    <li class="carousel__item" data-pos="0">3</li>
    <li class="carousel__item" data-pos="1">4</li>
    <li class="carousel__item" data-pos="2">5</li>
  </ul>
</div>

<style>
  html,
  body {
    padding: 0;
    margin: 0;
  }
  html {
    height: 100vh;
  }
  body {
    height: 100vh;
  }
  .carousel {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    font-family: Arial;
  }

  .carousel__list {
    display: flex;
    list-style: none;
    position: relative;
    width: 100%;
    height: 300px;
    justify-content: center;
    perspective: 300px;
  }
  .carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0px;
    width: 150px;
    height: 250px;
    border-radius: 12px;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
    position: absolute;
    transition: all 0.3s ease-in;
  }
  .carousel__item:nth-child(1) {
    background: linear-gradient(45deg, #2d35eb 0%, #904ed4 100%);
  }
  .carousel__item:nth-child(2) {
    background: linear-gradient(45deg, #2d35eb 0%, #fdbb2d 100%);
  }
  .carousel__item:nth-child(3) {
    background: linear-gradient(45deg, #2d35eb 0%, #22c1c3 100%);
  }
  .carousel__item:nth-child(4) {
    background: linear-gradient(45deg, #fdbb2d 0%, #904ed4 100%);
  }
  .carousel__item:nth-child(5) {
    background: linear-gradient(45deg, #22c1c3 0%, #904ed4 100%);
  }

  [data-pos="0"] {
    z-index: 5;
  }
  [data-pos="-1"],
  [data-pos="1"] {
    opacity: 0.7;
    filter: blur(1px) grayscale(10%);
  }
  [data-pos="-1"] {
    transform: translateX(-40%) scale(0.9);
    z-index: 4;
  }
  [data-pos="1"] {
    transform: translateX(40%) scale(0.9);
    z-index: 4;
  }
  [data-pos="-2"],
  [data-pos="2"] {
    opacity: 0.4;
    filter: blur(3px) grayscale(20%);
  }
  [data-pos="-2"] {
    transform: translateX(-70%) scale(0.8);
    z-index: 3;
  }
  [data-pos="2"] {
    transform: translateX(70%) scale(0.8);
    z-index: 3;
  }
</style>

<script>

  const state = {};
  const carouselList = document.querySelector('.carousel__list');
  const carouselItems = document.querySelectorAll('.carousel__item');
  const elems = Array.from(carouselItems);

  carouselList.addEventListener('click', function (event) {
    var newActive = event.target;
    var isItem = newActive.closest('.carousel__item');

    if (!isItem || newActive.classList.contains('carousel__item_active')) {
      return;
    };

    update(newActive);
  });

  const update = function(newActive) {
    const newActivePos = newActive.dataset.pos;

    const current = elems.find((elem) => elem.dataset.pos == 0);
    const prev = elems.find((elem) => elem.dataset.pos == -1);
    const next = elems.find((elem) => elem.dataset.pos == 1);
    const first = elems.find((elem) => elem.dataset.pos == -2);
    const last = elems.find((elem) => elem.dataset.pos == 2);

    current.classList.remove('carousel__item_active');

    [current, prev, next, first, last].forEach(item => {
      var itemPos = item.dataset.pos;

      item.dataset.pos = getPos(itemPos, newActivePos)
    });
  };

  const getPos = function (current, active) {
    const diff = current - active;

    if (Math.abs(current - active) > 2) {
      return -current
    }

    return diff;
</script>

#jquery #magnificpopup #slider

Magnific Popup Slider Jquery

$(document).ready(function() {
  $('.item').magnificPopup({
      type:'image',
      delegate : 'a',
      gallery : {
        enabled : true
      }
  });
});


jquery - cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha512-IsNh5E3eYy3tr/JiX2Yx4vsCujtkhwl7SLqgnwLNgf04Hrt9BT9SXlLlZlWx+OK4ndzAoALhsMNcCmkggjZB1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Css - cdn

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha512-+EoPw+Fiwh6eSeRK7zwIKG2MA8i3rV/DGa3tdttQGgWyatG/SkncT53KHQaS5Jh9MNOT3dmFL0FjTY08And/Cw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

#javascript #splide #slider

Splide slider with modal

import Splide from '@splidejs/splide';

export default function feedSlider() {
    /**
     * get the slides
     * make an array of all the images
     * loop over the array and if one is clicked
     * then it opens up into a modal
     * when the modal is closed, then the modal is removed from the DOM
     */
    const splideElements = document.querySelectorAll('.splide');

    const splideOptions = {
        type: 'loop',
        arrows: false,
        trimSpace: false,
        perPage: 2,
        perMove: 1,
        lazyload: false,
        direction: 'ltr',
        pagination: false,
        fixedHeight: '400px',
        mediaQuery: 'min',
        snap: true,
        breakpoints: {
            0: {
                perPage: 1,
                padding: { left: '0rem', right: '30%' },
                fixedHeight: '400px',
            },
            1200: {
                perPage: 1,
                fixedHeight: '400px',
            },
        },
    };

    if (splideElements) {
        for (let i = 0; i < splideElements.length; i++) {
            new Splide(splideElements[i], splideOptions).mount();
        }
    }

    const component = [...document.querySelectorAll('.feed-carousel-wrapper')];

    function modal(imageClicked) {
        const feedImageModal = document.createElement('div');
        feedImageModal.dataset.component = 'feeback_modal';
        feedImageModal.classList.add('feedback_modal', 'open');

        feedImageModal.innerHTML = `
            <div class="feedback_modal__image-wrapper">
            <div class="feedback_modal__closeBtn" data-feedbackaction="open">
             <svg className="svg-icon svg-icon--small svg-icon--close">
               <use href="#close" />
              </svg>
            </div>
            <img src="${imageClicked ?? imageClicked}" data-image="main">
            </div>
        `;

        document.body.insertAdjacentElement('afterbegin', feedImageModal);

        const closeBtn = document.querySelector('[data-feedbackaction="open"]');
        closeBtn.addEventListener('click', () => {
            feedImageModal.remove();
        });

        feedImageModal.addEventListener('click', () => {
            feedImageModal.remove();
        });
    }

    function getParent(target, id) {
        let parent = target;
        while (parent) {
            if (parent.localName && parent.classList.contains(id)) {
                return parent;
            }
            parent = parent.parentNode;
        }
        return false;
    }

    function componentClick(e) {
        const { target } = e;
        const parentEl = getParent(target, 'splide__slide');
        if (!parentEl) return;

        const image = parentEl.querySelector('img');
        const imageUrl = image.getAttribute('src');
        modal(imageUrl);
    }

    component.forEach((template) => {
        template.addEventListener('click', componentClick);
    });
}

window.addEventListener('DOMContentLoaded', feedSlider);

#javascript #splide #slider

JS change active class if url path matches

    function dynamicVetIsNav(){
        const vetisMainNavLinks = document.querySelectorAll('#vetis-main-navigation .vet-nav__menu-link');
        const currentURL = window.location.pathname;

        const pathSegments = currentURL.split('/').filter(segment => segment !== "");
        if(vetisMainNavLinks){
            if (pathSegments.length >= 3) {
                const vetisMainURLPathname = pathSegments.slice(0, 3).join('/');
                
                for (const navLink of vetisMainNavLinks){
                    const navhref = navLink.getAttribute("href");
                    
                    if (navhref.includes(vetisMainURLPathname)) navLink.classList.add("active");
                }
            }
        }
    }
    
    document.addEventListener("DOMContentLoaded", dynamicVetIsNav);

#js #youtube-embed #video #stop-video

Stop video in modal when modal is closed

/*JS*/
$("#{ID_OF_CLOSE_MODAL_BUTTON}").click(function(e) {
	const t = document.getElementsByClassName("{YOUR_MODAL_CLASSNAME}")[0].children[0].src;
	document.getElementsByClassName("{YOUR_MODAL_CLASSNAME}")[0].children[0].setAttribute("src", ""),
		document.getElementsByClassName("{YOUR_MODAL_CLASSNAME}")[0].children[0].setAttribute("src", t);
});
/*JS*/

#ios #swift #file #pdf #doc #document #picker #mp3 #mp4 #video #audio

Document Picker

//MARK: - Document Picker

// From your project's capabilities, enable both the iCloud and the Key-Sharing.

@IBAction func pickDocumentPressed(_ sender: Any) {
       presentDocumentPicker()
    }

extension OffersReceivedViewController : UIDocumentPickerDelegate,UINavigationControllerDelegate {
    
    func presentDocumentPicker() {
        let sTypes = getSupportedTypes()
        let documentPickerController = UIDocumentPickerViewController(
            forOpeningContentTypes: sTypes)
        
        documentPickerController.delegate = self
        documentPickerController.allowsMultipleSelection = false
        SVProgressHUD.show()
        self.present(documentPickerController, animated: true) {
            SVProgressHUD.dismiss()
        }
    }
    
    public func documentPicker(_ controller: UIDocumentPickerViewController, didPickDocumentsAt urls: [URL]) {
        guard let myURL = urls.first else {
            return
        }
        print("import result : \(myURL)")
        print("get Image Url")
        fileUrl = myURL
    }
    
    func documentPickerWasCancelled(_ controller: UIDocumentPickerViewController) {
        print("view was cancelled")
        dismiss(animated: true, completion: nil)
    }
    
    func getSupportedTypes() -> [UTType] {
        let supportedTypes : [UTType] = [UTType.utf8TabSeparatedText, UTType.rtf,    UTType.pdf, UTType.webArchive, UTType.image, UTType.jpeg,    UTType.tiff, UTType.gif, UTType.png, UTType.bmp, UTType.ico,    UTType.rawImage, UTType.svg, UTType.livePhoto, UTType.movie,    UTType.video, UTType.audio, UTType.quickTimeMovie, UTType.mpeg,    UTType.mpeg2Video, UTType.mpeg2TransportStream, UTType.mp3,    UTType.mpeg4Movie, UTType.mpeg4Audio, UTType.avi, UTType.aiff,    UTType.wav, UTType.midi, UTType.archive, UTType.gzip, UTType.bz2,    UTType.zip, UTType.appleArchive, UTType.spreadsheet, UTType.epub]
        return supportedTypes
    }
}

#ios #swift #video #player

Video Player

call video play code on action , not on viewdidload

import AVFoundation
import AVKit

 var playerController = AVPlayerViewController()
 var player: AVPlayer?
 var playerItem: AVPlayerItem?
 var playerObserver: Any?

class VideoPlayerViewController: UIViewController, AVPlayerViewControllerDelegate {

    var playerController = AVPlayerViewController()
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
  
  func playVideo(url: URL) {
        player = AVPlayer(url: url)
        playerItem = player?.currentItem

        // Observe the player's current time to detect playback start
        playerObserver = player?.addPeriodicTimeObserver(forInterval: CMTime(seconds: 0.001, preferredTimescale: CMTimeScale(NSEC_PER_SEC)), queue: .main) { [weak self] time in
            guard let self = self else { return }

            if let currentItem = self.playerItem {
                let currentTime = currentItem.currentTime().seconds
                 
                if currentTime > 0.001 { // Adjust the threshold as needed
                    SVProgressHUD.dismiss()

                    // Pause the player and remove the observer
                   // self.player?.pause()
                    self.player?.removeTimeObserver(self.playerObserver!)

                    // Present AVPlayerViewController now that playback has started
                    self.present(self.playerController, animated: true) {
                        self.playerController.player = self.player
                        self.playerController.player?.play()
                    }
                }
            }
        }

        SVProgressHUD.show()
        player?.play()
    }

#html #camera #capture #video

TIL: You Can Access A User's Camera with Just HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    * {
      font-size: 1.5rem;
    }
  </style>
</head>

<body>
  <label for="environment">Capture environment:</label>
  <br>
  <input
    type="file"
    id="environment"
    capture="environment"
    accept="video/*"
  >
  <br><br>
  <label for="user">Capture user:</label>
  <br>
  <input
    type="file"
    id="user"
    capture="user"
    accept="image/*"
  >
</body>

</html>

#video

End to End Machine Learning pipeline using Apache Spark - Hands On - YouTube

https://www.youtube.com/watch?v

#markdown #example-code #video

Video to markdown

 [![The CORRECT Way to Write a Book with ChatGPT - Do This NOW](https://res.cloudinary.com/marcomontalbano/image/upload/v1685646401/video_to_markdown/images/youtube--dGyU8gDSKmw-c05b58ac6eb4c4700831b2b3070cd403.jpg)](https://www.youtube.com/watch?v=dGyU8gDSKmw "The CORRECT Way to Write a Book with ChatGPT - Do This NOW")

Slick Slider - Video Play slide activo

Save snippets that work from anywhere online with our extensions

Comments

More like this

Javascript/Jquery

Slick Slider

Browse more snippets >>

Slick Slider - Video Play slide activo

Save snippets that work from anywhere online with our extensions

Comments

More like this

Javascript/Jquery

Slick Slider

Browse more snippets >>

Embed code snippet