質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17480questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9539questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7096questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6181questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQueryプラグイン

    541questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

フルスクリーンのスライドを高さ固定したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,255
退会済みユーザー

退会済みユーザー

初めまして。質問宜しくお願い致します。

こちらの、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;を削除した部分です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2017/02/09 10:20

    失礼いたしました。修正致しました。

    キャンセル

  • kei344

    2017/02/09 11:05 編集

    質問タグにJavaScriptを追加されたほうが良いです。また、スクリプトのどこを編集したのかも書かれたほうが良いと思います。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2017/02/09 11:19

    何度も失礼しました。初めての質問で不手際申し訳ありません。

    キャンセル

回答 1

checkベストアンサー

+1

こんにちは。

私的にはあまりプラグイン自体を改変したくない人です。
プラグインはそのままで、下記のようにHTMLを書けば
やりたいことは実現できると思います。

認識違いでしたらすみませんが、HTML内の「★メモ」に
解説を入れましたのでお読みください。

参考になればと思います。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>SublimeSlideshow Demo Page ~ LIG</title>
    <link id="reset_css" rel="stylesheet" type="text/css" href="css/reset.css" media="all" />
    <link rel="stylesheet" type="text/css" href="css/sublimeSlideshow.css" media="all" />
    <link rel="stylesheet" type="text/css" href="css/index.css" media="all" />
    <script type="text/javascript" src="js/loadCSS.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.sublimeSlideshow.js"></script>
    <script type="text/javascript">
    $(function(){
        $.sublime_slideshow({
            src:[
            {url:"images/1.jpg",title:"星空"},
            {url:"images/2.jpg"},
            {url:"images/3.jpg",title:"月夜"}
            ],
            duration:   7,
            fade:       1,
            scaling:    1.2,
            rotating:   2,
            overlay:    "images/pattern.png"
        });
        // ★メモ
        // プラグインでは背景画像要素(ul.sm-slider)を<body>タグに
        // 固定で入れているようなので、
        // 背景画像要素(ul.sm-slider)が<body>タグに入れられた後に
        // "#container"に入れ直しています。
        $("ul.sm-slider").appendTo("#container");
    });
    </script>

    <style>
    /*
     * ★メモ
     * 背景画像要素(ul.sm-slider)を入れる箱のスタイルです。
     */
    #container {
        width: 90%;
        height: 150px;
        margin: 50px auto;
        overflow: hidden;
    }
    /*
     * ★メモ
     * プラグインでは"position"が"fixed"(固定)ですが
     * "relative"(相対)に変えています。
     * これにより"#container"からはみ出さなくなります。
     */
    #container ul.sm-slider {
        position: relative;
    }
    /*
     * ★メモ 文字の位置です。
     */
    #container ul.sm-slider li div {
        top: 15px;
    }
    /*
     * ★メモ 文字の書式です。
     */
    #container ul.sm-slider li div h3 {
        font-size: 5em;
    }
    </style>
</head>
<body>
<!--
★メモ
ここに背景画像要素(ul.sm-slider)を入れています。
id名や場所は自由ですが、id名を変更した場合はjsとcssも変更してください。
-->
<div id="container"></div>
</body>
</html>


以上

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/10 10:57

    おかげさまで、希望通りにできました。
    このように丁寧に回答を頂き、非常に助かり、また感謝しております。
    本当にありがとうございました!

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17480questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9539questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7096questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6181questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQueryプラグイン

    541questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。