Code Monkey home page Code Monkey logo

jquery-tumblr's Introduction

jquery-tumblr

jquery-tumblr is a plugin that parses a tumblr feed and outputs markup.

It was inspired by the work of Chris Tran however realy bares no resemblance to his code.

Note that the markup generated is similar to that of tumblr's default theme however posts are enclosed in ul/li tags rather than just div's.

Example

<div id="loading">Loading...</div>
<div id="posts"></div>
<div id="pagination"></div>
	<script type="text/javascript">
	$(document).ready(function () {
		$('#posts')
			.tumblr({
				url:        'http://blog.thehiddenventure.com',
				pagination: '#pagination',
				loading:    '#loading'
			});
	});
	</script>

Url

You must the url of your tumblr blog. Note that if you have set a custom domain in tumblr, you should use this as the value you set.

  • url: your tumblr url (ie. http://(YOUR NAME).tumblr.com or http://(YOUR NAME CUSTOM DOMAIN).com )

Options

Pagination

  • pagination: A selector that specifies where the pagination will reside. If one does not exist, pagination is disabled.
  • perPage: The number of posts to return. The default is 20, and the maximum is 50.
  • start: The post offset to start from. The default is 0.
  • paginationOptions: Other options to pass to jquery_pagination - See https://github.com/gbirke/jquery_pagination

Appearance

  • loading: A selector that specifies a element that can be shown when loading content from tumblr.
  • photoSize: The photo size to use, accepted values are 75, 100, 250, 400, 500 and 1280. Default is 400.
  • videoSize: The video size to embed, accepted values are 250, 500 or false. If false, the tumblr 'video-player' parameter will be used.
  • timeago: If true (default) then jquery-timeago will be used for post dates.
  • shortLength: For captions and titles that are less than this length the css class 'short' will be added. Default is 50.
  • mediumLength: For captions and titles that are less than this length the css class 'medium' will be added. Default is 100.
  • fancybox: If true (default) then fancybox will be used when there are multiple photos. See photoThumbSize and photoLightboxSize
  • photoThumbSize: If there are multiple photos, they will be output in a ul/li tags, this value will be the size of image used. Accepted values are 75, 100, 250, 400, 500 and 1280. Default is 75.
  • photoLightboxSize: If there are multiple photos, this image size will be used for lightbox. Accepted values are 75, 100, 250, 400, 500 and 1280. Default is 1280.

Network

  • timeout: Ajax timeout defaults to 5000

Optional Requirements

  • jquery_pagination - is needed if you want pagination. Until an issue with jquery_pagination is resolved then you should use my fork
  • jquery-timeago - is needed if the timeago option is true (default).

License

Copyright (c) 2011 Alex Hayes Dual licensed under the MIT and GPL licenses.

jquery-tumblr's People

Contributors

alexhayes avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

jquery-tumblr's Issues

Need to check for image-caption when writing ALT attrib in photo post

If an image doesn't have a caption set, it returns 'null' and breaks the post. It is used twice but there's a condition only for the second time. Here's the updated code that fixes the issue, starting on line 215

                    } else {
                        if(post['photo-link-url']) {
                            body += '<a href="' + post['photo-link-url'] + '">';
                        }
                        body += '<img';
                        if(post['photo-caption']) {
                            body += ' alt="' + $(post['photo-caption']).text() + '"';
                        }
                        body += ' src="' + post['photo-url-' + data.options.photoSize] + '">';
                        if(post['photo-link-url']) {
                            body += '</a>';
                        }
                    }
                    if(post['photo-caption']) {
                        body += '<div class="description">' + post['photo-caption'] + '</div>';
                    }
                    body += '</div>';
                    break;

No content displayed - Error: renderVideo is not defined

Doesn't seem to be working. I'm getting "Error: renderVideo is not defined" in JavaScript console and page gets stuck on "Loading..." (I can see there is some content from tumblr blog loaded in background though but never gets displayed)

broken on ie7

due to extra comma at end of methods declaration (line 349)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.