手動編輯「擴展預覽縮略圖網格」的html /更改.js？

Question

我剛剛使用了帶有擴展預覽的縮略圖網格的本教程：http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

這適用於展開預覽內容的javascript generatet html代碼。所以我不能手動編輯框的html，我只能填寫標題，描述，圖片和鏈接。

是否有一種簡單的方法來更改.js文件，我總是必須手動編輯該框的html？ 作爲expample，它會是這樣的HTML文件：

<li> 
    <a href="#"> 
      <img src="img/thumbnail1.png" alt="img01"/> 
    </a> 
    <div> 
      Content 
    </div> 
</li> 

而且在這個div是箱子，上單擊，就會顯示的內容。

感謝您的幫助！

菲利普

Answer 1

是的，你可以definatly做到這一點很容易改變的功能是負責渲染詳細信息頁面。

Preview.prototype = { 
    create : function() { 
     // create Preview structure: 
     this.$title = $('<h3></h3>'); 
     this.$description = $('<p></p>'); 
     this.$href = $('<a href="#">Visit website</a>'); 
     this.$details = $('<div class="og-details"></div>').append(this.$title, this.$description, this.$href); 
     this.$myDiv = $('<div class="my-div"></div>').append("My Injected DIVVVVVVVVVVVVVVVVVVVVVVVVVVV"); 
     this.$loading = $('<div class="og-loading"></div>'); 
     this.$fullimage = $('<div class="og-fullimg"></div>').append(this.$loading); 
     this.$closePreview = $('<span class="og-close"></span>'); 
     this.$previewInner = $('<div class="og-expander-inner"></div>').append(this.$closePreview, this.$fullimage, this.$myDiv,this.$details); 
     this.$previewEl = $('<div class="og-expander"></div>').append(this.$previewInner); 
     // append preview element to the item 
     this.$item.append(this.getEl()); 
     // set the transitions for the preview and the item 
     if(support) { 
      this.setTransition(); 
     } 
    }, 

看看我如何注入新的div，它是在詳細信息頁面上可見，如下所示。