5
Kişisel uygulama için bir web sitesinde çalışıyorum ve bazı fotoğraflar için jQuery slayt gösterisi ekledim. Benim sorunum, ekran boyutlarını arttırıp azaltırken bu slaytların nasıl yanıt vereceğini anlayamıyorum. Herşeyin nasıl hissettirdiğini kontrol ettim ama problemi bulamıyorum.jQuery slaytlarımı nasıl yanıtlayabilirim?
<!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);
Slayt yapılandırmalarınızdan genişliği kaldırmaya çalışın. yani slideWidth = 700' – SaidbakR
Ödeme [bu demo] (http://jsbin.com/tufuniligo). Bu duyarlı. [Tag: css] – SaidbakR
olmadan sizin kodunuz. Genişlikleri kaldırdıktan sonra, tüm slayt gösterisi ve resimler kaybolur. – stefsrieder