修改jQuery Gridly插件

Here是Gridly的鏈接。如你所見，當我們點擊一個盒子時，它會展開。現在，我需要的是，當盒子展開時，它揭示了一些東西。修改jQuery Gridly插件

我要做的是我會在小圖片上放置一個遮蓋圖片的圖片。當它擴展時，一些文本會隨着圖像一起顯示出來。 Here就是一個例子。它有點類似於這個。我該怎麼做？

2013-11-24 Ranveer

代碼爲單一頁面：

<html> 
<head> 
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> 
<script src="jquery.gridly.js" type="text/javascript"></script> 
<link href="jquery.gridly.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
    .gridly { 
    position: relative; 
    width: 960px; 
    } 
    .brick { 
    overflow: hidden; 
    } 
    .brick img { 
    padding: 10px; 
    } 
    .brick div { 
    padding: 0 10px 0 10px; 
    } 
    .brick.small { 
    width: 140px; 
    height: 140px; 
    background-color: gray; 
    } 
    .brick.large { 
    width: 300px; 
    height: 300px; 
    background-color: #B0B0B0; 
    } 
</style> 
</head> 
<body> 
<div class="gridly"> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick large"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick large"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
    <div class="brick small"><img src="http://placehold.it/120x120" /><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</div></div> 
</div> 
<script> 
    $('.gridly').gridly({ 
    base: 60, // px 
    gutter: 20, // px 
    columns: 12 
    }); 
    $('.brick').click(function() { 
    $this = $(this); 

    // toggle the size of the brick using css class 
    $this.toggleClass('large').toggleClass('small'); 

    // this is set to ensure the layout is carried out on the final size of the brick 
    size = $this.hasClass('small') ? 140 : 300; 
    $this.data('width', size); 
    $this.data('height', size); 

    return $('.gridly').gridly('layout'); 
    }); 

</script> 
</body>

javascript取自github上的示例：https://github.com/ksylvest/jquery-gridly/blob/master/javascripts/sample.js。隨着磚塊大小的變化，文本會「流動」，一個固定大小的文本格將會阻止它。

不錯的插件順便說一句，網格爲您處理幾乎所有動畫的痛苦，顏色和大小都自動插補。

來源

2013-11-24 11:32:03

太棒了！正是我在找什麼 – Ranveer

當您將此問題標記爲javascript和jquery時，這似乎是CSS問題。單擊一個框時查看DOM。你可以看到它切換了small和large類。如果您想要改變某些東西在單擊框時的外觀，您可以在small磚和large磚中爲該元素定義CSS。

不知道你真正想要什麼，我不能建議太多。對於獲得的更大的點擊磚當圖像的一個例子是：

<div class="brick small"> 
    <img src="http://placekitten.com/300/300" /> 
</div>

與CSS：

.brick.small img { 
    width: 140px; 
    height: 140px; 
} 

.brick.large img { 
    width: 300px; 
    height: 300px; 
}

來源

2013-11-24 10:43:02 Sumurai8

修改jQuery Gridly插件

回答

相關問題