"
Team:UCSF/lily2
From 2013.igem.org
(Difference between revisions)
| Line 1: | Line 1: | ||
| + | <!DOCTYPE html> | ||
<!-- Camera is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) --> | <!-- Camera is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) --> | ||
<html> | <html> | ||
<head> | <head> | ||
| + | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | ||
| + | <title>Camera | a free jQuery slideshow by Pixedelic</title> | ||
| + | <meta name="description" content="Camera a free jQuery slideshow with many effects, transitions, adaptive layout, easy to customize, using canvas and mobile ready"> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<!--/////////////////////////////////////////////////////////////////////////////////////////////////// | <!--/////////////////////////////////////////////////////////////////////////////////////////////////// | ||
// | // | ||
| Line 8: | Line 13: | ||
///////////////////////////////////////////////////////////////////////////////////////////////////--> | ///////////////////////////////////////////////////////////////////////////////////////////////////--> | ||
<!--<link rel='stylesheet' id='camera-css' href='../css/camera.css' type='text/css' media='all'>--> | <!--<link rel='stylesheet' id='camera-css' href='../css/camera.css' type='text/css' media='all'>--> | ||
| - | <style id="camera-css" type="text/css" media="all"> | + | <!--<style id="camera-css" type="text/css" media="all">--> |
| + | <style> | ||
/************************** | /************************** | ||
* | * | ||
| Line 1,083: | Line 1,089: | ||
} | } | ||
</style> | </style> | ||
| - | <style | + | <style> |
body { | body { | ||
margin: 0; | margin: 0; | ||
| Line 1,116: | Line 1,122: | ||
<!--jquery.min.js--> | <!--jquery.min.js--> | ||
| - | <script | + | <script> |
/*! jQuery v1.7.1 jquery.com | jquery.org/license */ | /*! jQuery v1.7.1 jquery.com | jquery.org/license */ | ||
(function (a, b) { | (function (a, b) { | ||
| Line 1,127: | Line 1,133: | ||
</script> | </script> | ||
<!--jquery.mobile.customized.min.js--> | <!--jquery.mobile.customized.min.js--> | ||
| - | <script | + | <script> |
// jQuery Mobile framework customized for Camera slideshow, made by | // jQuery Mobile framework customized for Camera slideshow, made by | ||
// 'jquery.mobile.define.js', | // 'jquery.mobile.define.js', | ||
| Line 1,140: | Line 1,146: | ||
</script> | </script> | ||
<!--jquery.easing.1.3.js--> | <!--jquery.easing.1.3.js--> | ||
| - | <script | + | <script> |
/* | /* | ||
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ | ||
| Line 1,348: | Line 1,354: | ||
</script> | </script> | ||
<!--camera.min.js--> | <!--camera.min.js--> | ||
| - | <script | + | <script> |
// Camera slideshow v1.3.3 - a jQuery slideshow with many effects, transitions, easy to customize, using canvas and mobile ready, based on jQuery 1.4+ | // Camera slideshow v1.3.3 - a jQuery slideshow with many effects, transitions, easy to customize, using canvas and mobile ready, based on jQuery 1.4+ | ||
// Copyright (c) 2012 by Manuel Masia - www.pixedelic.com | // Copyright (c) 2012 by Manuel Masia - www.pixedelic.com | ||
| Line 1,355: | Line 1,361: | ||
</script> | </script> | ||
| - | <script | + | <script> |
jQuery(function () { | jQuery(function () { | ||
Revision as of 07:36, 21 August 2013
<!DOCTYPE html>
Pagination circles with the height relative to the width
Camera is a responsive/adaptive slideshow. Try to resize the browser window
It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
It's completely free (even if a donation is appreciated)
Camera slideshow provides many options to customize your project as more as possible
It supports captions, HTML elements and videos and it's validated in HTML5 (have a look)
