Q&A
ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。
初めまして。質問宜しくお願い致します。
こちらの、jQueryプラグインによる背景画像によるスライドを利用したいのですが、
https://liginc.co.jp/designer/archives/7149
フルスクリーンではなく、高さ固定で従来のスライドの様に使いたいのですが、
どちらを設定すれば良いのかわかりません。
徐々に拡大+テキスト出現+上にかけるテクスチャはそのまま使いたいのですが。
色々触ってみたものの、フルスクリーンは解除できましたが、
高さを保持できておらず、続くコンテンツと被ってしまっている状態です。
また、徐々に拡大はしますが、高さも拡大していってしまっています。
下記がjsファイルの内容です。
( function( $ ){ String.prototype.format = function() { var args = arguments; return this.replace(/{(\d+)}/g, function(match, number) { return typeof args[number] != 'undefined' ? args[number] : match ; }); }; var $backgrounds = $( "<ul class='sm-slider'></ul>" ), methods = { // Init plugin init : function( settings ) { var options = { src: [], scaling: 1.17, rotating: 3, duration: 6, fade: 2, overlay: "images/pattern.png" } $.extend( options, settings ); this.options=options; var css = this.mkcss( options.src.length , options.duration , options.fade ); $('<style type="text/css"></style>').html(css).appendTo('head'); $backgrounds.html(this.mkhtml( options.src )).prependTo("body"); }, // Make HTML Construction mkhtml: function( src ) { var html = "" , li = "<li> <span></span> <div> <h3>%title%</h3> </div> </li>"; for( var i=0,length=src.length; i<length; i++ ) { var title = src[i].title ? src[i].title : ""; html+=li.replace("%title%",title); } return html; }, /** * [mkcss description] * @param {int} bgCount background count * @param {int} duration duration * @return {string} CSS string */ mkcss: function( bgCount , duration , fade ) { var total_time = duration*bgCount, fadeInPercentile = (fade/total_time)*100, remainPercentile = (duration/total_time)*100, fadeOutPercentile = (remainPercentile+(fadeInPercentile*0.6)), fadeOutPercentile_title = (remainPercentile+(fadeInPercentile*0.3)), keyframes = "@keyframes imageAnimation {0% {opacity: 0;animation-timing-function: ease-in;}{0}% {opacity: 1;}{1}% {opacity: 1;}{2}% {opacity: 0; animation-timing-function: ease-out;transform: scale(1.17) translateY(-4%) rotateZ(3deg);}100% { opacity: 0;transform: scale(1.17) translateY(-4%) rotateZ(3deg); }} @keyframes titleAnimation {0% { opacity: 0;transform: translateY(-200px); }{0}% { opacity: 1;transform: translateY(0%); }{1}% { opacity: 1;transform: translateY(0%); }{3}% { opacity: 0; transform: scale(0.4) translateY(100%); }100% { opacity: 0; }}".format(fadeInPercentile,remainPercentile,fadeOutPercentile,fadeOutPercentile_title), otherCSS = ".sm-slider,.sm-slider:after { margin: 0;padding: 0;list-style: none;width: 100%;height: 100%;top: 0px;left: 0px;z-index: -1; }.sm-slider:after { content: '';background: transparent url({0}) repeat top left;z-index: 0; }.sm-slider li span { width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;color: transparent;background-size: cover;background-position: 50% 50%;background-repeat: none;opacity: 0;z-index: 0;animation: imageAnimation {1}s linear infinite 0s; }.sm-slider li div { z-index: 1000;position: absolute;bottom: 30px;left: 0px;width: 100%;text-align: center;opacity: 0;color: #fff;animation: titleAnimation {1}s linear infinite 0s; }".format(this.options.overlay,total_time), css = keyframes+otherCSS, src = this.options.src; for(var i=0;i<bgCount;i++) { var bg = src[i]; css += ".sm-slider li:nth-child({0}) span { background-image: url('{1}');animation-delay: {2}s; } .sm-slider li:nth-child({0}) div { animation-delay: {2}s; }".format(i+1 , bg.url, duration*i ); } if(this.options.rotating===false&&this.options.scaling===false) { css=css.replace(/transform.*?;/g,""); } else if(this.options.rotating===false) { css=css.replace(/rotateZ\(.*?deg\)/g,""); } else if(this.options.scaling===false) { css=css.replace(/scale\(.*?\)/g,""); } if(this.options.rotating) { css=css.replace(/rotateZ\(.*?\)/g,"rotateZ({0}deg)".format(this.options.rotating)); } if(this.options.scaling) { css=css.replace(/scale\(.*?\)/g,"scale({0})".format(this.options.scaling)); } css = this.addPrefix(css); return css; }, /** * [addPrefix description] * @param {string} css The string of CSS to be added prefix */ addPrefix: function( css ) { var keyframes = /@(keyframes[\s\S]*?100%.*?\{[\s\S]*?\}[\s\S]*?\})/g, cssProperties = /(?:animation|transform)[:-].*?;/g; css = css.replace(keyframes,"@-webkit-$1 @-moz-$1 @-ms-$1 @-o-$1 @$1").replace(cssProperties,"-webkit-$& -moz-$& -ms-$& -o-$& $&"); return css; } } // The plugin $.sublime_slideshow = function( options ) { methods.init( options ); }; })( jQuery );
自分で触ったのは、position: fixed;を削除した部分です。
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
失礼いたしました。修正致しました。
質問タグにJavaScriptを追加されたほうが良いです。また、スクリプトのどこを編集したのかも書かれたほうが良いと思います。
何度も失礼しました。初めての質問で不手際申し訳ありません。
回答1件
0
ベストアンサー
こんにちは。
私的にはあまりプラグイン自体を改変したくない人です。
プラグインはそのままで、下記のようにHTMLを書けば
やりたいことは実現できると思います。
認識違いでしたらすみませんが、HTML内の「★メモ」に
解説を入れましたのでお読みください。
参考になればと思います。
HTML
1<!DOCTYPE HTML> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>SublimeSlideshow Demo Page ~ LIG</title> 6 <link id="reset_css" rel="stylesheet" type="text/css" href="css/reset.css" media="all" /> 7 <link rel="stylesheet" type="text/css" href="css/sublimeSlideshow.css" media="all" /> 8 <link rel="stylesheet" type="text/css" href="css/index.css" media="all" /> 9 <script type="text/javascript" src="js/loadCSS.js"></script> 10 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 11 <script type="text/javascript" src="js/jquery.sublimeSlideshow.js"></script> 12 <script type="text/javascript"> 13 $(function(){ 14 $.sublime_slideshow({ 15 src:[ 16 {url:"images/1.jpg",title:"星空"}, 17 {url:"images/2.jpg"}, 18 {url:"images/3.jpg",title:"月夜"} 19 ], 20 duration: 7, 21 fade: 1, 22 scaling: 1.2, 23 rotating: 2, 24 overlay: "images/pattern.png" 25 }); 26 // ★メモ 27 // プラグインでは背景画像要素(ul.sm-slider)を<body>タグに 28 // 固定で入れているようなので、 29 // 背景画像要素(ul.sm-slider)が<body>タグに入れられた後に 30 // "#container"に入れ直しています。 31 $("ul.sm-slider").appendTo("#container"); 32 }); 33 </script> 34 35 <style> 36 /* 37 * ★メモ 38 * 背景画像要素(ul.sm-slider)を入れる箱のスタイルです。 39 */ 40 #container { 41 width: 90%; 42 height: 150px; 43 margin: 50px auto; 44 overflow: hidden; 45 } 46 /* 47 * ★メモ 48 * プラグインでは"position"が"fixed"(固定)ですが 49 * "relative"(相対)に変えています。 50 * これにより"#container"からはみ出さなくなります。 51 */ 52 #container ul.sm-slider { 53 position: relative; 54 } 55 /* 56 * ★メモ 文字の位置です。 57 */ 58 #container ul.sm-slider li div { 59 top: 15px; 60 } 61 /* 62 * ★メモ 文字の書式です。 63 */ 64 #container ul.sm-slider li div h3 { 65 font-size: 5em; 66 } 67 </style> 68</head> 69<body> 70<!-- 71★メモ 72ここに背景画像要素(ul.sm-slider)を入れています。 73id名や場所は自由ですが、id名を変更した場合はjsとcssも変更してください。 74--> 75<div id="container"></div> 76</body> 77</html>
以上
投稿2017/02/09 15:56
総合スコア91
おかげさまで、希望通りにできました。
このように丁寧に回答を頂き、非常に助かり、また感謝しております。
本当にありがとうございました！
あなたの回答
tips
プレビュー
