如何动态添加图像和链接到传送带？

我想使用的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做到这一点。
我可以安装或多或少做类似于这个旋转木马的扩展，但我不想这样做，因为所有的结果都是点击按钮而没有真正理解它。

谢谢。

来源

2013-07-29 Kris

调用'$（'＃carousel'）。elastislide（）;'使用'append'完成后.. – krishgopinath

这里是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/* - JavaScript的包括
// *图片 - Elastislide辅助图像（包含在其包装）

要使用PHP超文本预处理器生成这样的页面，您的步骤可能类似于这些。

检索的Joomla CMS（或MySQL数据库直接）PHP数据哪些图片和链接网站管理员希望被装载到转盘。我很难说Joomla如何做到这一点，因为我没有经常使用它，所以我会举一个简单函数的例子，总是返回带有数据的'预先准备好的'PHP数组。
你拿到数据后，生成的形成轮盘源ul和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来检索轮播的数据并使用它。

来源

2013-07-30 11:32:09

这有帮助。谢谢！ – Kris

但是，它是根据什么是可用的决定什么显示在html中，的JavaScript？

可能有Javascript，PHP脚本甚至静态HTML标记来'决定'显示什么。打电话$('#carousel').elastislide();，您只需告诉Elastislide插件，使其ul与id="carousel"关于当前内容中的某一个轮换出来。这些内容（li s的图像和链接）可以来自任何来源：

只是驻留在静态的HTML代码，就像你的第二个样品中
通过PHP或任何其他服务器脚本
生成
可以通过Javascript代码像 $('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
在客户端（在用户的浏览器）产生如果调用012之前，JS 生成它们你不必做任何事情。
但如果你想要添加项目到已形成的旋转木马，呼吁var carousel = $('#carousel').elastislide();后 - 你使用相同的代码到新li追加到轮盘源（ul），但在这之后，你必须调用carousel.add();到“告知” Elastislide插件你已经改变了旋转木马的源代码，所以插件必须相应地更新其视觉表示。

增加：实际上，在你的Joomla，而应使用服务器端的PHP代码的HTML表单轮盘源（基于来自CMS一些数据），并在客户端只需要调用$('#carousel').elastislide();。

来源

2013-07-29 18:27:18

谢谢你的帮助。所以我可能需要PHP来组成轮播。不知道从哪里开始。通过学习PHP我猜，但是有没有一步一步的方法，我可以找到某处，只是为了让这个旋转木马工作？ – Kris

如何动态添加图像和链接到传送带？

回答

相关问题