手動編輯“帶有擴展預覽的縮略圖網格”的html /更改.js？

Question

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

這與擴展預覽的內容的javascript生成的html代碼一起使用。 因此，我無法手動編輯該框的html，只能填寫標題，說明，圖像和鏈接。

是否有一種簡單的方法來更改.js文件，而我總是必須手動編輯該框的html？ 作為示例，在html文件中將如下所示：

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

在此div中是單擊框時出現的框的內容。

謝謝你的幫助！

菲利普

Answer 1

是的，您可以通過輕松更改負責呈現詳細信息頁面的功能來完成此操作。

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，它在詳細信息頁面上可見，如下所示。