Commits

David Jean Louis committed 2fdf3d3

Basic implementation of galleria, galleriffic and easyslider rendering engines

  • Participants
  • Parent commits 793ef5f

Comments (0)

Files changed (26)

cmsplugin_gallery/cms_plugins.py

     name = _('Gallery')
     inlines = (PhotoAdmin, )
 
+    '''
     class Media:
         """
         For a better user experience, we use a lightbox to edit inlines,
                settings.CMS_MEDIA_URL,)}
         js = ('%sjs/lib/ui.core.js' % settings.CMS_MEDIA_URL, 
               '%sjs/lib/ui.dialog.js' % settings.CMS_MEDIA_URL,)
+    '''
 
 
     def render(self, context, instance, placeholder):
         """
         context.update({
             'placeholder': placeholder,
-            'cmsplugin_gallery_media_url': settings.CMSPLUGIN_GALLERY_MEDIA_URL,
+            'cmsplugin_gallery_media_url': \
+                plugin_settings.CMSPLUGIN_GALLERY_MEDIA_URL,
             'gallery': instance,
             'settings': {
                 'thumbnail_size': (

cmsplugin_gallery/media/cmsplugin_gallery/easyslider/easySlider.packed.js

+/*
+ * 	Easy Slider - jQuery plugin
+ *	written by Alen Grakalic	
+ *	http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
+ *
+ *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
+ *	Dual licensed under the MIT (MIT-LICENSE.txt)
+ *	and GPL (GPL-LICENSE.txt) licenses.
+ *
+ *	Built for jQuery library
+ *	http://jquery.com
+ */
+eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){$.K.V=5(d){3 e={8:\'U\',v:\'M\',4:\'J\',A:\'E\',B:\'\',j:T};3 d=$.R(e,d);Q f.L(5(){2=$(f);3 s=$("n",2).I;3 w=2.k();3 h=2.D();3 b=s-1;3 t=0;3 c=(d.B==\'S\');$("i",2).z(\'k\',s*w);6(!c)$("n",2).z(\'P\',\'O\');$(2).N(\'<9 u="\'+d.8+\'"><a r=\\"m:q(0);\\">\'+d.v+\'</a></9> <9 u="\'+d.4+\'"><a r=\\"m:q(0);\\">\'+d.A+\'</a></9>\');$("a","#"+d.8).o();$("a","#"+d.4).o();$("a","#"+d.4).y(5(){7("l");6(t>=b)$(f).x();$("a","#"+d.8).g()});$("a","#"+d.8).y(5(){7("H");6(t<=0)$(f).x();$("a","#"+d.4).g()});5 7(a){6(a=="l"){t=(t>=b)?b:t+1}C{t=(t<=0)?0:t-1};6(!c){p=(t*w*-1);$("i",2).7({G:p},d.j)}C{p=(t*h*-1);$("i",2).7({F:p},d.j)}};6(s>1)$("a","#"+d.4).g()})}})(W);',59,59,'||obj|var|nextId|function|if|animate|prevId|span||||||this|fadeIn||ul|speed|width|next|javascript|li|hide||void|href|||id|prevText||fadeOut|click|css|nextText|orientation|else|height|Next|marginTop|marginLeft|prev|length|nextBtn|fn|each|Previous|after|left|float|return|extend|vertical|800|prevBtn|easySlider|jQuery'.split('|'),0,{}))

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/basic.css

+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;
+}

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/black.css

+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;
+}

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/caption.png

Added
New image

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/galleriffic-1.css

+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;
+}

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/galleriffic-2.css

+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;
+}

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/galleriffic-3.css

+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;
+}

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/galleriffic-4.css

+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;
+}

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/galleriffic-5.css

+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;
+}

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/jush.css

+.jush { color: black; }
+.jush-htm_com, .jush-com, .jush-one, .jush-php_com, .jush-php_one, .jush-js_one { color: gray; }
+.jush-php { color: #000033; background-color: #FFF0F0; }
+.jush-php_quo, .jush-quo, .jush-php_eot, .jush-apo, .jush-py_rlapo, .jush-py_rlquo, .jush-py_rapo, .jush-py_rquo, .jush-py_lapo, .jush-py_lquo, .jush-sql_apo, .jush-sqlite_apo, .jush-sql_quo, .jush-sqlite_quo, .jush-sql_eot { color: green; }
+.jush-php_apo { color: #009F00; }
+.jush-php_quo_var, .jush-php_var, .jush-sql_var { font-style: italic; }
+.jush-php_halt2 { background-color: white; color: black; }
+.jush-tag_css, .jush-att_css .jush-att_quo, .jush-att_css .jush-att_apo, .jush-att_css .jush-att_val { color: black; background-color: #FFFFE0; }
+.jush-tag_js, .jush-att_js .jush-att_quo, .jush-att_js .jush-att_apo, .jush-att_js .jush-att_val, .jush-css_js { color: black; background-color: #F0F0FF; }
+.jush-tag { color: navy; }
+.jush-att, .jush-att_js, .jush-att_css { color: teal; }
+.jush-att_quo, .jush-att_apo, .jush-att_val { color: purple; }
+.jush-ent { color: purple; }
+.jush-js_reg { color: navy; }
+.jush-php_sql .jush-php_quo, .jush-php_sql .jush-php_apo,
+.jush-php_sqlite .jush-php_quo, .jush-php_sqlite .jush-php_apo,
+.jush-php_pgsql .jush-php_quo, .jush-php_pgsql .jush-php_apo
+{ background-color: #FFBBB0; }
+.jush-bac, .jush-php_bac, .jush-bra, .jush-pgsql .jush-sqlite_quo { color: red; }
+.jush-num, .jush-clr { color: #007f7f; }
+
+.jush a { color: navy; }
+.jush-sql a { font-weight: bold; }
+.jush-tag a,
+.jush-php_phpini .jush-php_apo a, .jush-php_phpini .jush-php_quo a,
+.jush-php_sql .jush-php_apo a, .jush-php_sql .jush-php_quo a,
+.jush-php_sqlite .jush-php_apo a, .jush-php_sqlite .jush-php_quo a,
+.jush-php_pgsql .jush-php_apo a, .jush-php_pgsql .jush-php_quo a
+{ color: inherit; color: expression(parentNode.currentStyle.color); }

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/loader.gif

Added
New image

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/loaderWhite.gif

Added
New image

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/nextPageArrow.gif

Added
New image

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/nextPageArrowWhite.gif

Added
New image

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/prevPageArrow.gif

Added
New image

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/prevPageArrowWhite.gif

Added
New image

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/css/white.css

+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;
+}

cmsplugin_gallery/media/cmsplugin_gallery/galleriffic/js/jquery.galleriffic.js

+/**
+ * jQuery Galleriffic plugin
+ *
+ * Copyright (c) 2008 Trent Foley (http://trentacular.com)
+ * Licensed under the MIT License:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *
+ * Much thanks to primary contributer Ponticlaro (http://www.ponticlaro.com)
+ */
+;(function($) {
+	// Globally keep track of all images by their unique hash.  Each item is an image data object.
+	var allImages = {};
+	var imageCounter = 0;
+
+	// Galleriffic static class
+	$.galleriffic = {
+		version: '2.0.1',
+
+		// Strips invalid characters and any leading # characters
+		normalizeHash: function(hash) {
+			return hash.replace(/^.*#/, '').replace(/\?.*$/, '');
+		},
+
+		getImage: function(hash) {
+			if (!hash)
+				return undefined;
+
+			hash = $.galleriffic.normalizeHash(hash);
+			return allImages[hash];
+		},
+
+		// Global function that looks up an image by its hash and displays the image.
+		// Returns false when an image is not found for the specified hash.
+		// @param {String} hash This is the unique hash value assigned to an image.
+		gotoImage: function(hash) {
+			var imageData = $.galleriffic.getImage(hash);
+			if (!imageData)
+				return false;
+
+			var gallery = imageData.gallery;
+			gallery.gotoImage(imageData);
+			
+			return true;
+		},
+
+		// Removes an image from its respective gallery by its hash.
+		// Returns false when an image is not found for the specified hash or the
+		// specified owner gallery does match the located images gallery.
+		// @param {String} hash This is the unique hash value assigned to an image.
+		// @param {Object} ownerGallery (Optional) When supplied, the located images
+		// gallery is verified to be the same as the specified owning gallery before
+		// performing the remove operation.
+		removeImageByHash: function(hash, ownerGallery) {
+			var imageData = $.galleriffic.getImage(hash);
+			if (!imageData)
+				return false;
+
+			var gallery = imageData.gallery;
+			if (ownerGallery && ownerGallery != gallery)
+				return false;
+
+			return gallery.removeImageByIndex(imageData.index);
+		}
+	};
+
+	var defaults = {
+		delay:                     3000,
+		numThumbs:                 20,
+		preloadAhead:              40, // Set to -1 to preload all images
+		enableTopPager:            false,
+		enableBottomPager:         true,
+		maxPagesToShow:            7,
+		imageContainerSel:         '',
+		captionContainerSel:       '',
+		controlsContainerSel:      '',
+		loadingContainerSel:       '',
+		renderSSControls:          true,
+		renderNavControls:         true,
+		playLinkText:              'Play',
+		pauseLinkText:             'Pause',
+		prevLinkText:              'Previous',
+		nextLinkText:              'Next',
+		nextPageLinkText:          'Next &rsaquo;',
+		prevPageLinkText:          '&lsaquo; Prev',
+		enableHistory:             false,
+		enableKeyboardNavigation:  true,
+		autoStart:                 false,
+		syncTransitions:           false,
+		defaultTransitionDuration: 1000,
+		onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
+		onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
+		onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
+		onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }
+		onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
+		onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
+		onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
+	};
+
+	// Primary Galleriffic initialization function that should be called on the thumbnail container.
+	$.fn.galleriffic = function(settings) {
+		//  Extend Gallery Object
+		$.extend(this, {
+			// Returns the version of the script
+			version: $.galleriffic.version,
+
+			// Current state of the slideshow
+			isSlideshowRunning: false,
+			slideshowTimeout: undefined,
+
+			// This function is attached to the click event of generated hyperlinks within the gallery
+			clickHandler: function(e, link) {
+				this.pause();
+
+				if (!this.enableHistory) {
+					// The href attribute holds the unique hash for an image
+					var hash = $.galleriffic.normalizeHash($(link).attr('href'));
+					$.galleriffic.gotoImage(hash);
+					e.preventDefault();
+				}
+			},
+
+			// Appends an image to the end of the set of images.  Argument listItem can be either a jQuery DOM element or arbitrary html.
+			// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
+			appendImage: function(listItem) {
+				this.addImage(listItem, false, false);
+				return this;
+			},
+
+			// Inserts an image into the set of images.  Argument listItem can be either a jQuery DOM element or arbitrary html.
+			// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
+			// @param {Integer} position The index within the gallery where the item shouold be added.
+			insertImage: function(listItem, position) {
+				this.addImage(listItem, false, true, position);
+				return this;
+			},
+
+			// Adds an image to the gallery and optionally inserts/appends it to the DOM (thumbExists)
+			// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
+			// @param {Boolean} thumbExists Specifies whether the thumbnail already exists in the DOM or if it needs to be added.
+			// @param {Boolean} insert Specifies whether the the image is appended to the end or inserted into the gallery.
+			// @param {Integer} position The index within the gallery where the item shouold be added.
+			addImage: function(listItem, thumbExists, insert, position) {
+				var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;				
+				var $aThumb = $li.find('a.thumb');
+				var slideUrl = $aThumb.attr('href');
+				var title = $aThumb.attr('title');
+				var $caption = $li.find('.caption').remove();
+				var hash = $aThumb.attr('name');
+
+				// Increment the image counter
+				imageCounter++;
+
+				// Autogenerate a hash value if none is present or if it is a duplicate
+				if (!hash || allImages[''+hash]) {
+					hash = imageCounter;
+				}
+
+				// Set position to end when not specified
+				if (!insert)
+					position = this.data.length;
+				
+				var imageData = {
+					title:title,
+					slideUrl:slideUrl,
+					caption:$caption,
+					hash:hash,
+					gallery:this,
+					index:position
+				};
+
+				// Add the imageData to this gallery's array of images
+				if (insert) {
+					this.data.splice(position, 0, imageData);
+
+					// Reset index value on all imageData objects
+					this.updateIndices(position);
+				}
+				else {
+					this.data.push(imageData);
+				}
+
+				var gallery = this;
+
+				// Add the element to the DOM
+				if (!thumbExists) {
+					// Update thumbs passing in addition post transition out handler
+					this.updateThumbs(function() {
+						var $thumbsUl = gallery.find('ul.thumbs');
+						if (insert)
+							$thumbsUl.children(':eq('+position+')').before($li);
+						else
+							$thumbsUl.append($li);
+						
+						if (gallery.onImageAdded)
+							gallery.onImageAdded(imageData, $li);
+					});
+				}
+
+				// Register the image globally
+				allImages[''+hash] = imageData;
+
+				// Setup attributes and click handler
+				$aThumb.attr('rel', 'history')
+					.attr('href', '#'+hash)
+					.removeAttr('name')
+					.click(function(e) {
+						gallery.clickHandler(e, this);
+					});
+
+				return this;
+			},
+
+			// Removes an image from the gallery based on its index.
+			// Returns false when the index is out of range.
+			removeImageByIndex: function(index) {
+				if (index < 0 || index >= this.data.length)
+					return false;
+				
+				var imageData = this.data[index];
+				if (!imageData)
+					return false;
+				
+				this.removeImage(imageData);
+				
+				return true;
+			},
+
+			// Convenience method that simply calls the global removeImageByHash method.
+			removeImageByHash: function(hash) {
+				return $.galleriffic.removeImageByHash(hash, this);
+			},
+
+			// Removes an image from the gallery.
+			removeImage: function(imageData) {
+				var index = imageData.index;
+				
+				// Remove the image from the gallery data array
+				this.data.splice(index, 1);
+				
+				// Remove the global registration
+				delete allImages[''+imageData.hash];
+				
+				// Remove the image's list item from the DOM
+				this.updateThumbs(function() {
+					var $li = gallery.find('ul.thumbs')
+						.children(':eq('+index+')')
+						.remove();
+
+					if (gallery.onImageRemoved)
+						gallery.onImageRemoved(imageData, $li);
+				});
+
+				// Update each image objects index value
+				this.updateIndices(index);
+
+				return this;
+			},
+
+			// Updates the index values of the each of the images in the gallery after the specified index
+			updateIndices: function(startIndex) {
+				for (i = startIndex; i < this.data.length; i++) {
+					this.data[i].index = i;
+				}
+				
+				return this;
+			},
+
+			// Scraped the thumbnail container for thumbs and adds each to the gallery
+			initializeThumbs: function() {
+				this.data = [];
+				var gallery = this;
+
+				this.find('ul.thumbs > li').each(function(i) {
+					gallery.addImage($(this), true, false);
+				});
+
+				return this;
+			},
+
+			isPreloadComplete: false,
+
+			// Initalizes the image preloader
+			preloadInit: function() {
+				if (this.preloadAhead == 0) return this;
+				
+				this.preloadStartIndex = this.currentImage.index;
+				var nextIndex = this.getNextIndex(this.preloadStartIndex);
+				return this.preloadRecursive(this.preloadStartIndex, nextIndex);
+			},
+
+			// Changes the location in the gallery the preloader should work
+			// @param {Integer} index The index of the image where the preloader should restart at.
+			preloadRelocate: function(index) {
+				// By changing this startIndex, the current preload script will restart
+				this.preloadStartIndex = index;
+				return this;
+			},
+
+			// Recursive function that performs the image preloading
+			// @param {Integer} startIndex The index of the first image the current preloader started on.
+			// @param {Integer} currentIndex The index of the current image to preload.
+			preloadRecursive: function(startIndex, currentIndex) {
+				// Check if startIndex has been relocated
+				if (startIndex != this.preloadStartIndex) {
+					var nextIndex = this.getNextIndex(this.preloadStartIndex);
+					return this.preloadRecursive(this.preloadStartIndex, nextIndex);
+				}
+
+				var gallery = this;
+
+				// Now check for preloadAhead count
+				var preloadCount = currentIndex - startIndex;
+				if (preloadCount < 0)
+					preloadCount = this.data.length-1-startIndex+currentIndex;
+				if (this.preloadAhead >= 0 && preloadCount > this.preloadAhead) {
+					// Do this in order to keep checking for relocated start index
+					setTimeout(function() { gallery.preloadRecursive(startIndex, currentIndex); }, 500);
+					return this;
+				}
+
+				var imageData = this.data[currentIndex];
+				if (!imageData)
+					return this;
+
+				// If already loaded, continue
+				if (imageData.image)
+					return this.preloadNext(startIndex, currentIndex); 
+				
+				// Preload the image
+				var image = new Image();
+				
+				image.onload = function() {
+					imageData.image = this;
+					gallery.preloadNext(startIndex, currentIndex);
+				};
+
+				image.alt = imageData.title;
+				image.src = imageData.slideUrl;
+
+				return this;
+			},
+			
+			// Called by preloadRecursive in order to preload the next image after the previous has loaded.
+			// @param {Integer} startIndex The index of the first image the current preloader started on.
+			// @param {Integer} currentIndex The index of the current image to preload.
+			preloadNext: function(startIndex, currentIndex) {
+				var nextIndex = this.getNextIndex(currentIndex);
+				if (nextIndex == startIndex) {
+					this.isPreloadComplete = true;
+				} else {
+					// Use setTimeout to free up thread
+					var gallery = this;
+					setTimeout(function() { gallery.preloadRecursive(startIndex, nextIndex); }, 100);
+				}
+
+				return this;
+			},
+
+			// Safe way to get the next image index relative to the current image.
+			// If the current image is the last, returns 0
+			getNextIndex: function(index) {
+				var nextIndex = index+1;
+				if (nextIndex >= this.data.length)
+					nextIndex = 0;
+				return nextIndex;
+			},
+
+			// Safe way to get the previous image index relative to the current image.
+			// If the current image is the first, return the index of the last image in the gallery.
+			getPrevIndex: function(index) {
+				var prevIndex = index-1;
+				if (prevIndex < 0)
+					prevIndex = this.data.length-1;
+				return prevIndex;
+			},
+
+			// Pauses the slideshow
+			pause: function() {
+				this.isSlideshowRunning = false;
+				if (this.slideshowTimeout) {
+					clearTimeout(this.slideshowTimeout);
+					this.slideshowTimeout = undefined;
+				}
+
+				if (this.$controlsContainer) {
+					this.$controlsContainer
+						.find('div.ss-controls a').removeClass().addClass('play')
+						.attr('title', this.playLinkText)
+						.attr('href', '#play')
+						.html(this.playLinkText);
+				}
+				
+				return this;
+			},
+
+			// Plays the slideshow
+			play: function() {
+				this.isSlideshowRunning = true;
+
+				if (this.$controlsContainer) {
+					this.$controlsContainer
+						.find('div.ss-controls a').removeClass().addClass('pause')
+						.attr('title', this.pauseLinkText)
+						.attr('href', '#pause')
+						.html(this.pauseLinkText);
+				}
+
+				if (!this.slideshowTimeout) {
+					var gallery = this;
+					this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
+				}
+
+				return this;
+			},
+
+			// Toggles the state of the slideshow (playing/paused)
+			toggleSlideshow: function() {
+				if (this.isSlideshowRunning)
+					this.pause();
+				else
+					this.play();
+
+				return this;
+			},
+
+			// Advances the slideshow to the next image and delegates navigation to the
+			// history plugin when history is enabled
+			// enableHistory is true
+			ssAdvance: function() {
+				if (this.isSlideshowRunning)
+					this.next(true);
+
+				return this;
+			},
+
+			// Advances the gallery to the next image.
+			// @param {Boolean} dontPause Specifies whether to pause the slideshow.
+			// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.  
+			next: function(dontPause, bypassHistory) {
+				this.gotoIndex(this.getNextIndex(this.currentImage.index), dontPause, bypassHistory);
+				return this;
+			},
+
+			// Navigates to the previous image in the gallery.
+			// @param {Boolean} dontPause Specifies whether to pause the slideshow.
+			// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
+			previous: function(dontPause, bypassHistory) {
+				this.gotoIndex(this.getPrevIndex(this.currentImage.index), dontPause, bypassHistory);
+				return this;
+			},
+
+			// Navigates to the next page in the gallery.
+			// @param {Boolean} dontPause Specifies whether to pause the slideshow.
+			// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
+			nextPage: function(dontPause, bypassHistory) {
+				var page = this.getCurrentPage();
+				var lastPage = this.getNumPages() - 1;
+				if (page < lastPage) {
+					var startIndex = page * this.numThumbs;
+					var nextPage = startIndex + this.numThumbs;
+					this.gotoIndex(nextPage, dontPause, bypassHistory);
+				}
+
+				return this;
+			},
+
+			// Navigates to the previous page in the gallery.
+			// @param {Boolean} dontPause Specifies whether to pause the slideshow.
+			// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
+			previousPage: function(dontPause, bypassHistory) {
+				var page = this.getCurrentPage();
+				if (page > 0) {
+					var startIndex = page * this.numThumbs;
+					var prevPage = startIndex - this.numThumbs;				
+					this.gotoIndex(prevPage, dontPause, bypassHistory);
+				}
+				
+				return this;
+			},
+
+			// Navigates to the image at the specified index in the gallery
+			// @param {Integer} index The index of the image in the gallery to display.
+			// @param {Boolean} dontPause Specifies whether to pause the slideshow.
+			// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
+			gotoIndex: function(index, dontPause, bypassHistory) {
+				if (!dontPause)
+					this.pause();
+				
+				if (index < 0) index = 0;
+				else if (index >= this.data.length) index = this.data.length-1;
+				
+				var imageData = this.data[index];
+				
+				if (!bypassHistory && this.enableHistory)
+					$.historyLoad(String(imageData.hash));  // At the moment, historyLoad only accepts string arguments
+				else
+					this.gotoImage(imageData);
+
+				return this;
+			},
+
+			// This function is garaunteed to be called anytime a gallery slide changes.
+			// @param {Object} imageData An object holding the image metadata of the image to navigate to.
+			gotoImage: function(imageData) {
+				var index = imageData.index;
+
+				if (this.onSlideChange)
+					this.onSlideChange(this.currentImage.index, index);
+				
+				this.currentImage = imageData;
+				this.preloadRelocate(index);
+				
+				this.refresh();
+				
+				return this;
+			},
+
+			// Returns the default transition duration value.  The value is halved when not
+			// performing a synchronized transition.
+			// @param {Boolean} isSync Specifies whether the transitions are synchronized.
+			getDefaultTransitionDuration: function(isSync) {
+				if (isSync)
+					return this.defaultTransitionDuration;
+				return this.defaultTransitionDuration / 2;
+			},
+
+			// Rebuilds the slideshow image and controls and performs transitions
+			refresh: function() {
+				var imageData = this.currentImage;
+				if (!imageData)
+					return this;
+
+				var index = imageData.index;
+
+				// Update Controls
+				if (this.$controlsContainer) {
+					this.$controlsContainer
+						.find('div.nav-controls a.prev').attr('href', '#'+this.data[this.getPrevIndex(index)].hash).end()
+						.find('div.nav-controls a.next').attr('href', '#'+this.data[this.getNextIndex(index)].hash);
+				}
+
+				var previousSlide = this.$imageContainer.find('span.current').addClass('previous').removeClass('current');
+				var previousCaption = 0;
+
+				if (this.$captionContainer) {
+					previousCaption = this.$captionContainer.find('span.current').addClass('previous').removeClass('current');
+				}
+
+				// Perform transitions simultaneously if syncTransitions is true and the next image is already preloaded
+				var isSync = this.syncTransitions && imageData.image;
+
+				// Flag we are transitioning
+				var isTransitioning = true;
+				var gallery = this;
+
+				var transitionOutCallback = function() {
+					// Flag that the transition has completed
+					isTransitioning = false;
+
+					// Remove the old slide
+					previousSlide.remove();
+
+					// Remove old caption
+					if (previousCaption)
+						previousCaption.remove();
+
+					if (!isSync) {
+						if (imageData.image && imageData.hash == gallery.data[gallery.currentImage.index].hash) {
+							gallery.buildImage(imageData, isSync);
+						} else {
+							// Show loading container
+							if (gallery.$loadingContainer) {
+								gallery.$loadingContainer.show();
+							}
+						}
+					}
+				};
+
+				if (previousSlide.length == 0) {
+					// For the first slide, the previous slide will be empty, so we will call the callback immediately
+					transitionOutCallback();
+				} else {
+					if (this.onTransitionOut) {
+						this.onTransitionOut(previousSlide, previousCaption, isSync, transitionOutCallback);
+					} else {
+						previousSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, transitionOutCallback);
+						if (previousCaption)
+							previousCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
+					}
+				}
+
+				// Go ahead and begin transitioning in of next image
+				if (isSync)
+					this.buildImage(imageData, isSync);
+
+				if (!imageData.image) {
+					var image = new Image();
+					
+					// Wire up mainImage onload event
+					image.onload = function() {
+						imageData.image = this;
+
+						// Only build image if the out transition has completed and we are still on the same image hash
+						if (!isTransitioning && imageData.hash == gallery.data[gallery.currentImage.index].hash) {
+							gallery.buildImage(imageData, isSync);
+						}
+					};
+
+					// set alt and src
+					image.alt = imageData.title;
+					image.src = imageData.slideUrl;
+				}
+
+				// This causes the preloader (if still running) to relocate out from the currentIndex
+				this.relocatePreload = true;
+
+				return