5
Je travaille sur un site web pour la pratique personnelle, et j'ai intégré un diaporama jQuery pour certaines photos. Mon problème est que je n'arrive pas à comprendre comment rendre ces diapositives en augmentant et en diminuant la taille de l'écran. J'ai vérifié ce qui ressemble à tout mais je ne trouve pas le problème. Voici le code:Comment rendre mes diapositives jQuery réactives?
<!DOCTYPE html>
<html>
\t <head>
\t \t <link rel="stylesheet" type="text/css" href="styles.css">
\t \t <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,400italic,500italic' rel='stylesheet' type='text/css'>
\t \t <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
\t \t <meta charset="UTF-8"/>
\t \t <link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml" />
\t \t
\t \t <style>
\t \t /* Prevents slides from flashing */
\t \t #slides {
\t \t display:none;
\t \t }
\t \t </style>
\t \t
\t \t <!-- jQuery -->
\t \t <script type="text/javascript" src="jquery.js"></script>
\t \t <script type="text/javascript"> \t
\t
\t \t $(function(){
\t \t
\t \t \t var slideWidth = 700;
\t \t \t var slideHeight = 393;
\t \t \t
\t \t \t if(window.innerWidth <= 400) {
\t \t \t \t
\t \t \t \t slideWidth = window.innerWidth;
\t \t \t }
\t \t \t
\t \t \t $("#slides").slidesjs({
\t \t \t play: {
\t \t \t active: true,
\t \t \t // [boolean] Generate the play and stop buttons.
\t \t \t // You cannot use your own buttons. Sorry.
\t \t \t effect: "fade",
\t \t \t // [string] Can be either "slide" or "fade".
\t \t \t interval: 3000,
\t \t \t // [number] Time spent on each slide in milliseconds.
\t \t \t auto: true,
\t \t \t // [boolean] Start playing the slideshow on load.
\t \t \t swap: true,
\t \t \t // [boolean] show/hide stop and play buttons
\t \t \t pauseOnHover: false,
\t \t \t // [boolean] pause a playing slideshow on hover
\t \t \t restartDelay: 2500
\t \t \t // [number] restart delay on inactive slideshow
\t \t \t },
\t \t \t \t width: slideWidth,
\t \t \t \t height: slideHeight
\t \t \t });
\t \t \t
\t \t });
\t \t
\t \t </script>
\t \t
\t \t <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
\t \t <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
\t \t <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
\t \t <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
\t \t <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
\t \t <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
\t \t <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
\t \t <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
\t \t <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
\t \t <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
\t \t <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
\t \t <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
\t \t <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
\t \t <link rel="manifest" href="/manifest.json">
\t \t <meta name="msapplication-TileColor" content="#ffffff">
\t \t <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
\t \t <meta name="theme-color" content="#ffffff">
\t \t <title>Viktor and Luise</title>
\t </head>
\t <body>
\t \t
\t \t <p class="HomeHeaderBig">Viktor & Luise</p>
\t \t
\t \t
\t \t <!-- Menu -->
\t \t
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li><a href="#" id="dropdown-button">Produkte</a></li>
\t \t \t </ul>
\t \t \t <ul>
\t \t \t \t <li><a href="Home.html">Home</a></li>
\t \t \t \t <li><a href="Kontakt.html">Kontakt</a></li>
\t \t \t \t <li><a href="News.html">News</a></li>
\t \t \t \t <li><a href="About.html">Über uns</a></li>
\t \t \t \t <li><a href="Impressum.html">Impressum</a></li>
\t \t \t </ul>
\t \t </nav>
\t \t
\t \t <!-- Images -->
\t \t <div id="slides">
\t \t <img src="Images/VL-10.jpg" alt="throughtherackjacket">
\t \t <img src="Images/VL-1.jpg" alt="storewindow">
\t \t <img src="Images/VL-3.jpg" alt="whitejacket">
\t \t <img src="Images/VL-4.jpg" alt="showcase1">
\t \t <img src="Images/VL-5.jpg" alt="showcase2">
\t \t <img src="Images/VL-6.jpg" alt="showcase3">
\t \t <img src="Images/VL-7.jpg" alt="lvshoes">
\t \t <img src="Images/VL-8.jpg" alt="polojacket">
\t \t <img src="Images/VL-9.jpg" alt="shirt">
\t \t </div>
\t \t <script src="jquery.slides.js"></script>
\t \t <script src="scripts.js"></script>
\t </body>
</html>img {
\t position: relative;
\t padding-top: 4%;
}
body {
\t font-family: 'Alegreya Sans SC', sans-serif;
\t font-weight: lighter;
}
.slides {
\t display: block;
\t max-width: 50%;
\t max-height: 100%;
\t position: relative;
\t margin-left: 20%;
\t margin-top: 2%
}
.slidesjs-container {
\t overflow: hidden;
\t margin: 0;
\t width: 100%;
\t background-color: red;
}// Generated by CoffeeScript 1.6.1
(function() {
(function($, window, document) {
var Plugin, defaults, pluginName;
pluginName = "slidesjs";
defaults = {
width: 1000,
height: 900,
start: 1,
navigation: {
active: true,
effect: "slide"
},
pagination: {
active: false,
effect: "slide"
},
play: {
active: false,
effect: "slide",
interval: 5000,
auto: false,
swap: true,
pauseOnHover: false,
restartDelay: 2500
},
effect: {
slide: {
speed: 500
},
fade: {
speed: 300,
crossfade: true
}
},
callback: {
loaded: function() {},
start: function() {},
complete: function() {}
}
};
Plugin = (function() {
function Plugin(element, options) {
this.element = element;
this.options = $.extend(true, {}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
return Plugin;
})();
Plugin.prototype.init = function() {
var $element, nextButton, pagination, playButton, prevButton, stopButton,
_this = this;
$element = $(this.element);
this.data = $.data(this);
$.data(this, "animating", false);
$.data(this, "total", $element.children().not(".slidesjs-navigation", $element).length);
$.data(this, "current", this.options.start - 1);
$.data(this, "vendorPrefix", this._getVendorPrefix());
if (typeof TouchEvent !== "undefined") {
$.data(this, "touch", true);
this.options.effect.slide.speed = this.options.effect.slide.speed/2;
}
$element.css({
});
$element.slidesContainer = $element.children().not(".slidesjs-navigation", $element).wrapAll("<div class='slidesjs-container'>", $element).parent().css({
overflow: "hidden",
position: "relative"
});
$(".slidesjs-container", $element).wrapInner("<div class='slidesjs-control'>", $element).children();
$(".slidesjs-control", $element).css({
position: "relative",
left: 0
});
$(".slidesjs-control", $element).children().addClass("slidesjs-slide").css({
position: "absolute",
top: 0,
left: 0,
width: "100%",
zIndex: 0,
display: "none",
webkitBackfaceVisibility: "hidden"
});
$.each($(".slidesjs-control", $element).children(), function(i) {
var $slide;
$slide = $(this);
return $slide.attr("slidesjs-index", i);
});
if (this.data.touch) {
$(".slidesjs-control", $element).on("touchstart", function(e) {
return _this._touchstart(e);
});
$(".slidesjs-control", $element).on("touchmove", function(e) {
return _this._touchmove(e);
});
$(".slidesjs-control", $element).on("touchend", function(e) {
return _this._touchend(e);
});
}
$element.fadeIn(0);
this.update();
if (this.data.touch) {
this._setuptouch();
}
$(".slidesjs-control", $element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function() {
return $(this).css({
zIndex: 10
});
});
if (this.options.navigation.active) {
prevButton = $("<a>", {
"class": "slidesjs-previous slidesjs-navigation",
href: "#",
title: "Previous",
text: "<"
}).appendTo($element);
nextButton = $("<a>", {
"class": "slidesjs-next slidesjs-navigation",
href: "#",
title: "Next",
text: ">"
}).appendTo($element);
}
$(".slidesjs-next", $element).click(function(e) {
e.preventDefault();
_this.stop(true);
return _this.next(_this.options.navigation.effect);
});
$(".slidesjs-previous", $element).click(function(e) {
e.preventDefault();
_this.stop(true);
return _this.previous(_this.options.navigation.effect);
});
if (this.options.play.active) {
playButton = $("<a>", {
"class": "slidesjs-play slidesjs-navigation",
href: "#",
title: "Play",
text: ""
}).appendTo($element);
stopButton = $("<a>", {
"class": "slidesjs-stop slidesjs-navigation",
href: "#",
title: "Stop",
text: ""
}).appendTo($element);
playButton.click(function(e) {
e.preventDefault();
return _this.play(true);
});
stopButton.click(function(e) {
e.preventDefault();
return _this.stop(true);
});
if (this.options.play.swap) {
stopButton.css({
display: "none"
});
}
}
if (this.options.pagination.active) {
pagination = $("<ul>", {
"class": "slidesjs-pagination"
}).appendTo($element);
$.each(new Array(this.data.total), function(i) {
var paginationItem, paginationLink;
paginationItem = $("<li>", {
"class": "slidesjs-pagination-item"
}).appendTo(pagination);
paginationLink = $("<a>", {
href: "#",
"data-slidesjs-item": i,
html: i + 1
}).appendTo(paginationItem);
return paginationLink.click(function(e) {
e.preventDefault();
_this.stop(true);
return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1);
});
});
}
$(window).bind("resize", function() {
return _this.update();
});
this._setActive();
if (this.options.play.auto) {
this.play();
}
return this.options.callback.loaded(this.options.start);
};
Plugin.prototype._setActive = function(number) {
var $element, current;
$element = $(this.element);
this.data = $.data(this);
current = number > -1 ? number : this.data.current;
$(".active", $element).removeClass("active");
return $(".slidesjs-pagination li:eq(" + current + ") a", $element).addClass("active");
};
Plugin.prototype.update = function() {
var $element, height, width;
$element = $(this.element);
this.data = $.data(this);
$(".slidesjs-control", $element).children(":not(:eq(" + this.data.current + "))").css({
display: "none",
left: 0,
zIndex: 0
});
width = 1000;
height = 900;
this.options.width = width;
this.options.height = height;
return $(".slidesjs-control, .slidesjs-container", $element).css({
width: width,
height: height
});
};
Plugin.prototype.next = function(effect) {
var $element;
$element = $(this.element);
this.data = $.data(this);
$.data(this, "direction", "next");
if (effect === void 0) {
effect = this.options.navigation.effect;
}
if (effect === "fade") {
return this._fade();
} else {
return this._slide();
}
};
Plugin.prototype.previous = function(effect) {
var $element;
$element = $(this.element);
this.data = $.data(this);
$.data(this, "direction", "previous");
if (effect === void 0) {
effect = this.options.navigation.effect;
}
if (effect === "fade") {
return this._fade();
} else {
return this._slide();
}
};
Plugin.prototype.goto = function(number) {
var $element, effect;
$element = $(this.element);
this.data = $.data(this);
if (effect === void 0) {
effect = this.options.pagination.effect;
}
if (number > this.data.total) {
number = this.data.total;
} else if (number < 1) {
number = 1;
}
if (typeof number === "number") {
if (effect === "fade") {
return this._fade(number);
} else {
return this._slide(number);
}
} else if (typeof number === "string") {
if (number === "first") {
if (effect === "fade") {
return this._fade(0);
} else {
return this._slide(0);
}
} else if (number === "last") {
if (effect === "fade") {
return this._fade(this.data.total);
} else {
return this._slide(this.data.total);
}
}
}
};
Plugin.prototype._setuptouch = function() {
var $element, next, previous, slidesControl;
$element = $(this.element);
this.data = $.data(this);
slidesControl = $(".slidesjs-control", $element);
next = this.data.current + 1;
previous = this.data.current - 1;
if (previous < 0) {
previous = this.data.total - 1;
}
if (next > this.data.total - 1) {
next = 0;
}
slidesControl.children(":eq(" + next + ")").css({
display: "block",
left: this.options.width
});
return slidesControl.children(":eq(" + previous + ")").css({
display: "block",
left: -this.options.width
});
};
Plugin.prototype._touchstart = function(e) {
var $element, touches;
$element = $(this.element);
this.data = $.data(this);
touches = e.originalEvent.touches[0];
this._setuptouch();
$.data(this, "touchtimer", Number(new Date()));
$.data(this, "touchstartx", touches.pageX);
$.data(this, "touchstarty", touches.pageY);
return e.stopPropagation();
};
Plugin.prototype._touchend = function(e) {
var $element, duration, prefix, slidesControl, timing, touches, transform,
_this = this;
$element = $(this.element);
this.data = $.data(this);
touches = e.originalEvent.touches[0];
slidesControl = $(".slidesjs-control", $element);
if (slidesControl.position().left > this.options.width * 0.5 || slidesControl.position().left > this.options.width * 0.1 && (Number(new Date()) - this.data.touchtimer < 250)) {
$.data(this, "direction", "previous");
this._slide();
} else if (slidesControl.position().left < -(this.options.width * 0.5) || slidesControl.position().left < -(this.options.width * 0.1) && (Number(new Date()) - this.data.touchtimer < 250)) {
$.data(this, "direction", "next");
this._slide();
} else {
prefix = this.data.vendorPrefix;
transform = prefix + "Transform";
duration = prefix + "TransitionDuration";
timing = prefix + "TransitionTimingFunction";
slidesControl[0].style[transform] = "translateX(0px)";
slidesControl[0].style[duration] = this.options.effect.slide.speed * 0.85 + "ms";
}
slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
prefix = _this.data.vendorPrefix;
transform = prefix + "Transform";
duration = prefix + "TransitionDuration";
timing = prefix + "TransitionTimingFunction";
slidesControl[0].style[transform] = "";
slidesControl[0].style[duration] = "";
return slidesControl[0].style[timing] = "";
});
return e.stopPropagation();
};
Plugin.prototype._touchmove = function(e) {
var $element, prefix, slidesControl, touches, transform;
$element = $(this.element);
this.data = $.data(this);
touches = e.originalEvent.touches[0];
prefix = this.data.vendorPrefix;
slidesControl = $(".slidesjs-control", $element);
transform = prefix + "Transform";
$.data(this, "scrolling", Math.abs(touches.pageX - this.data.touchstartx) < Math.abs(touches.pageY - this.data.touchstarty));
if (!this.data.animating && !this.data.scrolling) {
e.preventDefault();
this._setuptouch();
slidesControl[0].style[transform] = "translateX(" + (touches.pageX - this.data.touchstartx) + "px)";
}
return e.stopPropagation();
};
Plugin.prototype.play = function(next) {
var $element, currentSlide, slidesContainer,
_this = this;
$element = $(this.element);
this.data = $.data(this);
if (!this.data.playInterval) {
if (next) {
currentSlide = this.data.current;
this.data.direction = "next";
if (this.options.play.effect === "fade") {
this._fade();
} else {
this._slide();
}
}
$.data(this, "playInterval", setInterval((function() {
currentSlide = _this.data.current;
_this.data.direction = "next";
if (_this.options.play.effect === "fade") {
return _this._fade();
} else {
return _this._slide();
}
}), this.options.play.interval));
slidesContainer = $(".slidesjs-container", $element);
if (this.options.play.pauseOnHover) {
slidesContainer.unbind();
slidesContainer.bind("mouseenter", function() {
return _this.stop();
});
slidesContainer.bind("mouseleave", function() {
if (_this.options.play.restartDelay) {
return $.data(_this, "restartDelay", setTimeout((function() {
return _this.play(true);
}), _this.options.play.restartDelay));
} else {
return _this.play();
}
});
}
$.data(this, "playing", true);
$(".slidesjs-play", $element).addClass("slidesjs-playing");
if (this.options.play.swap) {
$(".slidesjs-play", $element).hide();
return $(".slidesjs-stop", $element).show();
}
}
};
Plugin.prototype.stop = function(clicked) {
var $element;
$element = $(this.element);
this.data = $.data(this);
clearInterval(this.data.playInterval);
if (this.options.play.pauseOnHover && clicked) {
$(".slidesjs-container", $element).unbind();
}
$.data(this, "playInterval", null);
$.data(this, "playing", false);
$(".slidesjs-play", $element).removeClass("slidesjs-playing");
if (this.options.play.swap) {
$(".slidesjs-stop", $element).hide();
return $(".slidesjs-play", $element).show();
}
};
Plugin.prototype._slide = function(number) {
var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
_this = this;
$element = $(this.element);
this.data = $.data(this);
if (!this.data.animating && number !== this.data.current + 1) {
$.data(this, "animating", true);
currentSlide = this.data.current;
if (number > -1) {
number = number - 1;
value = number > currentSlide ? 1 : -1;
direction = number > currentSlide ? -this.options.width : this.options.width;
next = number;
} else {
value = this.data.direction === "next" ? 1 : -1;
direction = this.data.direction === "next" ? -this.options.width : this.options.width;
next = currentSlide + value;
}
if (next === -1) {
next = this.data.total - 1;
}
if (next === this.data.total) {
next = 0;
}
this._setActive(next);
slidesControl = $(".slidesjs-control", $element);
if (number > -1) {
slidesControl.children(":not(:eq(" + currentSlide + "))").css({
display: "none",
left: 0,
zIndex: 0
});
}
slidesControl.children(":eq(" + next + ")").css({
display: "block",
left: value * this.options.width,
zIndex: 10
});
this.options.callback.start(currentSlide + 1);
if (this.data.vendorPrefix) {
prefix = this.data.vendorPrefix;
transform = prefix + "Transform";
duration = prefix + "TransitionDuration";
timing = prefix + "TransitionTimingFunction";
slidesControl[0].style[transform] = "translateX(" + direction + "px)";
slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
slidesControl[0].style[transform] = "";
slidesControl[0].style[duration] = "";
slidesControl.children(":eq(" + next + ")").css({
left: 0
});
slidesControl.children(":eq(" + currentSlide + ")").css({
display: "none",
left: 0,
zIndex: 0
});
$.data(_this, "current", next);
$.data(_this, "animating", false);
slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
slidesControl.children(":not(:eq(" + next + "))").css({
display: "none",
left: 0,
zIndex: 0
});
if (_this.data.touch) {
_this._setuptouch();
}
return _this.options.callback.complete(next + 1);
});
} else {
return slidesControl.stop().animate({
left: direction
}, this.options.effect.slide.speed, (function() {
slidesControl.css({
left: 0
});
slidesControl.children(":eq(" + next + ")").css({
left: 0
});
return slidesControl.children(":eq(" + currentSlide + ")").css({
display: "none",
left: 0,
zIndex: 0
}, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
}));
}
}
};
Plugin.prototype._fade = function(number) {
var $element, currentSlide, next, slidesControl, value,
_this = this;
$element = $(this.element);
this.data = $.data(this);
if (!this.data.animating && number !== this.data.current + 1) {
$.data(this, "animating", true);
currentSlide = this.data.current;
if (number) {
number = number - 1;
value = number > currentSlide ? 1 : -1;
next = number;
} else {
value = this.data.direction === "next" ? 1 : -1;
next = currentSlide + value;
}
if (next === -1) {
next = this.data.total - 1;
}
if (next === this.data.total) {
next = 0;
}
this._setActive(next);
slidesControl = $(".slidesjs-control", $element);
slidesControl.children(":eq(" + next + ")").css({
display: "none",
left: 0,
zIndex: 10
});
this.options.callback.start(currentSlide + 1);
if (this.options.effect.fade.crossfade) {
slidesControl.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed);
return slidesControl.children(":eq(" + next + ")").stop().fadeIn(this.options.effect.fade.speed, (function() {
slidesControl.children(":eq(" + next + ")").css({
zIndex: 0
});
$.data(_this, "animating", false);
$.data(_this, "current", next);
return _this.options.callback.complete(next + 1);
}));
} else {
return slidesControl.children(":eq(" + currentSlide + ")").stop().fadeOut(this.options.effect.fade.speed, (function() {
slidesControl.children(":eq(" + next + ")").stop().fadeIn(_this.options.effect.fade.speed, (function() {
return slidesControl.children(":eq(" + next + ")").css({
zIndex: 10
});
}));
$.data(_this, "animating", false);
$.data(_this, "current", next);
return _this.options.callback.complete(next + 1);
}));
}
}
};
Plugin.prototype._getVendorPrefix = function() {
var body, i, style, transition, vendor;
body = document.body || document.documentElement;
style = body.style;
transition = "transition";
vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
transition = transition.charAt(0).toUpperCase() + transition.substr(1);
i = 0;
while (i < vendor.length) {
if (typeof style[vendor[i] + transition] === "string") {
return vendor[i];
}
i++;
}
return false;
};
return $.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
return $.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
};
})(jQuery, window, document);
}).call(this);
Travaillez sur la suppression de la largeur de vos configurations de diapositives. i.e 'slideWidth = 700' – SaidbakR
Commander [cette démo] (http://jsbin.com/tufuniligo). C'est réactif. C'est votre code sans [tag: css] – SaidbakR
Après avoir supprimé les largeurs, tout le diaporama et les images disparaissent. – stefsrieder