Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader)

Developer
Adam
Size
12,009 Kb
Views
6,072
  1. Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader) Previews
  2. Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader) HTML Codes
  3. Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader) CSS Codes
  4. Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader) JS Codes

How do I make an drive-thrujs/drive-thru.js (carousel lazy-loader)?

Copyright 2014 by Intellectual Reserve, Inc.Licensed under the Apache License, Version 2.0 http://www.apache.org/licenses/LICENSE-2.0. What is a drive-thrujs/drive-thru.js (carousel lazy-loader)? How do you make a drive-thrujs/drive-thru.js (carousel lazy-loader)? This script and codes were developed by Adam on 07 January 2023, Saturday.

Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader) Previews
IQ Test

Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader)</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html {
background: #7d7e7d;
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
}
body { width: 960px; margin: 0 auto; font-family: 'Georgia', sans-serif;
}
ol li { margin-bottom: 10px;
}
ol li ul li { font-size: 0.75rem;
}
textarea { display: block; width: 100%; overflow: hidden; margin: 5px 0; padding: 15px; border-radius: 15px; background: #ff5500; color: #fff; font-family: 'Courier', sans-serif;
}
textarea.required-load-method { height: 50px;
}
textarea.required-attributes { height: 65px;
}
textarea.optional { height: 80px; background: #bb5500;
}
.slideshow { position: relative; width: 820px; margin-top: 1em; overflow: scroll;
}
.sliderNav { display: none;
}
.sliderNav a { position: absolute; text-decoration: none; color: #fff; font-size: 5em; opacity: 0.25;
}
.sliderNav a:hover { opacity: 0.5;
}
.sliderNav a:first-child { top: 220px; left: 15px;
}
.sliderNav a:last-child { top: 220px; right: 15px;
}
.slideshow ul { list-style-type: none; padding: 0; width: 5000px;
}
.slideshow li { float: left;
}
.slideshow img { width: 820px; border: 10px solid #222;
}
a { color: #000; text-shadow: 0 0 5px #000;
}
div { position: absolute; top: 25px; right: 25px; font-size: 0.8rem;
}
.logo { position: absolute; top: 25px; left: 25px;
}
.github-wrapper { position: absolute; z-index: 100; top: 0; right: 0; width: 100%; height: 250px; overflow: hidden;
}
.github { position: absolute; top: 50px; right: -60px; display: block; width: 250px; padding: 10px; border: 1px dashed #ccc; text-decoration: none; background: #ff0; box-shadow: 0 0 0 4px #ff0; color: #fff; text-shadow: 0 0 4px #000; vertical-align: middle; text-align: center; transform: rotate(45deg);
}
.github:hover:before { content: attr(href); position: absolute; top: 200px; right: 200px; text-align: right; transform: rotate(-45deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>DRIVE-THRUJS Lite / DRIVE-THRU.JS Lite (Plugin)</h1>
<h2>Super-Simple-Image-Carousel-Lazy-Loader</h2>
<p>All you need is 4 things:</p>
<ol> <li>jQuery</li> <li>The "Drive-Thru" script</li> <li>Place this in your carousel script where you can pass in the current slide number each time it changes: <textarea class="required-load-method">DRIVE_THRU.load(num);</textarea> </li> <li>Then make each &lt;img&gt; element look like this: <textarea class="required-attributes"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-drive-thru="http://your-actual-image-url.jpg" alt="alternate text here"/></textarea> <ul> <li><strong>Optional</strong> fallback (don't worry, it doesn't get loaded but makes images available to users without JavaScript): <textarea class="optional"> <noscript> <img src="http://your-actual-image-url.jpg" alt="alternate text here"/> </noscript></textarea> </li> </ul> </li> </ol> <h3>EXAMPLE:</h3> <figure class="slideshow"> <nav class="sliderNav"> <a href="#d" data-direction="left">&#x25C0;</a> <a href="#d" data-direction="right">&#x25B6;</a> </nav> <ul> <li> <noscript> <img src="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(1).jpg" alt="image"/> </noscript> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-drive-thru="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(1).jpg" alt="image" /> </li> <li> <noscript> <img src="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(3).jpg" alt="image"/> </noscript> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-drive-thru="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(3).jpg" alt="image" /> </li> <li> <noscript> <img src="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(4).jpg" alt="image"/> </noscript> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-drive-thru="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(4).jpg" alt="image" /> </li> <li> <noscript> <img src="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(5).jpg" alt="image"/> </noscript> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-drive-thru="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(5).jpg" alt="image" /> </li> <li> <noscript> <img src="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(6).jpg" alt="image"/> </noscript> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-drive-thru="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(6).jpg" alt="image" /> </li> <li> <noscript> <img src="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(7).jpg" alt="image"/> </noscript> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-drive-thru="http://photography.clearwavedesigns.com/gallery/images/gallery/architectures/architectures%20(7).jpg" alt="image" /> </li> </ul> </figure> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABuCAYAAADGWyb7AAAVuUlEQVR4Ae2deZAURb7Hf3MxwwznyCWCgCKMCAj4FjlWDoEFAg3x4VvwD85QRJenGLFvQXFXQVE8QV8oAn94vEBg9bnoHwKyBgPKISuiC7geMIKiHCLHKDDMcGx9csgmO6e6e3q6iqke+hdRXVdWVubvW78zs6rlmmuu+UZEzqaW5OEBmKUB2MKFC51VipKFA3feeadk0tizZxG4FCUTB9KTqbGptp7nQAq487xIqq0UcEkF1/nGpmzceV4k1ZYCrjpbvH79ejl69KiUlpZKfn5+qCk//PCDtG/fXo4dOyaHDx+WSy65RBo1aiS1a9eWli1bhspdrBvVDhyMb9CggbRu3ToMgz179kizZs3kq6++krZt2ypg33rrLWnTpo18+eWX0r17d0lLS5O6detKWVmZAviKK66QrKwsdV29evXC6qtpO4EArm/fvjJu3LgKvP3Ln+6TY2vmho4//fspknlZFwXi5n0i//q6SA4dOiQ//fSTZGZmyq+//qqk9tSpU7J37151HGk+ceKEnDx5MiS1LVq0kNzc3FC9ybgRCODcGAfzz5w4IsdWznA7LQXO0Q71mklmkwLJaNNaMltdLyW5LWTroVpyuPi4fP7559KwYUMVoyKxTZs2lf3798u1116rJBaJZv/gwYMKdKS7fv360q5dO9f7Be2gAq46A3BUmxsdP35c0ms3cDsVOnameJ+UOouiTa+qFYCmO4D2BdD81pLesJVktb5e9h85IUUlBbJmzRo5cuSIktr09HTp0aOHAoyLkU4kFSlm+f777xX4qGBsLEtQqNolLpItKikpkTQHOMBD8uKhMEDPXZjtrK92lo4OmBltnUWB2kYym7aXA8dEik41k3379imbSpsAFWcoJydHNm7cqMBm/7vvvpNLL700BGh1qd1qBy4SINnZsFoko2mBnNm1MVKxuI+fPrRLWEzSoALsANRvswIltRmN26tiWWOnys5de6T4pEhJ/bby2WefKekE6HfffVeV+fHHHwXJxNaaYOJMRdIqZhvi3Q4EcDDApiZNmigJqO1IRpmHwNn3sffdpJUyKEkWCICzWveQtEY5kjmgQNLqNFUSjBRvOZCunCZsbGFhoXTp0kXZ27vuuktd69VPIICjkzYRHuzatUupNvtcEPb1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" alt="logo" class="logo"/> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader) - Script Codes CSS Codes

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html {
background: #7d7e7d;
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
}
body { width: 960px; margin: 0 auto; font-family: 'Georgia', sans-serif;
}
ol li { margin-bottom: 10px;
}
ol li ul li { font-size: 0.75rem;
}
textarea { display: block; width: 100%; overflow: hidden; margin: 5px 0; padding: 15px; border-radius: 15px; background: #ff5500; color: #fff; font-family: 'Courier', sans-serif;
}
textarea.required-load-method { height: 50px;
}
textarea.required-attributes { height: 65px;
}
textarea.optional { height: 80px; background: #bb5500;
}
.slideshow { position: relative; width: 820px; margin-top: 1em; overflow: scroll;
}
.sliderNav { display: none;
}
.sliderNav a { position: absolute; text-decoration: none; color: #fff; font-size: 5em; opacity: 0.25;
}
.sliderNav a:hover { opacity: 0.5;
}
.sliderNav a:first-child { top: 220px; left: 15px;
}
.sliderNav a:last-child { top: 220px; right: 15px;
}
.slideshow ul { list-style-type: none; padding: 0; width: 5000px;
}
.slideshow li { float: left;
}
.slideshow img { width: 820px; border: 10px solid #222;
}
a { color: #000; text-shadow: 0 0 5px #000;
}
div { position: absolute; top: 25px; right: 25px; font-size: 0.8rem;
}
.logo { position: absolute; top: 25px; left: 25px;
}
.github-wrapper { position: absolute; z-index: 100; top: 0; right: 0; width: 100%; height: 250px; overflow: hidden;
}
.github { position: absolute; top: 50px; right: -60px; display: block; width: 250px; padding: 10px; border: 1px dashed #ccc; text-decoration: none; background: #ff0; box-shadow: 0 0 0 4px #ff0; color: #fff; text-shadow: 0 0 4px #000; vertical-align: middle; text-align: center; transform: rotate(45deg);
}
.github:hover:before { content: attr(href); position: absolute; top: 200px; right: 200px; text-align: right; transform: rotate(-45deg);
}

Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader) - Script Codes JS Codes

/* * Copyright 2014 by Intellectual Reserve, Inc. * * Licensed under the Apache License, Version 2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Author: Adam Carson * Website: http://clearwavedesigns.com/code/plugins/ * Dependencies: jquery.js (1.8.3+) * * Name: DRIVE-THRUJS Lite / DRIVE-THRU.JS Lite * Description: Very simple carousel image lazy-loader. * Options: Change the current percent and the time it takes to complete */
// Drive-Thru is a super simple image carousel lazy loader. Why call it "Drive-Thru?" Well, I'm tired--so that's the 1st reason. The 2nd, is because the server at the drive-thru window watches for when you pull up and then serves you the food you wanted. Likewise, lazy-loading watches for the next needed image and loads that before it slides/fades into view!
// DRIVE_THRU WINDOW OBJECT
var DRIVE_THRU = { // Get all of the images with a data attribute of "drive-thru". images : $('[data-drive-thru]'), // This is the image loader. load : function(num) { // Get the last image index. var last = this.images.length - 1; // Declare an empty variable (will be an array later). var load_images; // If first slide, i.e. index "0", then store that first in the array, then the next one and the preceding one depending on which direction the user or animation moves to next. if (num === 0) { load_images = [0,1,last]; } // If last slide, then store this in the array, the next one (the first one), and the preceding one. else if (num === last) { load_images = [last, 0, last - 1]; } // If not the first or last slide, store it in the array, the next one and the preceding one. else { load_images = [num, num + 1, num - 1]; } // Load the actual images as indicated by the new array for(var i = 0, length = load_images.length; i < length; i++) { var data_src = this.images.eq(load_images[i]).data('drive-thru'), src = this.images.eq(load_images[i]).attr('src'); // Don't reload images that have already been loaded, so if the data-drive-thru and src are the same, skip loading and move on to the next; otherwise load the data-drive-thru value into the actual src...and wah-bam!, lazy loading! if (data_src !== src) { this.images.eq(load_images[i]).attr('src', data_src); } } }, init : function() { this.load(0); // Opening slide }
}; // End DRIVE_THRU object
DRIVE_THRU.init();
// 1x1px data gif from: https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/
// WHITE: <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
// BLACK: <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="/>
// This simple slider part was learned from: "Prototypal Inheritance and Refactoring the Slider" (https://tutsplus.com/lesson/prototypal-inheritance-and-refactoring-the-slider)
function SimpleSlider( container, nav ) {	this.container = container;	this.nav = nav;	this.allImages = this.container.find('img');	this.imagesWidth = this.allImages[0].width + parseInt(this.allImages.css('border-left-width')) * 2;	this.imagesLength = this.allImages.length;	this.currentLocale = 0;
}
SimpleSlider.prototype.setLocation = function( direction ) {	var position = this.currentLocale;	position += ( ~~( direction === 'right') || - 1);	this.currentLocale = ( position < 0) ? this.imagesLength - 1 : position % this.imagesLength;	return position;
};
SimpleSlider.prototype.transition = function( location ) { DRIVE_THRU.load(this.currentLocale); // This sends the slides current position to the load function in the DRIVE_THRU plugin.	this.container.animate({ 'margin-left': location || -( this.currentLocale * this.imagesWidth ) });
};
(function() {	$('.slideshow').css('overflow', 'hidden');	$('.sliderNav').show();	var ss = new SimpleSlider( $('.slideshow ul'), $('.sliderNav') );	ss.nav.find('a').on('click', function(e) {	e.preventDefault(); ss.setLocation( $(this).data('direction') );	ss.transition();	});
})();
Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader) - Script Codes
Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader) - Script Codes
Home Page Home
Developer Adam
Username depthdev
Uploaded January 07, 2023
Rating 3
Size 12,009 Kb
Views 6,072
Do you need developer help for Drive-ThruJS/Drive-Thru.js (Carousel Lazy-loader)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam (depthdev) Script Codes
Name
CSS Book with Scrolling Highlighter
Pure JavaScript Draggable Ball
Canvas Arc
Responsive SVG Line Graph with Animation
Pure CSS Bulging Box
Responsive. Interactive. SVG.
YouTube URL Parser
Pure CSS Animated Photo Stack
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!