1

我想了解这是如何工作的。

我想使用的 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 显然会查找所有这些项目。但它是 javascript 根据可用的内容决定在 html 中显示的内容，对吗？

所以我的猜测是，在我对它做任何事情之前，html 需要看起来像这样：

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

我需要向它添加Javascript。否则如何添加图像和链接等列表项？
有人可以确认这是正确的吗？
我认为在那之后我还没有完成，我需要在某处添加路径，可能也在 javascript 中。
否则它将如何知道它需要在哪个文件夹中查找？

为了使事情变得更复杂（或者可能不是），我试图在 Joomla 中做到这一点。
我可以安装扩展程序，或多或少地做一些与这个轮播类似的事情，但我不想这样做，因为归根结底就是在没有真正理解的情况下点击按钮。

谢谢你。

4

2 回答 2

0

这是带有 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 超文本预处理器生成这样的页面，您的步骤可能是这样的。

  1. 从 Joomla CMS（或直接 MySQL 数据库）中检索有关站点管理员希望将哪些图像和链接加载到轮播中的 PHP 数据。我很难说如何用 Joomla 做到这一点，因为我不经常使用它，所以我举一个简单函数的例子，总是返回带有数据的“预煮”PHP 数组。

  2. 获得数据后，生成ul和lis 的标记，形成轮播源并在其后插入带有$('#carousel').elastislide();call 的脚本。

这是简单但有效的 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 来检索轮播数据并加以利用。

于 2013-07-30T11:32:09.057 回答
0

但它是 javascript 根据可用的内容决定在 html 中显示的内容，对吗？

可能有 Javascript、PHP 脚本甚至静态 HTML 标记来“决定”显示什么。打电话给$('#carousel').elastislide();你只是告诉 Elastislide 插件从你的当前内容中ul制作id="carousel"轮播。这些内容（li带有图片和链接的）可能来自任何来源：

  • 只需驻留在静态 HTML 代码中，就像在您的第二个示例中一样

  • 由 PHP 或任何其他服务器脚本生成

  • 由 Javascript 代码在客户端（在查看器的浏览器中）生成，例如 $('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
    如果您在调用之前$('#carousel').elastislide();使用 JS 生成它们，则无需执行任何其他操作。
    但是，如果您想将项目添加到已经形成的轮播，在调用之后var carousel = $('#carousel').elastislide();- 您使用相同的代码将新li的附加到轮播源（ul），但之后您必须调用carousel.add();以“通知”Elastislide 插件您已更改轮播源和因此插件必须相应地更新其视觉表示。

另外：实际上，在 Joomla 中，您应该使用服务器端 PHP 代码来形成 HTML 轮播源（基于来自该 CMS 的一些数据），而在客户端只需调用$('#carousel').elastislide();.

于 2013-07-29T18:27:18.960 回答