javascript - カルーセルに画像とリンクを動的に追加する方法は?

Question

これがどのように機能するかを理解したいと思います。

使用したい jQuery カルーセルは Elastislide です。
http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

このサイトは、使用する必要があるコードを提供してくれます。

var carousel = $('#carousel').elastislide();
...
$('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
carousel.add();

jquery.elastislide.js ファイルにもこれらの行が見つかりましたが、/* によって無視されています

これは HTML です:

      <div>
        <div class="fixed-bar">
           <!-- Elastislide Carousel -->
           <ul id="carousel" class="elastislide-list">     
              <li><a href="http://www.site1.com"><img src="images/1.jpg" alt="img1" /></a></li>
              <li><a href="http://www.site2.com"><img src="images/2.jpg" alt="img2" /></a></li>
              <li><a href="http://www.site3.com"><img src="images/3.jpg" alt="img3" /></a></li>
              <li><a href="http://www.site4.com"><img src="images/4.jpg" alt="img4" /></a></li>
           </ul>
           <!-- End Elastislide Carousel -->
        </div>
     </div>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
         <script type="text/javascript" src="js/jquerypp.custom.js"></script>
         <script type="text/javascript" src="js/jquery.elastislide.js"></script>
         <script type="text/javascript">      
            $( '#carousel' ).elastislide( {
            minItems : 1
             } );
          </script>

HTML は明らかにこれらすべての項目を探します。しかし、利用可能なものに基づいて、html に表示されるものを決定するのは JavaScript ですよね?

したがって、何かを行う前に、html は次のようになっている必要があると思います。

               <!-- Elastislide Carousel -->
           <ul id="carousel" class="elastislide-list">     
           </ul>
           <!-- End Elastislide Carousel -->

そして、Javascriptを追加する必要があります。そうでなければ、画像やリンクなどのリスト項目をどのように追加しますか?
誰かがこれが正しいことを確認できますか?
その後はまだ終わっていないと思います。パスをどこかに、おそらく JavaScript にも追加する必要があります。
そうでなければ、どのフォルダを探す必要があるかをどのように知るのでしょうか?

問題をより複雑にするために (またはそうでない場合もあります)、私はこれを Joomla で実行しようとしています。
このカルーセルと多かれ少なかれ似たようなことをする拡張機能をインストールすることもできますが、本当に理解せずにボタンをクリックするだけなので、インストールしたくありません。

ありがとうございました。

score 0 · Accepted Answer

しかし、利用可能なものに基づいて、html に表示されるものを決定するのは JavaScript ですよね?

何を表示するかを「決定」するために、Javascript、PHP スクリプト、または静的 HTML マークアップさえある場合があります。Elastislideプラグインに、現在の内容に関して$('#carousel').elastislide();カルーセルを作成するように指示するだけulです。これらのコンテンツ (画像とリンクを含む ) は、任意のソースから取得できます。id="carousel"li

2番目のサンプルのように、静的HTMLコードに常駐するだけです
PHP またはその他のサーバースクリプトによって生成される
クライアント側 (ビューアのブラウザ) で Javascript コードによって生成されます。呼び出す前$('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
に JS で生成する場合は、他に何もする必要はありません。しかし、既に形成されたカルーセルにアイテムを追加したい場合は、呼び出した後、同じコードを使用してカルーセルソースに new を追加します ( )。ただし、その後、カルーセルソースを変更したことを Elastislide プラグインに「通知」するために呼び出す必要があります。そのため、プラグインはそれに応じて視覚的表現を更新する必要があります。$('#carousel').elastislide();
var carousel = $('#carousel').elastislide();liulcarousel.add();

追加: 実際には、Joomla ではサーバー側の PHP コードを使用して (その CMS からのデータに基づいて) HTML カルーセルソースを形成し、クライアント側では$('#carousel').elastislide();.

score 0 · Accepted Answer

Elastislide カルーセルを含む完全に機能する静的 HTML ページを次に示します。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquerypp.custom.js"></script>
  <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<head>
<body>

</body>
<ul id="carousel" class="elastislide-list">     
  <li><a href="1.jpg"><img src="1.jpg" alt="img1" /></a></li>
  <li><a href="2.jpg"><img src="2.jpg" alt="img2" /></a></li>
  <li><a href="3.jpg"><img src="3.jpg" alt="img3" /></a></li>
  <li><a href="4.jpg"><img src="4.jpg" alt="img4" /></a></li>
</ul>
<script type="text/javascript">      
  $('#carousel').elastislide();
</script>

<body>
</html>

ファイル構造が重要であることに注意してください - このような HTML の場合、以下が必要です:
/ filanme.htm (または .php) - ページ自体
/ css/* - 含まれる css ファイル
/ js/* - 含まれる javascripts
/ images/* - Elastislide 補足画像（パッケージに含まれています）

PHP ハイパーテキストプリプロセッサを使用してそのようなページを生成するには、次のような手順を実行します。

Joomla CMS (または直接 MySQL データベース) から PHP データを取得し、サイト管理者がどの画像とリンクをカルーセルにロードしたいかについて調べます。Joomla でこれを行う方法を言うのは難しいです。Joomla はあまり使用しないためです。そのため、単純な関数の例を挙げて、常にデータを含む「事前に調理された」PHP 配列を返します。
データを取得したら、カルーセルソースを形成するulandのマークアップを生成し、その後に call を含むスクリプトを挿入します。li$('#carousel').elastislide();

これは単純ですが、実際に動作する PHP コードサンプルです。

<?
// such a funciton would be inside CMS, not in your code
function CMS_get_carousel_data( $carousel_name ) {
  return array(
    array( 'link'=>'1.jpg', 'image'=>'1.jpg', 'alt_text'=>'1' ),
    array( 'link'=>'2.jpg', 'image'=>'2.jpg', 'alt_text'=>'2' ),
    array( 'link'=>'3.jpg', 'image'=>'3.jpg', 'alt_text'=>'3' ),
    array( 'link'=>'4.jpg', 'image'=>'4.jpg', 'alt_text'=>'4' )
  );
}
?>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquerypp.custom.js"></script>
  <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<head>
<body>
<?
// calling 'CMS' function to retrieve data to be displayed in the carousel
$data = CMS_get_carousel_data('carousel_A');
?>
</body>
<ul id="carousel_A" class="elastislide-list">
  <? foreach( $data as $item ) { /* generating markup */ ?>
  <li>
    <a href="<?=$item['link']?>">
      <img src="<?=$item['image']?>" alt="<?=$item['alt_text']?>" />
    </a>
  </li>
  <? } ?>
</ul>
<script type="text/javascript">      
  $('#carousel_A').elastislide();
</script>

<body>
</html>

これを実際に機能させるには、上記のコードをサイトの .php ファイルに配置し、他の必要なファイルを適切なフォルダーに配置し、もちろん、Joomla CMS で実際の API を見つけてカルーセル用のデータを取得し、それを利用する必要があります。

javascript - カルーセルに画像とリンクを動的に追加する方法は?

2 に答える 2

Related

Reference