如何動態添加圖像和鏈接到傳送帶？

我想使用的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

如何動態添加圖像和鏈接到傳送帶？

回答

相關問題