Scrawlon scrawlon
scrawlon
/ swiper-js-fullscreen-image-slider-complete.html
Created
January 12, 2019 01:49
Swiper JS fullscreen image slider (complete)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang='en'> | |
| <head> | |
| <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css'> | |
| <style> | |
| .swiper-container { | |
| height: 300px; | |
| } | |
| .swiper-container.fullscreen { | |
| height: 100vh; |
scrawlon
/ swiper-js-fullscreen-image-slider-css.html
Last active
May 1, 2019 16:23
Swiper JS fullscreen image slider CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .swiper-container { | |
| height: 300px; | |
| } | |
| .swiper-container.fullscreen { | |
| height: 100vh; | |
| } | |
| .swiper-slide { | |
| background: lightgray; | |
| text-align: center; |
scrawlon
/ swiper-js-fullscreen-image-slider-javascript.html
Last active
May 1, 2019 16:23
Swiper JS fullscreen image slider JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| window.onload = function() { | |
| var swiper = new Swiper('.swiper-container', { | |
| loop: true, | |
| navigation: { | |
| nextEl: '.swiper-button-next', | |
| prevEl: '.swiper-button-prev', | |
| }, | |
| pagination: { | |
| el: '.swiper-pagination' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .swiper-container { | |
| height: 300px; | |
| } | |
| .swiper-slide { | |
| background: lightgray; | |
| text-align: center; | |
| /* Center slide text vertically */ | |
| display: flex; | |
| justify-content: center; |
scrawlon
/ swiper-js-image-slides-html.html
Last active
May 1, 2019 16:22
Swiper JS image slides HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Slides --> | |
| <div class='swiper-slide'> | |
| Slide 1 | |
| <img src='https://farm5.staticflickr.com/4906/31468331457_2b30dda299_z.jpg' alt='Hubble’s Cosmic Holiday Wreath'> | |
| <figcaption> | |
| <a href='https://www.flickr.com/photos/gsfc/31468331457/'>"Hubble’s Cosmic Holiday Wreath" © NASA </a><br /> | |
| <a href='https://creativecommons.org/licenses/by/2.0/' target='_blank'>Creative Commons</a> | |
| </figcaption> | |
| </div> | |
| <div class='swiper-slide'> |
scrawlon
/ swiper-js-multi-slide-example.html
Last active
January 7, 2019 02:33
Swiper JS multi-slide example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang='en'> | |
| <head> | |
| <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css'> | |
| <style> | |
| .swiper-container { | |
| height: 300px; | |
| } | |
| .swiper-slide { | |
| background: lightgray; |
scrawlon
/ mirror.html
Last active
October 1, 2015 03:17
code from the blog post: http://scrawlon.com/2015/07/26/control-your-webcam-with-html-and-javascript/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-us"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <video autoplay></video> | |
| <script src="mirror.js"></script> |
scrawlon
/ custom_options_divi.php
Last active
November 18, 2021 01:07
code from blog post: http://scrawlon.com/2015/09/21/add-more-social-media-options-to-wordpress-divi-theme/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| require_once( get_template_directory() . esc_attr( "/options_divi.php" ) ); | |
| global $options; | |
| $epanel_key = "name"; | |
| $epanel_value = "Show RSS Icon"; | |
| $custom_options = array ( | |
| array( "name" => esc_html__( "Show GitHub Icon", $themename ), | |
| "id" => $shortname."_show_github_icon", |
scrawlon
/ mcgrath_websockets
Created
July 9, 2014 20:05
The following code accepts data from a WebSocket connection and adds a clickable Twitter-style "x number of new updates" message to the DOM. If clicked, the updates are added to the timeline.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| var updates = { | |
| 'total': 0, | |
| 'new': [] | |
| } | |
| var faye = new Faye.Client('http://localhost:9292/faye'); | |
| faye.subscribe("/" + fayeChannel + "/new", function(data) { | |
| var update_valid = checkDataValidity(data); | |
| if (update_valid === true) { |