What is the difference between LAN and WAN ports and what are they for?

Analog to Digital Conversion for Beginners Data Acquisition Systems and Microconverters

Generator based on NE555 timer How to increase output power

Meizu M2 Mini: review, specifications and reviews

Creating a photo slider using pure javascript Preparing images for the slider

New cms. Which CMS is better? Review of paid CMS

An introduction to slideshow development in JavaScript. Creating a photo slider using pure javascript Preparing images for the slider

If the slides contain only pictures, you can slightly change the structure:

Previous Next

Don't forget to add a meaningful value to the alt attribute.

To use page links, you can do the following:

... ... ... 1 2 3

Previous Next 1 2 3

Note the use of “data” attributes - some slide shows can insert pictures as a background, and these attributes will be used in the script as places to connect the background and the slide.

Using Lists A semantically correct approach would be to use list items as slides. In this case, the structure will be like this:

If the order of the slides is well defined (for example, in a presentation), you can use numbered lists

CSS Let's start with the following structure:

Previous Next

Because Since the slideshow will run from right to left, the outer container will have a fixed size, and the inner one will be wider since it contains all the slides. The first slide will be visible. This is set via overflow:

Slider ( width: 1024px; overflow: hidden; ) .slider-wrapper ( width: 9999px; height: 683px; position: relative; transition: left 500ms linear; )

Inner wrapper styles include:

Large width
- fixed height, maximum slide height
- position: relative, which will allow you to create slide movement
- CSS transition left, which will make the movement smooth. For simplicity, we have not included all prefixes. You can also use CSS transformations (together with translation) for this.

Slides have a float attribute to make them line up. They are positioned relatively so that you can get their left offset in JS. We use it to create a sliding effect.

Slide ( float: left; position: relative; width: 1024px; height: 683px; )

Although we have set a certain width, in the script we can change it by multiplying the number of slides by the slide width. You never know what width you might need.

Navigation is carried out through the “Previous” and “Next” buttons. We reset their default styles and assign our own:

Slider-nav ( height: 40px; width: 100%; margin-top: 1.5em; ) .slider-nav button ( border: none; display: block; width: 40px; height: 40px; cursor: pointer; text-indent : -9999em; background-color: transparent; background-repeat: no-repeat; ) .slider-nav button.slider-previous ( float: left; background-image: url(previous.png); ) .slider-nav button .slider-next ( float: right; background-image: url(next.png); )

When using page links instead of buttons, you can create the following styles:

Slider-nav ( text-align: center; margin-top: 1.5em; ) .slider-nav a ( display: inline-block; text-decoration: none; border: 1px solid #ddd; color: #444; width: 2em; height: 2em; line-height: 2; text-align: center; ) .slider-nav a.current ( border-color: #000; color: #000; font-weight: bold; )

These classes will be assigned dynamically from the script.

This approach is suitable for the sliding effect. If we want to achieve the fade-in effect, we need to change the styles, since float adds horizontal padding between slides. That is, we don’t need slides on one line - we need a “pack” of slides:

Slider ( width: 1024px; margin: 2em auto; ) .slider-wrapper ( width: 100%; height: 683px; position: relative; /* Creates a context for absolute positioning */ ) .slide ( position: absolute; /* Absolute positioning of all slides */ width: 100%; height: 100%; opacity: 0; /* All slides are hidden */ transition: opacity 500ms linear; ) /* Initially only the first one is visible */ .slider-wrapper >
We use the opacity property to hide slides because screen readers will skip the content of elements that have display: none (see CSS in Action: Invisible Content Just for Screen Reader Users).

Thanks to CSS contextual positioning, we created a “stack” of slides, with the last slide in the source being in front of the others. But that's not what we need. To maintain the order of the slides, we need to hide all slides except the first.

JS uses CSS transition, changing the value of the opacity property of the current slide, and resetting this value to zero for all others.

JavaScript code Slideshow without pagination Slideshow without pagination works by clicking the “Next” and “Previous” buttons. They can be thought of as increment and decrement operators. There is always a pointer (or cursor) that will be increased or decreased each time you press the buttons. Its initial value is 0, and the goal is to select the current slide in the same way as array elements are selected.

So when we click Next the first time, the pointer increases by 1 and we get a second slide. By clicking on Previous, we reduce the pointer and get the first slide. Etc.

Along with the pointer, we use jQuery's .eq() method to get the current slide. In pure JS it looks like this:

Function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );

Remember - NodeList uses indexes just like an array. Another way to select the current slide is with CSS3 selectors:

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = pointer + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

The CSS3:nth-child() selector counts elements starting from 1, so you need to add a 1 to the pointer. After selecting a slide, its parent container must be moved from right to left. In jQuery you can use the .animate() method:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing : "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

There is no .animate() method in regular JS, so we use CSS transitions:

Slider-wrapper ( position: relative; // required transition: left 500ms linear; )

Now you can change the left property dynamically through the style object:

Now we need to create a click event for each control. In jQuery you can use the .on() method, and in pure JS you can use the addEventListener() method.

You also need to check whether the pointer has reached the list boundaries - 0 for “Previous” and the total number of slides for “Next”. In each case, you need to hide the corresponding button:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", previous: ".slider-previous", next : ".slider-next", //... speed: 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $previous = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length; $next.on("click", function() ( index++; $previous.show(); if(index == total - 1) ( index = total - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("click", function() ( index--; $next.show(); if(index == 0) ( index = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);

And in pure JS it looks like this:

Function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider -next"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), actions: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. display = "block"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("click", function() ( self.index--; self.next.style.display = "block"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "none"; ) self._slideTo(self.index); ), false); ) );

Paginated Slideshow In this type of slideshow, each link is responsible for one slide, so there is no need for an index. The animations don't change; the way the user moves through the slides does. For jQuery we will have the following code:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed : 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href ")); slideTo($slide, $element); $a.addClass("current").siblings(). removeClass("current"); )); )); ))(jQuery);

In this case, each anchor corresponds to the ID of a specific slide. In pure JS, you can use both it and the data attribute, which stores the numeric index of the slides inside the NodeList:

Function Slider(element) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), navigate: function() ( for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

Since IE10 you can manage classes via classList:

Link.classList.add("current");

And with IE11, data attributes can be obtained through the dataset property:

Var index = parseInt(a.dataset.slide, 10) + 1;

Paged Slideshows with Controls These slideshows present some complexity to the code - you have to combine the use of index and page hashes. That is, the current slide must be selected based on both the pointer position and the slide selected through links.

This can be synchronized through the number index of each link in the DOM. One link - one slide, so their indexes will be 0, 1, 2, etc.

In jQuery the code will be like this:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... pagination: ".slider-pagination", //... ), options); $. fn.slideshow.index = 0; return this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM numerical index $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == total - 1) ( $.fn.slideshow.index = total - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. index, $element); $a.addClass("current"). siblings().removeClass("current"); )); )); ); //... ))(jQuery);

You can immediately see that the visibility of the cursor has changed - the index is now declared as a property of the slideshow object. This way we avoid scope problems that can be created by callbacks in jQuery. The cursor is now available everywhere, even outside the plugin namespace, since it is declared as a public property of the slideshow object.

The .index() method gives the numeric index of each link.

There is no such method in pure JS, so it's easier to use data attributes:

Now we can connect our procedures with references and use the data attributes we just created:

Actions: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "block"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none "; ) else ( self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), false); ) )

Understanding Dimensions Let's return to the following CSS rule:

Slider-wrapper ( width: 9999px; height: 683px; position: relative; transition: left 500ms linear; )

If we have a lot of slides, then 9999 may not be enough. You need to adjust the sizes for the slides on the fly based on the width of each slide and the number of slides.

In jQuery it's simple:

// Full width slideshow return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width($(window).width()); $(options.wrapper, $element).width($(window).width() * total); //... ));

Take the width of the window and set the width of each slide. The total width of the internal wrapper is obtained by multiplying the width of the window and the number of slides.

// Fixed width slideshow return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width($(options.slides).eq(0).width() * total); //... ));

Here the initial width is set to the width of each slide. You just need to set the overall width of the wrapper.

The inner container is now wide enough. In pure JS this is done approximately the same way:

// Full width slideshow Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // Viewport"s width var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

Fade Effects Fade effects are often used in slide shows. The current slide disappears and the next one appears. jQuery has fadeIn() and fadeOut() methods that work with both the opacity and display properties, so the element is removed from the page when the animation completes (display:none).

In pure JS, it's best to work with the opacity property and use the CSS positioning stack. Then initially the slide will be visible (opacity: 1), and the others will be hidden (opacity: 0).

The following set of styles demonstrates this method:

Slider ( width: 100%; overflow: hidden; position: relative; height: 400px; ) .slider-wrapper ( width: 100%; height: 100%; position: relative; ) .slide ( position: absolute; width: 100 %; height: 100%; opacity: 0; ) .slider-wrapper > .slide:first-child ( opacity: 1; )

In pure JS you need to register the CSS transition of each slide:

Slide ( float: left; position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms linear; )

With jQuery, to use the fadeIn() and fadeOut() methods, you need to change the opacity and display:

Slide ( float: left; position: absolute; width: 100%; height: 100%; display: none; ) .slider-wrapper > .slide:first-child ( display: block; )

In jQuery the code is as follows:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", previous: ".slider-previous", next: ".slider-next" , slides: ".slide", nav: ".slider-nav", speed: 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides , element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); //. .. ); ))(jQuery);

When animating opacity, you also need to change the values of this property for the remaining slides.

In JavaScript it would be:

Slideshow.prototype = ( //... _slideTo: function(slide) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

Media Elements: Video We can include video in a slideshow. Here's an example of a video slideshow from Vimeo:

Videos are included via iframe. This is the same replaceable inline-block as the picture. Replaceable – because the content is taken from an external source.

To create a full-page slideshow, you need to change the styles as follows:

Html, body ( margin: 0; padding: 0; height: 100%; min-height: 100%; /* Height should be the entire page */ ) .slider ( width: 100%; overflow: hidden; height: 100 %; min-height: 100%; /* Height and width to full */ position: absolute; /* Absolute positioning */ ) .slider-wrapper ( width: 100%; height: 100%; /* Height and width to full */ position: relative; ) .slide ( float: left; position: absolute; width: 100%; height: 100%; ) .slide iframe ( display: block; /* Block element */ position: absolute; /* Absolute positioning */ width: 100%; height: 100%; /* Full height and width */ )

Automatic Slideshows Automatic slideshows use timers. Each time the setInterval() timer function is called back, the cursor will be incremented by 1 and thus the next slide will be selected.

When the cursor reaches the maximum number of slides, it must be reset.

Endless slideshows quickly become boring for users. The best practice is to stop the animation when the user hovers over it and resume when the cursor moves away.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( slides: ".slide", speed: 3000, easing: "linear" ), options); var timer = null; // Timer var index = 0; // Cursor var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animate (( opacity: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); var autoSlide = function(element) ( // Initialize the sequence timer = setInterval( function() ( index++; // Increase the cursor by 1 if(index == $(options.slides, element).length) ( index = 0; // Reset the cursor ) slideTo(index, element); ), options.speed ); // The same interval as in the method.animate() ); var startStop = function(element) ( element.hover(function() ( // Stop the animation clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Resume the animation )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);

Both parameters of the .stop() method are set to true, because we don't need to create an animation queue from our sequence.

In pure JS, the code becomes simpler. We register a CSS transition for each slide with a certain duration:

Slide ( transition: opacity 3s linear; /* 3 seconds = 3000 milliseconds */ )

And the code will be like this:

Keyboard Navigation Advanced slideshows offer keyboard navigation, i.e. Scroll through slides by pressing keys. For us, this simply means that we need to register the handling of the keypress event.

To do this, we will access the keyCode property of the event object. It returns the code of the pressed key (list of codes).

Those events that we attached to the “Previous” and “Next” buttons can now be attached to the “left” and “right” keys. jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // Left arrow $next.trigger("click"); ) if( code == 37) ( // Right arrow $previous.trigger("click"); ) ));

In pure JS, instead of the simple .trigger() method, you will have to use dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // mouse click if(code == 39) ( // Left arrow self .next.dispatchEvent(evt); ) if(code == 37) ( // Right arrow self.previous.dispatchEvent(evt); ) ), false);

In decent projects it is not customary to do this. We would need to define the functionality that provides flipping in a public method, and then call it when the button is clicked. Then if another part of the program needed to implement this functionality, there would be no need to emulate DOM events, but could simply call this method.

Callbacks It would be nice to be able to attach some code to any slideshow action that would be executed when that action is performed. This is the purpose of callback functions - they are executed only when a certain action occurs. Let's say our slideshow has captions and they are hidden by default. At the time of animation, we need to show a caption for the current slide or even do something with it.

In jQuery you can create a callback like this:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... callback: function() () ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing, // Callback for the current slide options.callback($ currentSlide)). siblings(options.slides). css("opacity", 0); ); //... ); ))(jQuery);

In this case, the callback is a function from .animate() that takes the current slide as an argument. Here's how you can use it:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Shows the current caption and hides the others $wrapper.find(" .slide-caption").hide(); slide.find(".slide-caption").show("slow"); ) )); ));

In pure JS:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Our callback this.el = document.querySelector(element); this.init(); ) Slideshow. prototype = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = this; var currentSlide = self.slides; currentSlide.style.opacity = 1; for(var i = 0; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

The callback function is defined as the second parameter of the constructor. You can use it like this:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Shows the current caption and hides the others var allSlides = wrapper. querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

External APIs So far our work scenario is simple: all the slides are already in the document. If we need to insert data into it from outside (YouTube, Vimeo, Flickr), we need to populate the slides on the fly as we receive external content.

Since the response from the third-party server may not be immediate, you need to insert a loading animation to show that the process is in progress:

Previous Next

It can be a gif or a pure CSS animation:

#spinner ( border-radius: 50%; border: 2px solid #000; height: 80px; width: 80px; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; ) # spinner:after ( content: ""; position: absolute; background-color: #000; top:2px; left: 48%; height: 38px; width: 2px; border-radius: 5px; -webkit-transform-origin: 50% 97%; transform-origin: 50% 97%; -webkit-animation: angular 1s linear infinite; animation: angular 1s linear infinite; ) @-webkit-keyframes angular ( 0%(-webkit-transform:rotate(0deg );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes angular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( content: ""; position: absolute; background-color: #000; top:6px; left: 48%; height: 35px; width: 2px; border-radius: 5px; -webkit-transform-origin: 50% 94% ; transform-origin: 50% 94%; -webkit-animation: ptangular 6s linear infinite; animation: ptangular 6s linear infinite; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

The steps will be like this:
- request data from outside
- hide bootloader
- parse data
- build HTML
- display a slide show
- process slide shows

Let's say we select a user's most recent videos from YouTube. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... limit: 5, username: "learncodeacademy" ), options); //... var getVideos = function() ( // Get videos from YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Get the video as a JSON object $(options.loader).hide( ); // Hiding the loader var entries = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

In pure JavaScript there is an extra step - creating a method for getting JSON:

Then the procedures are similar:

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON object callback(data); ) else ( console. log(request.status); ) ); ), //... getVideos: function() ( var self = this; // Get YouTube video var ytURL = "https://gdata.youtube.com/feeds/api /videos?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // Get the video as a JSON object var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "none"; // Hiding the loader for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки