3

Galleria プラグインを使用していますが、ガレリア スライダー内のオーディオ プレーヤーであるメイン オブジェクトを中央に配置したいと考えています。しかし、どうすればこれを行うことができますか?

以下は、基本的なガレリア スタイルです。

<style>
    #galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</style>

ここにデモ アプリケーションのページがあります: DEMO

アップデート：

以下は、スライダーで特定のオーディオプレーヤーをそれぞれ選択して中央に配置しようとする現在のコードです。

<?php

                          $j = 0;

        ?>

    <style>
        #galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; margin:0; }
    </style>

     <div id="galleriaaudio_<?php echo $key; ?>">
    <?php
    foreach ($arrAudioFile[$key] as $a) { ?>

    <a href="audio.php?key=<?php echo $key; ?>&j=<?php echo $j; ?>&a=<?php echo $a; ?>"><img class="iframe" src="Images/audiothumbnail.png"></a>

    <?php $j++; ?>
    <?php } ?>
    </div><br/>

             <script type="text/javascript">

                          $(window).load(function(){
       var key = '<?php echo $key; ?>';
       var j = '<?php echo $j; ?>';
        $("#galleriaaudio_"+key)
            .find("iframe")
            .contents()
            .find("#jp_container_"+key+"-"+j)
            .attr('style', 'margin: 0 auto');
        });

                Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
                Galleria.run('#galleriaaudio_<?php echo $key; ?>');

              </script> 

Below is releavt divs belonging to each audio player which gives each audio player uniqueness:

      <div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
      <div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
4

5 に答える 5

7

あなたは問題のためにcssの下で使用を試みることができます。

CSS：

ファイル： http： //helios.hud.ac.uk/u0867587/Mobile_app/jquery/skin/jplayer.blue.monday.css

ライン：33

div.jp-audio {
    margin: 0 auto;
    width: 420px;
}

スクリーンショット：

ここに画像の説明を入力してください

于 2013-02-21T15:37:56.193 に答える
0

特定のアイテムに使用したい場合は、これを使用してください。

$(document).ready(function () {
    var key = '<?php echo $key; ?>';
    $("#galleriaaudio_"+key)
        .find("iframe")
        .contents()
        .find("#jp_container_"+key+"-0")
        .attr('style', 'margin: 0 auto');
 });

これがうまくいくことを願っています。

于 2013-02-18T11:55:58.410 に答える
0

http://helios.hud.ac.uk/u0867587/Mobile_app/jquery/skin/jplayer.blue.monday.cssで、これを変更します。

div.jp-audio {
    width:420px;
}

に

div.jp-audio {
    width:420px;
        margin:0 auto;
}

Margin 0 auto は、要素を「正しい方法」で中央に配置するためによく使用されます。

于 2013-02-26T03:41:13.273 に答える
0

CSS で簡単に (既存の ID 構造を使用して):

#js { text-align: center; }
div.jp-audio { margin: 15px auto 0 auto; }

div囲みの幅が変更された場合でも、これは流動的です。

于 2013-02-25T20:10:08.967 に答える
-1

33行目のjplayer.blue.monday.cssファイルに追加margin:0 auto;しますdiv.jp-audio

于 2013-02-26T12:09:09.730 に答える