html - How do I make my jQuery slides responsive? -
i'm working on website personal practice, , i've integrated jquery slide show photographs. problem can't figure out how make these slides responsive when increasing , decreasing screen size. i've checked feels can't find problem. here code:
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> <link href='http://fonts.googleapis.com/css?family=alegreya+sans+sc:400,400italic,500italic' rel='stylesheet' type='text/css'> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" /> <meta charset="utf-8"/> <link rel="sitemap" type="application/xml" title="sitemap" href="sitemap.xml" /> <style> /* prevents slides flashing */ #slides { display:none; } </style> <!-- jquery --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ var slidewidth = 700; var slideheight = 393; if(window.innerwidth <= 400) { slidewidth = window.innerwidth; } $("#slides").slidesjs({ play: { active: true, // [boolean] generate play , stop buttons. // cannot use own buttons. sorry. effect: "fade", // [string] can either "slide" or "fade". interval: 3000, // [number] time spent on each slide in milliseconds. auto: true, // [boolean] start playing slideshow on load. swap: true, // [boolean] show/hide stop , play buttons pauseonhover: false, // [boolean] pause playing slideshow on hover restartdelay: 2500 // [number] restart delay on inactive slideshow }, width: slidewidth, height: slideheight }); }); </script> <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-tilecolor" content="#ffffff"> <meta name="msapplication-tileimage" content="/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff"> <title>viktor , luise</title> </head> <body> <p class="homeheaderbig">viktor & luise</p> <!-- menu --> <nav> <ul> <li><a href="#" id="dropdown-button">produkte</a></li> </ul> <ul> <li><a href="home.html">home</a></li> <li><a href="kontakt.html">kontakt</a></li> <li><a href="news.html">news</a></li> <li><a href="about.html">Über uns</a></li> <li><a href="impressum.html">impressum</a></li> </ul> </nav> <!-- images --> <div id="slides"> <img src="images/vl-10.jpg" alt="throughtherackjacket"> <img src="images/vl-1.jpg" alt="storewindow"> <img src="images/vl-3.jpg" alt="whitejacket"> <img src="images/vl-4.jpg" alt="showcase1"> <img src="images/vl-5.jpg" alt="showcase2"> <img src="images/vl-6.jpg" alt="showcase3"> <img src="images/vl-7.jpg" alt="lvshoes"> <img src="images/vl-8.jpg" alt="polojacket"> <img src="images/vl-9.jpg" alt="shirt"> </div> <script src="jquery.slides.js"></script> <script src="scripts.js"></script> </body> </html>img { position: relative; padding-top: 4%; } body { font-family: 'alegreya sans sc', sans-serif; font-weight: lighter; } .slides { display: block; max-width: 50%; max-height: 100%; position: relative; margin-left: 20%; margin-top: 2% } .slidesjs-container { overflow: hidden; margin: 0; width: 100%; background-color: red; }// generated 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: + 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); = 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);
bootstrap popular html, css, , js framework developing responsive
see in link: http://getbootstrap.com/
use @media tags define mobile view, desktop view, tablet view, landscape view, etc, example here http://getbootstrap.com/css/
Comments
Post a Comment