#other api

[htmluse]

New Post has been published on Html Use

New Post has been published on http://www.htmluse.com/jquery-video-unifies-the-iframe-apis-of-youtube-vimeo-and-dailymotion/

jQuery Video : Unifies the iframe APIs of Youtube, Vimeo and Dailymotion

Download   Demo

jquery-video

Unifies the iframe APIs of Youtube, Vimeo and Dailymotion. Build as responsive jQuery UI widget.

Features

Play, Pause and Stop command

for Youtube, Vimeo and Dailymotion Player

supports >=IE8, Firefox, Chrome, Safari, Opera

Responsive with CSS inspired by http://alistapart.com/article/creating-intrinsic-ratios-for-video

Installation

<!-- 1. Place containers with data attributes for configuration --> <div class="container"> <div class="video" data-type="vimeo" data-code="29950141" data-width="500" data-height="280"></div> <div class="video" data-type="youtube" data-code="ubKinQvpc6w" data-responsive="false" data-width="960" data-height="720"></div> <div class="video" data-type="dailymotion" data-code="x14b8od" data-width="500" data-height="280"></div> </div> <!-- 2. Include libraries --> <script src="../lib/jquery.js" type="text/javascript"></script> <script src="../lib/jquery.ui.widget.js" type="text/javascript"></script> <script src="../lib/froogaloop.js" type="text/javascript"></script> <!-- 3. Include widget --> <script src="../src/jquery.dcd.video.js" type="text/javascript"></script> <!-- 4. Bind widget to containers --> <script type="text/javascript"> $(function () $('.video').video(); ); </script>

Options

type: API used [Required:(youtube|vimeo|dailymotion)]

code: the video code [Required]

width: the width of the video [Required:Integer]

height: the height of the video [Required:Integer]

responsive: should the video be included responsively [Optional:(true|false)]

Methods

play: play video

pause: pause video

stop: stop video

playing: returns status of video

Examples

$(':dcd-videoYoutube').video('play'); // plays all youtube videos $('[data-type="youtube"]').video('play'); // plays also all youtube videos $('.video').video('pause'); // pauses all videos with class video $('[data-code="29950141"]').video('play'); // plays video with code 29950141 $('.video').video('stop'); // stops all videos with class video $('[data-code="29950141"]').video('playing'); // returns true when video is playing, false if video is paused

Wishlist

find better way to include and initialize youtube api

find better way for video factory and inheritance

include full test suite

make ‘responsive’ class configurable

implement more API commands

implement more APIs (Dailymotion, MyVideo, …)

[htmluse]

New Post has been published on Html Use

New Post has been published on http://www.htmluse.com/google-maps-slider-with-jquery/

Google Maps Slider with jQuery

Download Demo

I’m sure it’s partly me getting better at JavaScript, but I found the API quite well done and easy to work with. For one thing, it’s fully evented. That means you can attach event listeners to different thing, like the map itself or things inside the map. A simple example would be if a marker is clicked, you can change the zoom level of the map, change information shown elsewhere on the page, or really anything else you might want to do with JavaScript.

I created a list of locations in an unordered list. Each list item had HTML5 data attributes containing the latitude and longitude of it. It also contained a title and long and short descriptions.When one of these list items is hovered over, I apply a “hover” class to deal with styling, “pan” the map to the new coordinates, and fill out the right area with more information.

HTML

<li data-geo-lat=“41.9786″ data-geo-long=“-87.9047″><h3>O’Hare Airport</h3><p>Flights n’ stuff</p><p class=“longdesc”><strong>About:</strong> O’Hare International Airport has been voted the “Best Airport in North America” for 10 years by two separate sources: Reaaders of the U.S. Edition of Business Traveler Magazine (1998-2003) and Global Traveler Magazine (2004-2007). Travel and Leisure magazine’s 2009 “America’s Favorite Cities” ranked Chicago’s Airport System (O’Hare and Midway) the second-worst for delays, New York City’s airport system (JFK, Newark Liberty, and LaGuardia) being the first.</p></li>

[htmluse]

New Post has been published on Html Use

New Post has been published on http://www.htmluse.com/jquery-flickr-photoset-with-bootstrap/

jQuery Flickr Photoset with Bootstrap

Download   Demo

I know, I know, too many depencencies, but somebody might find it useful.

Instructions

Add dependencies, include gallery thumbnails and blueimp gallery snippets and call flickr plugin (see index.html):

<script type="text/javascript"> $(function() $('.gallery').flickr( apiKey: '60ac8913e80833ef7as73138g9cddjdk', photosetId: '74157336137235911' ); ); </script>

Dependencies

jQuery

Bootstrap

imagesLoaded

Gallery

Bootstrap-Image-Gallery

[htmluse]

New Post has been published on Html Use

New Post has been published on http://www.htmluse.com/dropbox-file-uploader-with-twitter-bootstrap/

Dropbox File Uploader With Twitter Bootstrap

Download   Demo

A few weeks ago, Dropbox introduced a neat new feature – the Dropbox Chooser. By embedding it into your website, you give users a button with which they can attach files from their online storage.

Today we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.

The HTML

To start, here is the HTML document we will be working with. In the head, I am including the stylesheets for bootstrap, the Jcrop plugin and our custom CSS file. In the footer, we have the Dropbox JavaScript library, jQuery, Bootstrap, Jcrop and script.js, which we will be writing in the next section.

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dropbox File Uploader With Twitter Bootstrap | Tutorialzine </title> <!-- The stylesheets --> <link rel="stylesheet" href="assets/css/bootstrap.min.css" /> <link rel="stylesheet" href="assets/Jcrop/jquery.Jcrop.min.css" /> <link rel="stylesheet" href="assets/css/styles.css" /> </head> <body> <div id="main"> <input type="dropbox-chooser" name="selected-file" id="db-chooser" data-link-type="direct" class="hide" /> <div id="content"></div> <button class="btn btn-inverse hide" type="button" id="cropButton">Crop Image</button> <!-- Bootstrap Modal Dialogs --> <div id="cropModal" class="modal hide fade" role="dialog" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4>Your cropped image</h4> </div> <div class="modal-body center"></div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> </div> </div> <div id="errorModal" class="modal hide fade" role="dialog" aria-hidden="true"> <div class="modal-header"> <h4></h4> </div> <div class="modal-footer"> <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">OK</button> </div> </div> <div id="progressModal" class="modal hide fade" role="dialog" aria-hidden="true"> <div class="progress progress-striped active"> <div class="bar" style="width: 100%;"></div> </div> </div> </div> <!-- JavaScript Includes --> <script src="https://www.dropbox.com/static/api/1/dropbox.js" id="dropboxjs" data-app-key="z4ylr6z1qlivll4"></script> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/Jcrop/jquery.Jcrop.min.js"></script> <script src="assets/js/script.js"></script> </body> </html>