Permalink
Browse files

Removed plugin and jQuery duplicates from examples.

  • Loading branch information...
1 parent 38735b7 commit 02a2969016f574a550381a832762cad48c64cb4a @Sebobo Sebobo committed Mar 12, 2013
View
@@ -15,7 +15,7 @@
<!-- CSS Reset -->
<link rel="stylesheet" href="css/reset.css">
-
+
<!-- Styling for your grid blocks -->
<link rel="stylesheet" href="css/style.css">
@@ -37,35 +37,35 @@
<div id="loader">
<div id="loaderCircle"></div>
</div>
-
+
</div>
-
+
<footer>
</footer>
</div>
<!-- include jQuery -->
- <script src="js/jquery-1.7.1.min.js"></script>
-
+ <script src="../libs/jquery-1.9.1.min.js"></script>
+
<!-- Include the plug-in -->
- <script src="js/jquery.wookmark.js"></script>
-
+ <script src="../jquery.wookmark.js"></script>
+
<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
var handler = null;
var page = 1;
var isLoading = false;
var apiURL = 'http://www.wookmark.com/api/json/popular'
-
+
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#tiles'), // Optional, used for some extra CSS styling
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
};
-
+
/**
* When scrolled all the way to the bottom, add more tiles.
*/
@@ -79,75 +79,75 @@
}
}
};
-
+
/**
* Refreshes the layout.
*/
function applyLayout() {
// Clear our previous layout handler.
if(handler) handler.wookmarkClear();
-
+
// Create a new layout handler.
handler = $('#tiles li');
handler.wookmark(options);
};
-
+
/**
* Loads data from the API.
*/
function loadData() {
isLoading = true;
$('#loaderCircle').show();
-
+
$.ajax({
url: apiURL,
dataType: 'jsonp',
data: {page: page}, // Page parameter to make sure we load new data
success: onLoadData
});
};
-
+
/**
* Receives data from the API, creates HTML for images and updates the layout
*/
function onLoadData(data) {
isLoading = false;
$('#loaderCircle').hide();
-
+
// Increment page index for future calls.
page++;
-
+
// Create HTML for the images.
var html = '';
var i=0, length=data.length, image;
for(; i<length; i++) {
image = data[i];
html += '<li>';
-
+
// Image tag (preview in Wookmark are 200px wide, so we calculate the height based on that).
html += '<img src="'+image.preview+'" width="200" height="'+Math.round(image.height/image.width*200)+'">';
-
+
// Image title.
html += '<p>'+image.title+'</p>';
-
+
html += '</li>';
}
-
+
// Add image HTML to the page.
$('#tiles').append(html);
-
+
// Apply layout.
applyLayout();
};
-
+
$(document).ready(new function() {
// Capture scroll event.
$(document).bind('scroll', onScroll);
-
+
// Load first data from the API.
loadData();
});
</script>
-
+
</body>
</html>

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -1,169 +0,0 @@
-/*!
- jQuery Wookmark plugin 0.5
- @name jquery.wookmark.js
- @author Christoph Ono (chri@sto.ph or @gbks)
- @version 0.5
- @date 3/19/2012
- @category jQuery plugin
- @copyright (c) 2009-2012 Christoph Ono (www.wookmark.com)
- @license Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
-*/
-$.fn.wookmark = function(options) {
-
- if(!this.wookmarkOptions) {
- this.wookmarkOptions = $.extend( {
- container: $('body'),
- offset: 2,
- autoResize: false,
- itemWidth: $(this[0]).outerWidth(),
- resizeDelay: 50
- }, options);
- } else if(options) {
- this.wookmarkOptions = $.extend(this.wookmarkOptions, options);
- }
-
- // Layout variables.
- if(!this.wookmarkColumns) {
- this.wookmarkColumns = null;
- this.wookmarkContainerWidth = null;
- }
-
- // Main layout function.
- this.wookmarkLayout = function() {
- // Calculate basic layout parameters.
- var columnWidth = this.wookmarkOptions.itemWidth + this.wookmarkOptions.offset;
- var containerWidth = this.wookmarkOptions.container.width();
- var columns = Math.floor((containerWidth+this.wookmarkOptions.offset)/columnWidth);
- var offset = Math.round((containerWidth - (columns*columnWidth-this.wookmarkOptions.offset))/2);
-
- // If container and column count hasn't changed, we can only update the columns.
- var bottom = 0;
- if(this.wookmarkColumns != null && this.wookmarkColumns.length == columns) {
- bottom = this.wookmarkLayoutColumns(columnWidth, offset);
- } else {
- bottom = this.wookmarkLayoutFull(columnWidth, columns, offset);
- }
-
- // Set container height to height of the grid.
- this.wookmarkOptions.container.css('height', bottom+'px');
- };
-
- /**
- * Perform a full layout update.
- */
- this.wookmarkLayoutFull = function(columnWidth, columns, offset) {
- // Prepare Array to store height of columns.
- var heights = [];
- while(heights.length < columns) {
- heights.push(0);
- }
-
- // Store column data.
- this.wookmarkColumns = [];
- while(this.wookmarkColumns.length < columns) {
- this.wookmarkColumns.push([]);
- }
-
- // Loop over items.
- var item, top, left, i=0, k=0, length=this.length, shortest=null, shortestIndex=null, bottom = 0;
- for(; i<length; i++ ) {
- item = $(this[i]);
-
- // Find the shortest column.
- shortest = null;
- shortestIndex = 0;
- for(k=0; k<columns; k++) {
- if(shortest == null || heights[k] < shortest) {
- shortest = heights[k];
- shortestIndex = k;
- }
- }
-
- // Postion the item.
- item.css({
- position: 'absolute',
- top: shortest+'px',
- left: (shortestIndex*columnWidth + offset)+'px'
- });
-
- // Update column height.
- heights[shortestIndex] = shortest + item.outerHeight() + this.wookmarkOptions.offset;
- bottom = Math.max(bottom, heights[shortestIndex]);
-
- this.wookmarkColumns[shortestIndex].push(item);
- }
-
- return bottom;
- };
-
- /**
- * This layout function only updates the vertical position of the
- * existing column assignments.
- */
- this.wookmarkLayoutColumns = function(columnWidth, offset) {
- var heights = [];
- while(heights.length < this.wookmarkColumns.length) {
- heights.push(0);
- }
-
- var i=0, length = this.wookmarkColumns.length, column;
- var k=0, kLength, item;
- var bottom = 0;
- for(; i<length; i++) {
- column = this.wookmarkColumns[i];
- kLength = column.length;
- for(k=0; k<kLength; k++) {
- item = column[k];
- item.css({
- left: (i*columnWidth + offset)+'px',
- top: heights[i]+'px'
- });
- heights[i] += item.outerHeight() + this.wookmarkOptions.offset;
-
- bottom = Math.max(bottom, heights[i]);
- }
- }
-
- return bottom;
- };
-
- // Listen to resize event if requested.
- this.wookmarkResizeTimer = null;
- if(!this.wookmarkResizeMethod) {
- this.wookmarkResizeMethod = null;
- }
- if(this.wookmarkOptions.autoResize) {
- // This timer ensures that layout is not continuously called as window is being dragged.
- this.wookmarkOnResize = function(event) {
- if(this.wookmarkResizeTimer) {
- clearTimeout(this.wookmarkResizeTimer);
- }
- this.wookmarkResizeTimer = setTimeout($.proxy(this.wookmarkLayout, this), this.wookmarkOptions.resizeDelay)
- };
-
- // Bind event listener.
- if(!this.wookmarkResizeMethod) {
- this.wookmarkResizeMethod = $.proxy(this.wookmarkOnResize, this);
- }
- $(window).resize(this.wookmarkResizeMethod);
- };
-
- /**
- * Clear event listeners and time outs.
- */
- this.wookmarkClear = function() {
- if(this.wookmarkResizeTimer) {
- clearTimeout(this.wookmarkResizeTimer);
- this.wookmarkResizeTimer = null;
- }
- if(this.wookmarkResizeMethod) {
- $(window).unbind('resize', this.wookmarkResizeMethod);
- }
- };
-
- // Apply layout
- this.wookmarkLayout();
-
- // Display items (if hidden).
- this.show();
-};
@@ -15,7 +15,7 @@
<!-- CSS Reset -->
<link rel="stylesheet" href="css/reset.css">
-
+
<!-- Styling for your grid blocks -->
<link rel="stylesheet" href="css/style.css">
@@ -72,23 +72,23 @@
</div>
<!-- include jQuery -->
- <script src="js/jquery-1.7.1.min.js"></script>
-
+ <script src="../libs/jquery-1.9.1.min.js"></script>
+
<!-- Include the plug-in -->
- <script src="js/jquery.wookmark.js"></script>
-
+ <script src="../jquery.wookmark.js"></script>
+
<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
var handler = null;
-
+
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
};
-
+
/**
* When scrolled all the way to the bottom, add more tiles.
*/
@@ -100,25 +100,25 @@
var items = $('#tiles li');
var firstTen = items.slice(0, 10);
$('#tiles').append(firstTen.clone());
-
+
// Clear our previous layout handler.
if(handler) handler.wookmarkClear();
-
+
// Create a new layout handler.
handler = $('#tiles li');
handler.wookmark(options);
}
};
-
+
$(document).ready(new function() {
// Capture scroll event.
$(document).bind('scroll', onScroll);
-
+
// Call the layout function.
handler = $('#tiles li');
handler.wookmark(options);
});
</script>
-
+
</body>
</html>

Large diffs are not rendered by default.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 02a2969

Please sign in to comment.