Skip to content
Browse files

Merge pull request #1137 from multiformeingegno/master

Added Galleriffic
  • Loading branch information...
2 parents 6832d31 + e891118 commit 53d06f930e6adbb85047d3b740d89240a1092bf5 @Lockyc Lockyc committed Apr 4, 2013
View
63 ajax/libs/galleriffic/2.0.1/css/basic.css
@@ -0,0 +1,63 @@
+html, body {
+ margin:0;
+ padding:0;
+}
+body{
+ text-align: center;
+ font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
+ background-color: #eee;
+ color: #444;
+ font-size: 75%;
+}
+a{
+ color: #27D;
+ text-decoration: none;
+}
+a:focus, a:hover, a:active {
+ text-decoration: underline;
+}
+p, li {
+ line-height: 1.8em;
+}
+h1, h2 {
+ font-family: "Trebuchet MS", Verdana, sans-serif;
+ margin: 0 0 10px 0;
+ letter-spacing:-1px;
+}
+h1 {
+ padding: 0;
+ font-size: 3em;
+ color: #333;
+}
+h2 {
+ padding-top: 10px;
+ font-size:2em;
+}
+pre {
+ font-size: 1.2em;
+ line-height: 1.2em;
+ overflow-x: auto;
+}
+div#page {
+ width: 900px;
+ background-color: #fff;
+ margin: 0 auto;
+ text-align: left;
+ border-color: #ddd;
+ border-style: none solid solid;
+ border-width: medium 1px 1px;
+}
+div#container {
+ padding: 20px;
+}
+div#ads {
+ clear: both;
+ padding: 12px 0 12px 66px;
+}
+div#footer {
+ clear: both;
+ color: #777;
+ margin: 0 auto;
+ padding: 20px 0 40px;
+ text-align: center;
+}
View
57 ajax/libs/galleriffic/2.0.1/css/black.css
@@ -0,0 +1,57 @@
+body{
+ background-color: #111;
+ color: #bbb;
+}
+a{
+ color: #f70;
+}
+h2 {
+ color: #ccc;
+}
+div#page {
+ background-color: #000;
+ border-color: #222;
+}
+div#footer {
+ color: #888;
+}
+div.caption-container {
+ color: #eee;
+}
+div.image-title {
+ font-weight: bold;
+ font-size: 1.4em;
+}
+div.image-desc {
+ line-height: 1.3em;
+ padding-top: 12px;
+}
+div.download {
+ margin-top: 8px;
+}
+div.photo-index {
+ color: #888;
+}
+div.navigation a.prev {
+ background-image: url(prevPageArrowWhite.gif);
+}
+div.navigation a.next {
+ background-image: url(nextPageArrowWhite.gif);
+}
+div.loader {
+ background-image: url(loaderWhite.gif);
+}
+div.slideshow img {
+ border-color: #333;
+}
+ul.thumbs li.selected a.thumb {
+ background: #fff;
+}
+div.pagination a:hover {
+ background-color: #111;
+}
+div.pagination span.current {
+ background-color: #fff;
+ border-color: #fff;
+ color: #000;
+}
View
BIN ajax/libs/galleriffic/2.0.1/css/caption.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
161 ajax/libs/galleriffic/2.0.1/css/galleriffic-1.css
@@ -0,0 +1,161 @@
+div.content {
+ /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
+ display: none;
+ float: right;
+ width: 550px;
+}
+div.content a, div.navigation a {
+ text-decoration: none;
+ color: #777;
+}
+div.content a:focus, div.content a:hover, div.content a:active {
+ text-decoration: underline;
+}
+div.controls {
+ margin-top: 5px;
+ height: 23px;
+}
+div.controls a {
+ padding: 5px;
+}
+div.ss-controls {
+ float: left;
+}
+div.nav-controls {
+ float: right;
+}
+div.slideshow-container {
+ position: relative;
+ clear: both;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+}
+div.loader {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-image: url('loader.gif');
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 550px;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+}
+div.slideshow {
+
+}
+div.slideshow span.image-wrapper {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+div.slideshow a.advance-link {
+ display: block;
+ width: 550px;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+ line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+ text-align: center;
+}
+div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
+ text-decoration: none;
+}
+div.slideshow img {
+ vertical-align: middle;
+ border: 1px solid #ccc;
+}
+div.download {
+ float: right;
+}
+div.caption-container {
+
+}
+span.image-caption {
+ display: block;
+ position: absolute;
+}
+div.caption {
+ background-color: #000;
+ padding: 12px;
+ color: #ccc;
+}
+div.caption a {
+ color: #fff;
+}
+div.image-title {
+ font-weight: bold;
+ font-size: 1.4em;
+}
+
+div.image-desc {
+ line-height: 1.3em;
+ padding-top: 12px;
+}
+div.navigation {
+ /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
+}
+ul.thumbs {
+ clear: both;
+ margin: 0;
+ padding: 0;
+}
+ul.thumbs li {
+ float: none;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+a.thumb {
+ padding: 0;
+ display: inline;
+ border: none;
+}
+ul.thumbs li.selected a.thumb {
+ color: #000;
+ font-weight: bold;
+}
+a.thumb:focus {
+ outline: none;
+}
+ul.thumbs img {
+ border: none;
+ display: block;
+}
+div.pagination {
+ clear: both;
+}
+div.navigation div.top {
+ margin-bottom: 12px;
+ height: 11px;
+}
+div.navigation div.bottom {
+ margin-top: 12px;
+}
+div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
+ display: block;
+ float: left;
+ margin-right: 2px;
+ padding: 4px 7px 2px 7px;
+ border: 1px solid #ccc;
+}
+div.pagination a:hover {
+ background-color: #eee;
+ text-decoration: none;
+}
+div.pagination span.current {
+ font-weight: bold;
+ background-color: #000;
+ border-color: #000;
+ color: #fff;
+}
+div.pagination span.ellipsis {
+ border: none;
+ padding: 5px 0 3px 2px;
+}
+#captionToggle a {
+ float: right;
+ display: block;
+ background-image: url('caption.png');
+ background-repeat: no-repeat;
+ background-position: right;
+ margin-top: 5px;
+ padding: 5px 30px 5px 5px;
+}
View
150 ajax/libs/galleriffic/2.0.1/css/galleriffic-2.css
@@ -0,0 +1,150 @@
+div.content {
+ /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
+ display: none;
+ float: right;
+ width: 550px;
+}
+div.content a, div.navigation a {
+ text-decoration: none;
+ color: #777;
+}
+div.content a:focus, div.content a:hover, div.content a:active {
+ text-decoration: underline;
+}
+div.controls {
+ margin-top: 5px;
+ height: 23px;
+}
+div.controls a {
+ padding: 5px;
+}
+div.ss-controls {
+ float: left;
+}
+div.nav-controls {
+ float: right;
+}
+div.slideshow-container {
+ position: relative;
+ clear: both;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+}
+div.loader {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-image: url('loader.gif');
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 550px;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+}
+div.slideshow {
+
+}
+div.slideshow span.image-wrapper {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+div.slideshow a.advance-link {
+ display: block;
+ width: 550px;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+ line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+ text-align: center;
+}
+div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
+ text-decoration: none;
+}
+div.slideshow img {
+ vertical-align: middle;
+ border: 1px solid #ccc;
+}
+div.download {
+ float: right;
+}
+div.caption-container {
+ position: relative;
+ clear: left;
+ height: 75px;
+}
+span.image-caption {
+ display: block;
+ position: absolute;
+ width: 550px;
+ top: 0;
+ left: 0;
+}
+div.caption {
+ padding: 12px;
+}
+div.image-title {
+ font-weight: bold;
+ font-size: 1.4em;
+}
+div.image-desc {
+ line-height: 1.3em;
+ padding-top: 12px;
+}
+div.navigation {
+ /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
+}
+ul.thumbs {
+ clear: both;
+ margin: 0;
+ padding: 0;
+}
+ul.thumbs li {
+ float: left;
+ padding: 0;
+ margin: 5px 10px 5px 0;
+ list-style: none;
+}
+a.thumb {
+ padding: 2px;
+ display: block;
+ border: 1px solid #ccc;
+}
+ul.thumbs li.selected a.thumb {
+ background: #000;
+}
+a.thumb:focus {
+ outline: none;
+}
+ul.thumbs img {
+ border: none;
+ display: block;
+}
+div.pagination {
+ clear: both;
+}
+div.navigation div.top {
+ margin-bottom: 12px;
+ height: 11px;
+}
+div.navigation div.bottom {
+ margin-top: 12px;
+}
+div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
+ display: block;
+ float: left;
+ margin-right: 2px;
+ padding: 4px 7px 2px 7px;
+ border: 1px solid #ccc;
+}
+div.pagination a:hover {
+ background-color: #eee;
+ text-decoration: none;
+}
+div.pagination span.current {
+ font-weight: bold;
+ background-color: #000;
+ border-color: #000;
+ color: #fff;
+}
+div.pagination span.ellipsis {
+ border: none;
+ padding: 5px 0 3px 2px;
+}
View
150 ajax/libs/galleriffic/2.0.1/css/galleriffic-3.css
@@ -0,0 +1,150 @@
+div.content {
+ /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
+ display: none;
+ float: right;
+ width: 550px;
+}
+div.content a, div.navigation a {
+ text-decoration: none;
+ color: #777;
+}
+div.content a:focus, div.content a:hover, div.content a:active {
+ text-decoration: underline;
+}
+div.controls {
+ margin-top: 5px;
+ height: 23px;
+}
+div.controls a {
+ padding: 5px;
+}
+div.ss-controls {
+ float: left;
+}
+div.nav-controls {
+ float: right;
+}
+div.slideshow-container {
+ position: relative;
+ clear: both;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+}
+div.loader {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-image: url('loader.gif');
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 550px;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+}
+div.slideshow {
+
+}
+div.slideshow span.image-wrapper {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+div.slideshow a.advance-link {
+ display: block;
+ width: 550px;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+ line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+ text-align: center;
+}
+div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
+ text-decoration: none;
+}
+div.slideshow img {
+ vertical-align: middle;
+ border: 1px solid #ccc;
+}
+div.download {
+ float: right;
+}
+div.caption-container {
+ position: relative;
+ clear: left;
+ height: 75px;
+}
+span.image-caption {
+ display: block;
+ position: absolute;
+ width: 550px;
+ top: 0;
+ left: 0;
+}
+div.caption {
+ padding: 12px;
+}
+div.image-title {
+ font-weight: bold;
+ font-size: 1.4em;
+}
+div.image-desc {
+ line-height: 1.3em;
+ padding-top: 12px;
+}
+div.navigation {
+ /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
+}
+ul.thumbs {
+ clear: both;
+ margin: 0;
+ padding: 0;
+}
+ul.thumbs li {
+ float: left;
+ padding: 0;
+ margin: 5px 10px 5px 0;
+ list-style: none;
+}
+a.thumb {
+ padding: 2px;
+ display: block;
+ border: 1px solid #ccc;
+}
+ul.thumbs li.selected a.thumb {
+ background: #000;
+}
+a.thumb:focus {
+ outline: none;
+}
+ul.thumbs img {
+ border: none;
+ display: block;
+}
+div.pagination {
+ clear: both;
+}
+div.navigation div.top {
+ margin-bottom: 12px;
+ height: 11px;
+}
+div.navigation div.bottom {
+ margin-top: 12px;
+}
+div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
+ display: block;
+ float: left;
+ margin-right: 2px;
+ padding: 4px 7px 2px 7px;
+ border: 1px solid #ccc;
+}
+div.pagination a:hover {
+ background-color: #eee;
+ text-decoration: none;
+}
+div.pagination span.current {
+ font-weight: bold;
+ background-color: #000;
+ border-color: #000;
+ color: #fff;
+}
+div.pagination span.ellipsis {
+ border: none;
+ padding: 5px 0 3px 2px;
+}
View
160 ajax/libs/galleriffic/2.0.1/css/galleriffic-4.css
@@ -0,0 +1,160 @@
+div.content {
+ /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
+ display: none;
+ float: right;
+ width: 550px;
+}
+div.content a, div.navigation a {
+ text-decoration: none;
+ color: #777;
+}
+div.content a:focus, div.content a:hover, div.content a:active {
+ text-decoration: underline;
+}
+div.controls {
+ margin-top: 5px;
+ height: 23px;
+}
+div.controls a {
+ padding: 5px;
+}
+div.ss-controls {
+ float: left;
+}
+div.nav-controls {
+ float: right;
+}
+div.slideshow-container {
+ position: relative;
+ clear: both;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+}
+div.loader {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-image: url('loader.gif');
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 550px;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+}
+div.slideshow {
+
+}
+div.slideshow span.image-wrapper {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+div.slideshow a.advance-link {
+ display: block;
+ width: 550px;
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+ line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
+ text-align: center;
+}
+div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
+ text-decoration: none;
+}
+div.slideshow img {
+ vertical-align: middle;
+ border: 1px solid #ccc;
+}
+div.download {
+ float: right;
+}
+div.caption-container {
+
+}
+span.image-caption {
+ display: block;
+ position: absolute;
+}
+div.caption {
+ background-color: #000;
+ padding: 12px;
+ color: #ccc;
+}
+div.caption a {
+ color: #fff;
+}
+div.image-title {
+ font-weight: bold;
+ font-size: 1.4em;
+}
+
+div.image-desc {
+ line-height: 1.3em;
+ padding-top: 12px;
+}
+div.navigation {
+ /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
+}
+ul.thumbs {
+ clear: both;
+ margin: 0;
+ padding: 0;
+}
+ul.thumbs li {
+ float: left;
+ padding: 0;
+ margin: 5px 10px 5px 0;
+ list-style: none;
+}
+a.thumb {
+ padding: 2px;
+ display: block;
+ border: 1px solid #ccc;
+}
+ul.thumbs li.selected a.thumb {
+ background: #000;
+}
+a.thumb:focus {
+ outline: none;
+}
+ul.thumbs img {
+ border: none;
+ display: block;
+}
+div.pagination {
+ clear: both;
+}
+div.navigation div.top {
+ margin-bottom: 12px;
+ height: 11px;
+}
+div.navigation div.bottom {
+ margin-top: 12px;
+}
+div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
+ display: block;
+ float: left;
+ margin-right: 2px;
+ padding: 4px 7px 2px 7px;
+ border: 1px solid #ccc;
+}
+div.pagination a:hover {
+ background-color: #eee;
+ text-decoration: none;
+}
+div.pagination span.current {
+ font-weight: bold;
+ background-color: #000;
+ border-color: #000;
+ color: #fff;
+}
+div.pagination span.ellipsis {
+ border: none;
+ padding: 5px 0 3px 2px;
+}
+#captionToggle a {
+ float: right;
+ display: block;
+ background-image: url('caption.png');
+ background-repeat: no-repeat;
+ background-position: right;
+ margin-top: 5px;
+ padding: 5px 30px 5px 5px;
+}
View
197 ajax/libs/galleriffic/2.0.1/css/galleriffic-5.css
@@ -0,0 +1,197 @@
+div#container {
+ overflow: hidden;
+}
+div.content {
+ display: none;
+ clear: both;
+}
+
+div.content a, div.navigation a {
+ text-decoration: none;
+}
+div.content a:hover, div.content a:active {
+ text-decoration: underline;
+}
+
+div.navigation a.pageLink {
+ height: 77px;
+ line-height: 77px;
+}
+
+div.controls {
+ margin-top: 5px;
+ height: 23px;
+}
+div.controls a {
+ padding: 5px;
+}
+div.ss-controls {
+ float: left;
+}
+div.nav-controls {
+ float: right;
+}
+
+div.slideshow-container,
+div.loader,
+div.slideshow a.advance-link {
+ width: 510px; /* This should be set to be at least the width of the largest image in the slideshow with padding */
+}
+
+div.loader,
+div.slideshow a.advance-link,
+div.caption-container {
+ height: 502px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
+}
+
+div.slideshow-container {
+ position: relative;
+ clear: both;
+ float: left;
+ height: 532px;
+}
+
+div.loader {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-image: url('images/loader.gif');
+ background-repeat: no-repeat;
+ background-position: center;
+}
+div.slideshow span.image-wrapper {
+ display: block;
+ position: absolute;
+ top: 30px;
+ left: 0;
+}
+div.slideshow a.advance-link {
+ display: block;
+ line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
+ text-align: center;
+}
+
+div.slideshow a.advance-link:hover,
+div.slideshow a.advance-link:active,
+div.slideshow a.advance-link:visited {
+ text-decoration: none;
+}
+div.slideshow a.advance-link:focus {
+ outline: none;
+}
+
+div.slideshow img {
+ border-style: solid;
+ border-width: 1px;
+}
+div.caption-container {
+ float: right;
+ position: relative;
+ margin-top: 30px;
+}
+span.image-caption {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+div.caption-container, span.image-caption {
+ width: 334px;
+}
+
+div.caption {
+ padding: 0 12px;
+}
+
+div.image-title {
+ font-weight: bold;
+ font-size: 1.4em;
+}
+div.image-desc {
+ line-height: 1.3em;
+ padding-top: 12px;
+}
+div.download {
+ margin-top: 8px;
+}
+div.photo-index {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ padding: 0 12px;
+}
+div.navigation-container {
+ float: left;
+ position: relative;
+ left: 50%;
+}
+div.navigation {
+ float: left;
+ position: relative;
+ left: -50%;
+}
+div.navigation a.pageLink {
+ display: block;
+ position: relative;
+ float: left;
+ margin: 2px;
+ width: 16px;
+ background-position:center center;
+ background-repeat:no-repeat;
+}
+div.navigation a.pageLink:focus {
+ outline: none;
+}
+
+ul.thumbs {
+ position: relative;
+ float: left;
+ margin: 0;
+ padding: 0;
+}
+ul.thumbs li {
+ float: left;
+ padding: 0;
+ margin: 2px;
+ list-style: none;
+}
+a.thumb {
+ padding: 1px;
+ display: block;
+}
+a.thumb:focus {
+ outline: none;
+}
+ul.thumbs img {
+ border: none;
+ display: block;
+}
+div.pagination {
+ clear: both;
+ position: relative;
+ left: -50%;
+}
+div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
+ position: relative;
+ display: block;
+ float: left;
+ margin-right: 2px;
+ padding: 4px 7px 2px 7px;
+ border: 1px solid #ccc;
+}
+div.pagination a:hover {
+ text-decoration: none;
+}
+div.pagination span.current {
+ font-weight: bold;
+}
+div.pagination span.ellipsis {
+ border: none;
+ padding: 5px 0 3px 2px;
+}
+
+div.gallery-gutter {
+ clear: both;
+ padding-bottom: 20px;
+}
View
BIN ajax/libs/galleriffic/2.0.1/css/loader.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN ajax/libs/galleriffic/2.0.1/css/loaderWhite.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN ajax/libs/galleriffic/2.0.1/css/nextPageArrow.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN ajax/libs/galleriffic/2.0.1/css/nextPageArrowWhite.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN ajax/libs/galleriffic/2.0.1/css/prevPageArrow.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN ajax/libs/galleriffic/2.0.1/css/prevPageArrowWhite.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
57 ajax/libs/galleriffic/2.0.1/css/white.css
@@ -0,0 +1,57 @@
+body{
+ background-color: #eee;
+ color: #444;
+}
+a{
+ color: #27D;
+}
+h2 {
+ color: #333;
+}
+div#page {
+ background-color: #fff;
+ border-color: #ddd;
+}
+div#footer {
+ color: #777;
+}
+div.caption-container {
+ color: #111;
+}
+div.image-title {
+ font-weight: bold;
+ font-size: 1.4em;
+}
+div.image-desc {
+ line-height: 1.3em;
+ padding-top: 12px;
+}
+div.download {
+ margin-top: 8px;
+}
+div.photo-index {
+ color: #777;
+}
+div.navigation a.prev {
+ background-image: url(prevPageArrow.gif);
+}
+div.navigation a.next {
+ background-image: url(nextPageArrow.gif);
+}
+div.loader {
+ background-image: url(loader.gif);
+}
+div.slideshow img {
+ border-color: #ccc;
+}
+ul.thumbs li.selected a.thumb {
+ background: #000;
+}
+div.pagination a:hover {
+ background-color: #eee;
+}
+div.pagination span.current {
+ background-color: #000;
+ border-color: #000;
+ color: #fff;
+}
View
142 ajax/libs/galleriffic/2.0.1/example-1.html
@@ -0,0 +1,142 @@
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Galleriffic | Minimal implementation</title>
+ <link rel="stylesheet" href="css/basic.css" type="text/css" />
+ <link rel="stylesheet" href="css/galleriffic-1.css" type="text/css" />
+ <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script type="text/javascript" src="jquery.galleriffic.js"></script>
+ </head>
+ <body>
+ <div id="page">
+ <div id="container">
+ <h1><a href="index.html">Galleriffic</a></h1>
+ <h2>Minimal implementation</h2>
+
+ <!-- Start Minimal Gallery Html Containers -->
+ <div id="gallery" class="content">
+ <div id="controls" class="controls"></div>
+ <div class="slideshow-container">
+ <div id="loading" class="loader"></div>
+ <div id="slideshow" class="slideshow"></div>
+ </div>
+ </div>
+ <div id="thumbs" class="navigation">
+ <ul class="thumbs noscript">
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">Title #0</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">Title #1</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">Title #2</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">Title #3</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">Title #4</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">Title #5</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">Title #6</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">Title #7</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">Title #8</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">Title #9</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">Title #10</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">Title #11</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">Title #12</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">Title #13</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">Title #14</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">Title #15</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">Title #16</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">Title #17</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">Title #18</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">Title #19</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">Title #20</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">Title #21</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">Title #22</a>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">Title #23</a>
+ </li>
+ </ul>
+ </div>
+ <!-- End Minimal Gallery Html Containers -->
+ <div style="clear: both;"></div>
+ </div>
+ </div>
+ <div id="footer">&copy; 2009 Trent Foley</div>
+ <script type="text/javascript">
+ // We only want these styles applied when javascript is enabled
+ $('div.navigation').css({'width' : '300px', 'float' : 'left'});
+ $('div.content').css('display', 'block');
+
+ $(document).ready(function() {
+ // Initialize Minimal Galleriffic Gallery
+ $('#thumbs').galleriffic({
+ imageContainerSel: '#slideshow',
+ controlsContainerSel: '#controls'
+ });
+ });
+ </script>
+ </body>
+</html>
View
401 ajax/libs/galleriffic/2.0.1/example-2.html
@@ -0,0 +1,401 @@
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Galleriffic | Thumbnail rollover effects and slideshow crossfades</title>
+ <link rel="stylesheet" href="css/basic.css" type="text/css" />
+ <link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
+ <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script type="text/javascript" src="jquery.galleriffic.js"></script>
+ <script type="text/javascript" src="jquery.opacityrollover.js"></script>
+ <!-- We only want the thunbnails to display when javascript is disabled -->
+ <script type="text/javascript">
+ document.write('<style>.noscript { display: none; }</style>');
+ </script>
+ </head>
+ <body>
+ <div id="page">
+ <div id="container">
+ <h1><a href="index.html">Galleriffic</a></h1>
+ <h2>Thumbnail rollover effects and slideshow crossfades</h2>
+
+ <!-- Start Advanced Gallery Html Containers -->
+ <div id="gallery" class="content">
+ <div id="controls" class="controls"></div>
+ <div class="slideshow-container">
+ <div id="loading" class="loader"></div>
+ <div id="slideshow" class="slideshow"></div>
+ </div>
+ <div id="caption" class="caption-container"></div>
+ </div>
+ <div id="thumbs" class="navigation">
+ <ul class="thumbs noscript">
+ <li>
+ <a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
+ <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #0</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
+ <img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
+ </a>
+ <div class="caption">
+ Any html can be placed here ...
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
+ <img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #2</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
+ <img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #3</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
+ <img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #4</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
+ <img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #5</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
+ <img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #6</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
+ <img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #7</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
+ <img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #8</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
+ <img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #9</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
+ <img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #10</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
+ <img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #11</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
+ <img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #12</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
+ <img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #13</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
+ <img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #14</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">
+ <img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title #15" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #15</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">
+ <img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title #16" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #16</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">
+ <img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title #17" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #17</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">
+ <img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title #18" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #18</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">
+ <img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title #19" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #19</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">
+ <img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title #20" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #20</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">
+ <img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title #21" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #21</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
+ <img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #22</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">
+ <img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #23</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div style="clear: both;"></div>
+ </div>
+ </div>
+ <div id="footer">&copy; 2009 Trent Foley</div>
+ <script type="text/javascript">
+ jQuery(document).ready(function($) {
+ // We only want these styles applied when javascript is enabled
+ $('div.navigation').css({'width' : '300px', 'float' : 'left'});
+ $('div.content').css('display', 'block');
+
+ // Initially set opacity on thumbs and add
+ // additional styling for hover effect on thumbs
+ var onMouseOutOpacity = 0.67;
+ $('#thumbs ul.thumbs li').opacityrollover({
+ mouseOutOpacity: onMouseOutOpacity,
+ mouseOverOpacity: 1.0,
+ fadeSpeed: 'fast',
+ exemptionSelector: '.selected'
+ });
+
+ // Initialize Advanced Galleriffic Gallery
+ var gallery = $('#thumbs').galleriffic({
+ delay: 2500,
+ numThumbs: 15,
+ preloadAhead: 10,
+ enableTopPager: true,
+ enableBottomPager: true,
+ maxPagesToShow: 7,
+ imageContainerSel: '#slideshow',
+ controlsContainerSel: '#controls',
+ captionContainerSel: '#caption',
+ loadingContainerSel: '#loading',
+ renderSSControls: true,
+ renderNavControls: true,
+ playLinkText: 'Play Slideshow',
+ pauseLinkText: 'Pause Slideshow',
+ prevLinkText: '&lsaquo; Previous Photo',
+ nextLinkText: 'Next Photo &rsaquo;',
+ nextPageLinkText: 'Next &rsaquo;',
+ prevPageLinkText: '&lsaquo; Prev',
+ enableHistory: false,
+ autoStart: false,
+ syncTransitions: true,
+ defaultTransitionDuration: 900,
+ onSlideChange: function(prevIndex, nextIndex) {
+ // 'this' refers to the gallery, which is an extension of $('#thumbs')
+ this.find('ul.thumbs').children()
+ .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
+ .eq(nextIndex).fadeTo('fast', 1.0);
+ },
+ onPageTransitionOut: function(callback) {
+ this.fadeTo('fast', 0.0, callback);
+ },
+ onPageTransitionIn: function() {
+ this.fadeTo('fast', 1.0);
+ }
+ });
+ });
+ </script>
+ </body>
+</html>
View
441 ajax/libs/galleriffic/2.0.1/example-3.html
@@ -0,0 +1,441 @@
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Galleriffic | Integration with history plugin</title>
+ <link rel="stylesheet" href="css/basic.css" type="text/css" />
+ <link rel="stylesheet" href="css/galleriffic-3.css" type="text/css" />
+ <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/history.js/1.7.1/bundled/html5/jquery.history.js"></script>
+ <script type="text/javascript" src="jquery.galleriffic.js"></script>
+ <script type="text/javascript" src="jquery.opacityrollover.js"></script>
+ <!-- We only want the thunbnails to display when javascript is disabled -->
+ <script type="text/javascript">
+ document.write('<style>.noscript { display: none; }</style>');
+ </script>
+ </head>
+ <body>
+ <div id="page">
+ <div id="container">
+ <h1><a href="index.html">Galleriffic</a></h1>
+ <h2>Integration with history plugin</h2>
+
+ <!-- Start Advanced Gallery Html Containers -->
+ <div id="gallery" class="content">
+ <div id="controls" class="controls"></div>
+ <div class="slideshow-container">
+ <div id="loading" class="loader"></div>
+ <div id="slideshow" class="slideshow"></div>
+ </div>
+ <div id="caption" class="caption-container"></div>
+ </div>
+ <div id="thumbs" class="navigation">
+ <ul class="thumbs noscript">
+ <li>
+ <a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
+ <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #0</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
+ <img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
+ </a>
+ <div class="caption">
+ Any html can be placed here ...
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
+ <img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #2</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
+ <img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #3</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
+ <img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #4</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
+ <img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #5</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
+ <img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #6</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
+ <img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #7</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
+ <img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #8</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
+ <img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #9</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
+ <img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #10</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
+ <img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #11</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
+ <img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #12</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
+ <img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #13</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
+ <img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #14</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">
+ <img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title #15" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #15</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">
+ <img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title #16" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #16</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">
+ <img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title #17" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #17</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">
+ <img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title #18" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #18</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">
+ <img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title #19" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #19</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">
+ <img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title #20" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #20</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">
+ <img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title #21" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #21</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
+ <img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #22</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">
+ <img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #23</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <!-- End Advanced Gallery Html Containers -->
+ <div style="clear: both;"></div>
+ </div>
+ </div>
+ <div id="footer">&copy; 2009 Trent Foley</div>
+ <script type="text/javascript">
+ jQuery(document).ready(function($) {
+ // We only want these styles applied when javascript is enabled
+ $('div.navigation').css({'width' : '300px', 'float' : 'left'});
+ $('div.content').css('display', 'block');
+
+ // Initially set opacity on thumbs and add
+ // additional styling for hover effect on thumbs
+ var onMouseOutOpacity = 0.67;
+ $('#thumbs ul.thumbs li').opacityrollover({
+ mouseOutOpacity: onMouseOutOpacity,
+ mouseOverOpacity: 1.0,
+ fadeSpeed: 'fast',
+ exemptionSelector: '.selected'
+ });
+
+ // Initialize Advanced Galleriffic Gallery
+ var gallery = $('#thumbs').galleriffic({
+ delay: 2500,
+ numThumbs: 15,
+ preloadAhead: 10,
+ enableTopPager: true,
+ enableBottomPager: true,
+ maxPagesToShow: 7,
+ imageContainerSel: '#slideshow',
+ controlsContainerSel: '#controls',
+ captionContainerSel: '#caption',
+ loadingContainerSel: '#loading',
+ renderSSControls: true,
+ renderNavControls: true,
+ playLinkText: 'Play Slideshow',
+ pauseLinkText: 'Pause Slideshow',
+ prevLinkText: '&lsaquo; Previous Photo',
+ nextLinkText: 'Next Photo &rsaquo;',
+ nextPageLinkText: 'Next &rsaquo;',
+ prevPageLinkText: '&lsaquo; Prev',
+ enableHistory: true,
+ autoStart: false,
+ syncTransitions: true,
+ defaultTransitionDuration: 900,
+ onSlideChange: function(prevIndex, nextIndex) {
+ // 'this' refers to the gallery, which is an extension of $('#thumbs')
+ this.find('ul.thumbs').children()
+ .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
+ .eq(nextIndex).fadeTo('fast', 1.0);
+ },
+ onPageTransitionOut: function(callback) {
+ this.fadeTo('fast', 0.0, callback);
+ },
+ onPageTransitionIn: function() {
+ this.fadeTo('fast', 1.0);
+ }
+ });
+
+ /**** Functions to support integration of galleriffic with the jquery.history plugin ****/
+
+ // PageLoad function
+ // This function is called when:
+ // 1. after calling $.historyInit();
+ // 2. after calling $.historyLoad();
+ // 3. after pushing "Go Back" button of a browser
+ function pageload(hash) {
+ // alert("pageload: " + hash);
+ // hash doesn't contain the first # character.
+ if(hash) {
+ $.galleriffic.gotoImage(hash);
+ } else {
+ gallery.gotoIndex(0);
+ }
+ }
+
+ // Initialize history plugin.
+ // The callback is called at once by present location.hash.
+ $.historyInit(pageload, "advanced.html");
+
+ // set onlick event for buttons using the jQuery 1.3 live method
+ $("a[rel='history']").live('click', function(e) {
+ if (e.button != 0) return true;
+
+ var hash = this.href;
+ hash = hash.replace(/^.*#/, '');
+
+ // moves to a new page.
+ // pageload is called at once.
+ // hash don't contain "#", "?"
+ $.historyLoad(hash);
+
+ return false;
+ });
+
+ /****************************************************************************************/
+ });
+ </script>
+ </body>
+</html>
View
542 ajax/libs/galleriffic/2.0.1/example-4.html
@@ -0,0 +1,542 @@
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Galleriffic | Insert an image into the gallery after initialization</title>
+ <link rel="stylesheet" href="css/basic.css" type="text/css" />
+ <link rel="stylesheet" href="css/galleriffic-4.css" type="text/css" />
+ <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/history.js/1.7.1/bundled/html5/jquery.history.js"></script>
+ <script type="text/javascript" src="jquery.galleriffic.js"></script>
+ <script type="text/javascript" src="jquery.opacityrollover.js"></script>
+ <!-- We only want the thunbnails to display when javascript is disabled -->
+ <script type="text/javascript">
+ document.write('<style>.noscript { display: none; }</style>');
+ </script>
+ </head>
+ <body>
+ <div id="page">
+ <div id="container">
+ <h1><a href="index.html">Galleriffic</a></h1>
+ <h2>Insert and remove images after initialization</h2>
+
+ <!-- Start Advanced Gallery Html Containers -->
+ <div id="gallery" class="content">
+ <div id="controls" class="controls"></div>
+ <div class="slideshow-container">
+ <div id="loading" class="loader"></div>
+ <div id="slideshow" class="slideshow"></div>
+ <div id="caption" class="caption-container"></div>
+ </div>
+ <div id="captionToggle">
+ <a href="#toggleCaption" class="off" title="Show Caption">Show Caption</a>
+ </div>
+ </div>
+ <div id="thumbs" class="navigation">
+ <ul class="thumbs noscript">
+ <li>
+ <a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
+ <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #0</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
+ <img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
+ </a>
+ <div class="caption">
+ Any html can be placed here ...
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
+ <img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #2</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
+ <img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #3</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
+ <img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
+ </div>
+ <div class="image-title">Title #4</div>
+ <div class="image-desc">Description</div>
+ </div>
+ </li>
+
+ <li>
+ <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
+ <img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
+ </a>
+ <div class="caption">
+ <div class="download">
+ <a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jp