2013-05-03 78 views
0

我無法獲得循環對齊jquery Isotope模塊的經典砌體樣式佈局。jQuery同位素不應用佈局。繼承問題?

所有瀏覽器都在控制檯中加載腳本,但屬性看起來根本不起作用。 .item class div元素的對齊方式全部位於左側並水平堆疊。

Wordpress是否有某種繼承阻止它的工作?我試圖在默認的TwentyTwelve主題的WordPress的沒有其他插件,但它是在positin:固定; div將其包裝到頁面的較低50%。

<script type="text/javascript" src="http://<?php echo $_SERVER[HTTP_HOST]; ?>js/jquery.isotope.js"> 
    $(document).ready(function(){ 
     $('#container').isotope({ 
      $container.isotope({ 
       itemSelector:'.item' 
      }); 
     masonry: { 
     columnWidth: 20 
     }; 

    }); 
      </script> 

其次是調用HTML:

    <div id="container" > 
        <div class="item"> 
         <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
          <?php if (has_post_thumbnail()) { 
           the_post_thumbnail('thumbnail'); 
          }?> 

          <h2><a href="<?php the_permalink() ?>" rel="<?php the_ID(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> 
          <?php the_excerpt(); ?> 
         <?php endwhile; endif; ?> 
        </div> 
       </div> 

有了這些應用CSS屬性,這我想應該不是問題...

#container { 
     position:relative; 
    } 
    .item { 
     width:50px; 
     height:auto; 
     border:1px; 
    } 

實況例如,它現在在這裏:justingaskin.com

+0

'$ container'定義在哪裏?我也從來沒有使用過'同位素',但它看起來好像你正在調用它兩次。 – 2013-05-03 16:11:55

+0

可能是。我仍然需要處理後端開發JS的問題。現場示例有幫助嗎? – canacast 2013-05-03 16:49:49

+0

一個生動的例子會有所幫助。 – 2013-05-03 16:57:53

回答

1

我想你打電話isotope兩次,它應該是這樣的

$( '的#container').isotope({

itemSelector: '.item',
砌築:{ columnWidth時:20}

});

編輯

在你的WordPress網站服用後一看,你沒有加載isotope jQuery的正常文件。現在,如果您檢出控制檯,您會注意到對jquery.isotope.js的請求失敗。該isotope文件的位置應該是:

http://justingaskin.com/wp-content/themes/twentytwelve-masonry/js/jquery.isotope.js

,並在網站上的:

http://justingaskin.com/js/jquery.isotope.js

<script type="text/javascript" src="http://<?php echo $_SERVER[HTTP_HOST]; ?>js/jquery.isotope.js"> < - 這是錯誤

它應該是:

script type="text/javascript" src="http://<?php echo $_SERVER[HTTP_HOST]; ?>/wp-content/themes/twentytwelve-masonry/js/jquery.isotope.js">

+0

謝謝!我以爲在參加本地主機測試網站並與他們一起生活時,我會得到所有的細微差別。自從我彈出了臨時內容之後,砌體仍然沒有像手冊所說的那樣運行。這就是我關於繼承問題的問題所在的地方......我已經看到了一些提到需要一個位置:相對於該項目,但在嘗試後,並沒有看到任何結果我懷疑任何其他問題,我可能會失蹤。 – canacast 2013-05-04 02:40:59

0

看起來這絕對是遺傳問題。當重新設計Wordpress附帶的TwentyTwelve主題時(目前爲發佈日期),有一些流轉的因素會流向我試圖組織的項目(級聯... hernt)。

使用此鏈接中的教程和指導:http://www.wplover.com/1818/tutorial-using-jquery-masonry-with-wordpress/

我能夠擦拭環石板清潔擦洗在CSS的新外套,我需要的首先控制的元素。

感謝您的幫助@ c-misura!