jquery
Andy
parent
7b0ab84207
commit
159e5af5c2
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* Featherlight Gallery – an extension for the ultra slim jQuery lightbox
|
||||
* Version 1.7.13 - http://noelboss.github.io/featherlight/
|
||||
*
|
||||
* Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
|
||||
* MIT Licensed.
|
||||
**/
|
||||
.featherlight-next,.featherlight-previous{display:block;position:absolute;top:25px;right:25px;bottom:0;left:80%;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(0,0,0,0)}.featherlight-previous{left:25px;right:80%}.featherlight-next:hover,.featherlight-previous:hover{background:rgba(255,255,255,.25)}.featherlight-next span,.featherlight-previous span{display:none;position:absolute;top:50%;left:5%;width:82%;text-align:center;font-size:80px;line-height:80px;margin-top:-40px;text-shadow:0 0 5px #fff;color:#fff;font-style:normal;font-weight:400}.featherlight-next span{right:5%;left:auto}.featherlight-next:hover span,.featherlight-previous:hover span{display:inline-block}.featherlight-first-slide.featherlight-last-slide .featherlight-next,.featherlight-first-slide.featherlight-last-slide .featherlight-previous,.featherlight-loading .featherlight-next,.featherlight-loading .featherlight-previous,.featherlight-swipe-aware .featherlight-next,.featherlight-swipe-aware .featherlight-previous{display:none}@media only screen and (max-device-width:1024px){.featherlight-next:hover,.featherlight-previous:hover{background:0 0}.featherlight-next span,.featherlight-previous span{display:block}}@media only screen and (max-width:1024px){.featherlight-next,.featherlight-previous{top:10px;right:10px;left:85%}.featherlight-previous{left:10px;right:85%}.featherlight-next span,.featherlight-previous span{margin-top:-30px;font-size:40px}}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* Featherlight - ultra slim jQuery lightbox
|
||||
* Version 1.7.13 - http://noelboss.github.io/featherlight/
|
||||
*
|
||||
* Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
|
||||
* MIT Licensed.
|
||||
**/
|
||||
html.with-featherlight{overflow:hidden}.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight link.featherlight-inner,.featherlight script.featherlight-inner,.featherlight style.featherlight-inner{display:none}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font-family:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000;border:0;padding:0}.featherlight .featherlight-close-icon::-moz-focus-inner{border:0;padding:0}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0;-webkit-overflow-scrolling:touch}.featherlight iframe{border:0}.featherlight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:0;margin-right:0;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}@media print{html.with-featherlight>*>:not(.featherlight){display:none}}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery in Webseiten">
|
||||
<title>JavaScript & jQery</title>
|
||||
<title>JavaScript & jQuery</title>
|
||||
<link rel="stylesheet" href="../css/reset.css">
|
||||
<link rel="stylesheet" href="../css/code.css">
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="jQuery in Webseiten">
|
||||
<title>JavaScript & jQery</title>
|
||||
<link rel="stylesheet" href="../css/reset.css">
|
||||
<link rel="stylesheet" href="../css/code.css">
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/flex.css">
|
||||
<link rel="stylesheet" href="../css/featherlight.min.css">
|
||||
<link rel="stylesheet" href="../css/featherlight.gallery.min.css">
|
||||
<style>
|
||||
.gallery img{
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="wrapper">
|
||||
<a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li><a href="float.html">Float</a></li>
|
||||
<li><a href="position.html">Position</a></li>
|
||||
<li><a href="flexbox.html">Flexbox</a></li>
|
||||
<li><a href="grid.html">Grid</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main" class="wrapper">
|
||||
<h1>JavaScript & jQuery-Plugins</h1>
|
||||
<article>
|
||||
<h2>jQery Plugin integrieren</h2>
|
||||
<p>Die JavaScript-Bibliothek jQuery stellt eigentlich nur Grundfunktionen bereit. Für speziellere Aufgaben gibt es Plugins, das heißt zusätzliche JavaScript-Dateien.</p>
|
||||
<p>Für dieses Beispiel einer (lightbox) Galerie habe ich <a href="https://noelboss.github.io/featherlight/"> https://noelboss.github.io/featherlight/</a>ausgewählt.</p>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Einbinden von jQuery und Plugins</h2>
|
||||
<pre class="line-numbers language-html">
|
||||
<code class="language-html"></footer>
|
||||
<script src="../js/jquery-3.4.1.min.js"></script>
|
||||
<script src="../js/jquery.detect_swipe.js"></script> /* Swipe Funktion Smartphone */
|
||||
<script src="../js/featherlight.min.js"></script>
|
||||
<script src="../js/featherlight.gallery.min.js"></script> /* Galerie Funktion */
|
||||
</body>
|
||||
</code>
|
||||
</pre>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Galerie mit Funktionen zum öffnen und blättern von Bildern</h2>
|
||||
<a class="gallery box" href="../img/gallery/1.jpg"><img src="http://via.placeholder.com/150" alt=""></a>
|
||||
<a class="gallery box" href="../img/gallery/2.jpg"><img src="http://via.placeholder.com/150" alt=""></a>
|
||||
<a class="gallery box" href="../img/gallery/3.jpg"><img src="http://via.placeholder.com/150" alt=""></a>
|
||||
<a class="gallery box" href="../img/gallery/4.jpg"><img src="http://via.placeholder.com/150" alt=""></a>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Eigene Konfiguration des jQuery Plugins</h2>
|
||||
<pre class="line-numbers language-js">
|
||||
<code class="language-js">$('a.gallery').featherlightGallery({
|
||||
previousIcon: '&#9664;', /* Code that is used as previous icon */
|
||||
nextIcon: '&#9654;', /* Code that is used as next icon */
|
||||
galleryFadeIn: 100, /* fadeIn speed when slide is loaded */
|
||||
galleryFadeOut: 300 /* fadeOut speed before slide is loaded */
|
||||
});
|
||||
</code>
|
||||
</pre>
|
||||
</article>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrapper">
|
||||
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../js/code.js"></script>
|
||||
<script src="../js/jquery-3.4.1.min.js"></script>
|
||||
<script src="../js/jQuery.js"></script>
|
||||
<script src="../js/featherlight.min.js"></script>
|
||||
<script src="../js/featherlight.gallery.min.js"></script>
|
||||
|
||||
<script>/* Eigene Konfiguration der Galerie */
|
||||
$('a.gallery').featherlightGallery({
|
||||
previousIcon: '◀', /* Code that is used as previous icon */
|
||||
nextIcon: '▶', /* Code that is used as next icon */
|
||||
galleryFadeIn: 100, /* fadeIn speed when slide is loaded */
|
||||
galleryFadeOut: 300 /* fadeOut speed before slide is loaded */
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* Featherlight Gallery – an extension for the ultra slim jQuery lightbox
|
||||
* Version 1.7.13 - http://noelboss.github.io/featherlight/
|
||||
*
|
||||
* Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
|
||||
* MIT Licensed.
|
||||
**/!function(a){"use strict";function b(c,d){if(!(this instanceof b)){var e=new b(a.extend({$source:c,$currentTarget:c.first()},d));return e.open(),e}a.featherlight.apply(this,arguments),this.chainCallbacks(h)}var c=function(a){window.console&&window.console.warn&&window.console.warn("FeatherlightGallery: "+a)};if("undefined"==typeof a)return c("Too much lightness, Featherlight needs jQuery.");if(!a.featherlight)return c("Load the featherlight plugin before the gallery plugin");var d="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,e=a.event&&a.event.special.swipeleft&&a,f=window.Hammer&&function(a){var b=new window.Hammer.Manager(a[0]);return b.add(new window.Hammer.Swipe),b},g=d&&(e||f);d&&!g&&c("No compatible swipe library detected; one must be included before featherlightGallery for swipe motions to navigate the galleries.");var h={afterClose:function(a,b){var c=this;return c.$instance.off("next."+c.namespace+" previous."+c.namespace),c._swiper&&(c._swiper.off("swipeleft",c._swipeleft).off("swiperight",c._swiperight),c._swiper=null),a(b)},beforeOpen:function(a,b){var c=this;return c.$instance.on("next."+c.namespace+" previous."+c.namespace,function(a){var b="next"===a.type?1:-1;c.navigateTo(c.currentNavigation()+b)}),g&&(c._swiper=g(c.$instance).on("swipeleft",c._swipeleft=function(){c.$instance.trigger("next")}).on("swiperight",c._swiperight=function(){c.$instance.trigger("previous")}),c.$instance.addClass(this.namespace+"-swipe-aware",g)),c.$instance.find("."+c.namespace+"-content").append(c.createNavigation("previous")).append(c.createNavigation("next")),a(b)},beforeContent:function(a,b){var c=this.currentNavigation(),d=this.slides().length;return this.$instance.toggleClass(this.namespace+"-first-slide",0===c).toggleClass(this.namespace+"-last-slide",c===d-1),a(b)},onKeyUp:function(a,b){var c={37:"previous",39:"next"}[b.keyCode];return c?(this.$instance.trigger(c),!1):a(b)}};a.featherlight.extend(b,{autoBind:"[data-featherlight-gallery]"}),a.extend(b.prototype,{previousIcon:"◀",nextIcon:"▶",galleryFadeIn:100,galleryFadeOut:300,slides:function(){return this.filter?this.$source.find(this.filter):this.$source},images:function(){return c("images is deprecated, please use slides instead"),this.slides()},currentNavigation:function(){return this.slides().index(this.$currentTarget)},navigateTo:function(b){var c=this,d=c.slides(),e=d.length,f=c.$instance.find("."+c.namespace+"-inner");return b=(b%e+e)%e,c.$currentTarget=d.eq(b),c.beforeContent(),a.when(c.getContent(),f.fadeTo(c.galleryFadeOut,.2)).always(function(a){c.setContent(a),c.afterContent(),a.fadeTo(c.galleryFadeIn,1)})},createNavigation:function(b){var c=this;return a('<span title="'+b+'" class="'+this.namespace+"-"+b+'"><span>'+this[b+"Icon"]+"</span></span>").click(function(d){a(this).trigger(b+"."+c.namespace),d.preventDefault()})}}),a.featherlightGallery=b,a.fn.featherlightGallery=function(a){return b.attach(this,a),this},a(document).ready(function(){b._onReady()})}(jQuery);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,84 @@
|
|||
/**
|
||||
* jquery.detectSwipe v2.1.3
|
||||
* jQuery Plugin to obtain touch gestures from iPhone, iPod Touch, iPad and Android
|
||||
* http://github.com/marcandre/detect_swipe
|
||||
* Based on touchwipe by Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
|
||||
*/
|
||||
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
// Node/CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function($) {
|
||||
|
||||
$.detectSwipe = {
|
||||
version: '2.1.2',
|
||||
enabled: 'ontouchstart' in document.documentElement,
|
||||
preventDefault: true,
|
||||
threshold: 20
|
||||
};
|
||||
|
||||
var startX,
|
||||
startY,
|
||||
isMoving = false;
|
||||
|
||||
function onTouchEnd() {
|
||||
this.removeEventListener('touchmove', onTouchMove);
|
||||
this.removeEventListener('touchend', onTouchEnd);
|
||||
isMoving = false;
|
||||
}
|
||||
|
||||
function onTouchMove(e) {
|
||||
if ($.detectSwipe.preventDefault) { e.preventDefault(); }
|
||||
if(isMoving) {
|
||||
var x = e.touches[0].pageX;
|
||||
var y = e.touches[0].pageY;
|
||||
var dx = startX - x;
|
||||
var dy = startY - y;
|
||||
var dir;
|
||||
if(Math.abs(dx) >= $.detectSwipe.threshold) {
|
||||
dir = dx > 0 ? 'left' : 'right'
|
||||
}
|
||||
else if(Math.abs(dy) >= $.detectSwipe.threshold) {
|
||||
dir = dy > 0 ? 'up' : 'down'
|
||||
}
|
||||
if(dir) {
|
||||
onTouchEnd.call(this);
|
||||
$(this).trigger('swipe', dir).trigger('swipe' + dir);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchStart(e) {
|
||||
if (e.touches.length == 1) {
|
||||
startX = e.touches[0].pageX;
|
||||
startY = e.touches[0].pageY;
|
||||
isMoving = true;
|
||||
this.addEventListener('touchmove', onTouchMove, false);
|
||||
this.addEventListener('touchend', onTouchEnd, false);
|
||||
}
|
||||
}
|
||||
|
||||
function setup() {
|
||||
this.addEventListener && this.addEventListener('touchstart', onTouchStart, false);
|
||||
}
|
||||
|
||||
function teardown() {
|
||||
this.removeEventListener('touchstart', onTouchStart);
|
||||
}
|
||||
|
||||
$.event.special.swipe = { setup: setup };
|
||||
|
||||
$.each(['left', 'up', 'down', 'right'], function () {
|
||||
$.event.special['swipe' + this] = { setup: function(){
|
||||
$(this).on('swipe', $.noop);
|
||||
} };
|
||||
});
|
||||
}));
|
||||
Loading…
Reference in New Issue