--- a/js/jquery.galleriffic.js
+++ b/js/jquery.galleriffic.js
@@ -76,7 +76,7 @@
 		loadingContainerSel:       '',
 		renderSSControls:          true,
 		renderNavControls:         true,
-		playLinkText:              'Play',
+		playLinkText:              'Play Slideshow',
 		pauseLinkText:             'Pause',
 		prevLinkText:              'Previous',
 		nextLinkText:              'Next',
@@ -385,10 +385,10 @@
 
 				if (this.$controlsContainer) {
 					this.$controlsContainer
-						.find('div.ss-controls a').removeClass().addClass('play')
+						.find('div.ss-controls a').removeClass().addClass('play btn btn-link')
 						.attr('title', this.playLinkText)
 						.attr('href', '#play')
-						.html(this.playLinkText);
+						.html('<span class="glyphicon glyphicon-play"></span> ' + this.playLinkText);
 				}
 
 				return this;
@@ -400,10 +400,10 @@
 
 				if (this.$controlsContainer) {
 					this.$controlsContainer
-						.find('div.ss-controls a').removeClass().addClass('pause')
+						.find('div.ss-controls a').removeClass().addClass('pause btn btn-link')
 						.attr('title', this.pauseLinkText)
 						.attr('href', '#pause')
-						.html(this.pauseLinkText);
+						.html('<span class="glyphicon glyphicon-pause"></span> ' + this.pauseLinkText);
 				}
 
 				if (!this.slideshowTimeout) {
@@ -628,7 +628,7 @@
 				var gallery = this;
 				var nextIndex = this.getNextIndex(imageData.index);
 
-
+/*//JJM: original code commented out so that when clicking on the Slide image it instead of moving to the next slide it places the current image in a Colorbox popup window
 				// Construct new hidden span for the image
 				var newSlide = this.$imageContainer
 					.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'"></a></span>')
@@ -639,6 +639,48 @@
 					.click(function(e) {
 						gallery.clickHandler(e, this);
 					});
+*/
+//JJM: new code so that when clicking on the Slide image it instead of moving to the next slide it places the current image in a Colorbox popup window
+				// Construct new hidden span for the image
+				var imagesrc = imageData.image.src;
+                            imagesrc = imagesrc.replace("/styles/galleriffic_slide/public", "");//added JJM to patch so that popup is based on the original full-size image instead of the cropped image
+				var newSlide = this.$imageContainer
+					.append('<span class="image-wrapper current"><a href="'+imagesrc+'" class="image-link" ></a></span>')
+					.find('span.current').css('opacity', '0');
+
+				var galImages = [];
+				var orgGalImages = [];
+				
+				$( ".full-image a" ).each(function( index ) {
+					orgGalImages.push({src: $(this).attr('href')});
+					if( $(this).parent().parent().attr('class') == "selected" ){
+						currentGalImage = index;
+					}
+				})
+				
+				var galImages = orgGalImages;
+				galImages = galImages.slice( 0, currentGalImage );
+				orgGalImages = orgGalImages.slice( currentGalImage );
+				
+				var galImages = $.merge( orgGalImages, galImages );
+				
+				newSlide.find('a')
+					.append(imageData.image)
+					.click(function(e) {
+						e.preventDefault();
+//						$('a.colorbox').colorbox({rel:'gallery-all'});
+
+						$('.image-link').magnificPopup(
+						{
+							type:'image',
+							items: galImages,
+							gallery: {
+							  enabled: true
+							}
+						});
+					});
+//JJM: end of new code so that when clicking on the Slide image it instead of moving to the next slide it places the current image in a Colorbox popup window
+//AVF: Added magnific popup instead of colorbox
 
 				var newCaption = 0;
 				if (this.$captionContainer) {
@@ -904,10 +946,10 @@
 			if (this.renderSSControls) {
 				if (this.autoStart) {
 					this.$controlsContainer
-						.append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauseLinkText+'">'+this.pauseLinkText+'</a></div>');
+						.append('<div class="ss-controls"><a href="#pause" class="pause btn btn-link" title="'+this.pauseLinkText+'">'+this.pauseLinkText+'</a></div>');
 				} else {
 					this.$controlsContainer
-						.append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>');
+						.append('<div class="ss-controls"><a href="#play" class="play btn btn-link" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>');
 				}
 
 				this.$controlsContainer.find('div.ss-controls a')
@@ -920,7 +962,7 @@
 
 			if (this.renderNavControls) {
 				this.$controlsContainer
-					.append('<div class="nav-controls"><a class="prev" rel="history" title="'+this.prevLinkText+'">'+this.prevLinkText+'</a><a class="next" rel="history" title="'+this.nextLinkText+'">'+this.nextLinkText+'</a></div>')
+					.append('<div class="nav-controls"><a class="prev btn btn-link" rel="history" title="'+this.prevLinkText+'"><span class="glyphicon glyphicon-chevron-left"></span> '+this.prevLinkText+'</a><a class="next btn btn-link" rel="history" title="'+this.nextLinkText+'">'+this.nextLinkText+' <span class="glyphicon glyphicon-chevron-right"></span></a></div>')
 					.find('div.nav-controls a')
 					.click(function(e) {
 						gallery.clickHandler(e, this);
--- a/css/views_galleriffic_default.css
+++ b/css/views_galleriffic_default.css
@@ -1,176 +1,176 @@
-
-/* Views Galleriffic default css
- * Based off of css from original: http://www.twospy.com/galleriffic/index.html
- */
-
-#galleriffic {
-  width: 700px;
-}
-#galleriffic .content {
-  width: 505px;
-  float: right;
-}
-#galleriffic #thumbs {
-  float: left;
-  width: 190px;
-}
-#galleriffic .loader {
-  background-image: url('loader.gif');
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 510px;
-  height: 350px
-}
-#slideshow-container {
-  position: relative;
-  clear: both;
-  padding: 0 0 10px 0;
-}
-#galleriffic .content a, #galleriffic .navigation a {
-  text-decoration: none;
-  color: #777;
-}
-#galleriffic .content  a:focus, #galleriffic .content  a:hover, #galleriffic .content  a:active {
-  text-decoration: underline;
-}
-#galleriffic .controls a {
-  padding: 0 5px;
-}
-#galleriffic .ss-controls {
-  float: left;
-}
-#galleriffic .nav-controls {
-  float: right;
-}
-#galleriffic .slideshow {
-  position: relative;
-}
-#galleriffic .slideshow img {
-  border: none;
-  display: block;
-}
-#galleriffic .download {
-  float: right;
-}
-#galleriffic .image-title {
-  font-weight: bold;
-  font-size: 1.4em;
-}
-#galleriffic .image-desc {
-  line-height: 1.3em;
-  padding-top: 12px;
-}
-#galleriffic ul.thumbs {
-  clear: both;
-  margin: 0;
-  padding: 0;
-}
-#galleriffic ul.thumbs li {
-  float: left;
-  padding: 0;
-  margin: 5px 10px 5px 0;
-  list-style: none;
-}
-#galleriffic a.thumb {
-  padding: 2px;
-  display: block;
-  border: 1px solid #ccc;
-}
-#galleriffic ul.thumbs li.selected a.thumb {
-   background: #000;
-}
-#galleriffic a.thumb:focus {
-  outline: none;
-}
-#galleriffic ul.thumbs img {
-  border: none;
-  display: block;
-}
-#galleriffic .pagination {
-  clear: both;
-}
-#galleriffic .navigation.top {
-  margin-bottom: 12px;
-  height: 11px;
-}
-#galleriffic .navigation.bottom {
-  margin-top: 12px;
-}
-#galleriffic .pagination a, #galleriffic .pagination span.current {
-  display: block;
-  float: left;
-  margin-right: 2px;
-  padding: 4px 7px 2px 7px;
-  border: 1px solid #ccc;
-}
-#galleriffic .pagination a:hover {
-  background-color: #eee;
-  text-decoration: none;
-}
-#galleriffic .pagination span.current {
-  font-weight: bold;
-  background-color: #000;
-  border-color: #000;
-  color: #fff;
-}
-#galleriffic .slideshow,
-#galleriffic .loader,
-#galleriffic .slideshow a.advance-link,
-#galleriffic .caption-container {
-  clear: both;
-}
-#galleriffic .slideshow-container {
-  position: relative;
-  clear: both;
-  float: left;
-}
-#galleriffic .loader {
-  position: absolute;
-  background-image: url('loader.gif');
-  background-repeat: no-repeat;
-  background-position: center;
-}
-#galleriffic .slideshow span.image-wrapper {
-  display: block;
-  position: absolute;
-  left: 0;
-}
-#galleriffic .slideshow a.advance-link {
-  display: block;
-  line-height: 402px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
-  text-align: center;
-  display: block;
-}
-#galleriffic .slideshow a.advance-link img {
-  padding: 2px;
-  border: 1px solid #ccc;
-}
-#galleriffic .slideshow a.advance-link:hover,
-#galleriffic .slideshow a.advance-link:active,
-#galleriffic .slideshow a.advance-link:visited {
-  text-decoration: none;
-}
-#galleriffic #caption {
-  position: relative;
-  margin: 0 7px 0 0;
-}
-#galleriffic .caption {
-  padding: 0 5px;
-}
-#galleriffic span.image-wrapper {
-  top: 0;
-  width: 100%;
-  position: absolute;
-}
-#galleriffic span.image-caption {
-  top: 0;
-  left: 0;
-  border: 1px solid #ccc;
-  background-color: #eaeaea;
-  width: 100%;
-  position: absolute;
-  display: block;
-}
-#galleriffic .ellipsis {
-  float: left;
-}
+
+/* Views Galleriffic default css
+ * Based off of css from original: http://www.twospy.com/galleriffic/index.html
+ */
+
+#galleriffic {
+  width: 700px;
+}
+#galleriffic .content {
+  width: 505px;
+  float: right;
+}
+#galleriffic #thumbs {
+  float: left;
+  width: 190px;
+}
+#galleriffic .loader {
+  background-image: url('loader.gif');
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 510px;
+  height: 350px
+}
+#slideshow-container {
+  position: relative;
+  clear: both;
+  padding: 0 0 10px 0;
+}
+#galleriffic .content a, #galleriffic .navigation a {
+  text-decoration: none;
+  color: #777;
+}
+#galleriffic .content  a:focus, #galleriffic .content  a:hover, #galleriffic .content  a:active {
+  text-decoration: underline;
+}
+#galleriffic .controls a {
+  padding: 0 5px;
+}
+#galleriffic .ss-controls {
+  float: left;
+}
+#galleriffic .nav-controls {
+  float: right;
+}
+#galleriffic .slideshow {
+  position: relative;
+}
+#galleriffic .slideshow img {
+  border: none;
+  display: block;
+}
+#galleriffic .download {
+  float: right;
+}
+#galleriffic .image-title {
+  font-weight: bold;
+  font-size: 1.4em;
+}
+#galleriffic .image-desc {
+  line-height: 1.3em;
+  padding-top: 12px; 
+}
+#galleriffic ul.thumbs {
+  clear: both;
+  margin: 0;
+  padding: 0;
+}
+#galleriffic ul.thumbs li {
+  float: left;
+  padding: 0;
+  margin: 5px 10px 5px 0;
+  list-style: none;
+}
+#galleriffic a.thumb {
+  padding: 2px;
+  display: block;
+  border: 1px solid #ccc;
+}
+#galleriffic ul.thumbs li.selected a.thumb {
+   background: #000;
+}
+#galleriffic a.thumb:focus {
+  outline: none;
+}
+#galleriffic ul.thumbs img {
+  border: none;
+  display: block;
+}
+#galleriffic .pagination {
+  clear: both;
+}
+#galleriffic .navigation.top {
+  margin-bottom: 12px;
+  height: 11px;
+}
+#galleriffic .navigation.bottom {
+  margin-top: 12px;
+}
+#galleriffic .pagination a, #galleriffic .pagination span.current {
+  display: block;
+  float: left;
+  margin-right: 2px;
+  padding: 4px 7px 2px 7px;
+  border: 1px solid #ccc;
+}
+#galleriffic .pagination a:hover {
+  background-color: #eee;
+  text-decoration: none;
+}
+#galleriffic .pagination span.current {
+  font-weight: bold;
+  background-color: #000;
+  border-color: #000;
+  color: #fff;
+}
+#galleriffic .slideshow,
+#galleriffic .loader,
+#galleriffic .slideshow a.advance-link,
+#galleriffic .caption-container {
+  clear: both;
+}
+#galleriffic .slideshow-container {
+  position: relative;
+  clear: both;
+  float: left;
+}
+#galleriffic .loader {
+  position: absolute;
+  background-image: url('loader.gif');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+#galleriffic .slideshow span.image-wrapper {
+  display: block;
+  position: absolute;
+  left: 0;
+}
+#galleriffic .slideshow a.advance-link {
+  display: block;
+  line-height: 402px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
+  text-align: center;
+  display: block;
+}
+#galleriffic .slideshow a.advance-link img {
+  padding: 2px;
+  border: 1px solid #ccc;
+}
+#galleriffic .slideshow a.advance-link:hover,
+#galleriffic .slideshow a.advance-link:active,
+#galleriffic .slideshow a.advance-link:visited {
+  text-decoration: none;
+}
+#galleriffic #caption {
+  position: relative;
+  margin: 0 7px 0 0;
+}
+#galleriffic .caption {
+  padding: 0 5px;
+}
+#galleriffic span.image-wrapper {
+  top: 0;
+  width: 100%;
+  position: absolute;
+}
+#galleriffic span.image-caption {
+  top: 0;
+  left: 0;
+  border: 1px solid #ccc;
+  background-color: #eaeaea;
+  width: 100%;
+  position: absolute;
+  display: block;
+}
+#galleriffic .ellipsis {
+  float: left;
+}
--- a/views-galleriffic-view.tpl.php
+++ b/views-galleriffic-view.tpl.php
@@ -1,28 +1,28 @@
-<?php
-/**
- * @file
- * Views Galleriffic theme wrapper.
- *
- * @ingroup views_templates
- */
-
-?>
-<div id="galleriffic" class="clearfix">
-  <div id="thumbs" class="navigation">
-    <a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>
-    <ul class="thumbs noscript">
-      <?php foreach ($rows as $row): ?>
-        <?php print $row?>
-      <?php endforeach; ?>
-    </ul>
-    <a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
-  </div>
-  <div id="gallery" class="content">
-    <div id="controls" class="controls"></div>
-    <div id="slideshow-container">
-      <div id="loading" class="loader"></div>
-      <div id="slideshow"></div>
-    </div>
-    <div id="caption" class="caption-container"></div>
-  </div>
-</div>
+<?php
+/**
+ * @file
+ * Views Galleriffic theme wrapper.
+ *
+ * @ingroup views_templates
+ */
+
+?>
+<div id="galleriffic" class="clearfix">
+  <div id="thumbs" class="navigation">
+    <a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>
+    <ul class="thumbs noscript">
+      <?php foreach ($rows as $row): ?>
+        <?php print $row?>
+      <?php endforeach; ?>
+    </ul>
+    <a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
+  </div>
+  <div id="gallery" class="content">
+    <div id="controls" class="controls clearfix"></div>
+    <div id="slideshow-container">
+      <div id="loading" class="loader"></div>
+      <div id="slideshow"></div>
+    </div>
+    <!-- <div id="caption" class="caption-container"></div> -->
+  </div>
+</div>

--- a/views-galleriffic-view-gallerifficrows.tpl.php
+++ b/views-galleriffic-view-gallerifficrows.tpl.php
@@ -1,16 +1,18 @@
-<?php
-/**
- * @file
- * template for views galleriffic row
- */
-?>
-<?php if ($fields['slide']->content): ?>
-  <li>
-    <a class="thumb" href="<?php print $fields['slide']->content; ?>" title="<?php  if($fields['title']) { print $fields['title']->stripped;} ?>" name="<?php if($fields['title']) { print $fields['title']->stripped; }?>"><img src="<?php print $fields['thumbnail']->content; ?>" alt="<?php  if($fields['title']) { print $fields['title']->stripped; } ?>" /></a>
-    <div class="caption">
-      <?php if($fields['title']): ?><div class="image-title"><?php print $fields['title']->content; ?></div> <?php endif;?>
-      <?php if($fields['desc']): ?><div class="image-desc"><?php print $fields['desc']->content; ?></div><?php endif;?>
-
-    </div>
-  </li>
-<?php endif; ?>
+<?php
+/**
+ * @file
+ * template for views galleriffic row
+ */
+?>
+<?php if ($fields['slide']->content): ?>
+  <li>
+    <a class="thumb" href="<?php print $fields['slide']->content; ?>" title="<?php  if($fields['title']) { print $fields['title']->content;} ?>" name="<?php if($fields['title']) { print $fields['title']->stripped; }?>"><img src="<?php print $fields['thumbnail']->content; ?>" alt="<?php  if($fields['title']) { print $fields['title']->content; } ?>" /></a>
+<!--   <div class="caption">
+     <?php //if($fields['title']): ?><div class="image-title"><?php //print $fields['title']->content; ?></div> <?php //endif;?>  
+      <?php //if($fields['desc']): ?><div class="image-desc"><?php print $fields['desc']->content; ?></div><?php //endif;?>   
+    </div>  -->
+	<div class="full-image">
+		<a href="<?php print str_replace("/styles/galleriffic_slide/public", "", $fields['slide']->content); ?>"></a>
+	</div>
+  </li>
+<?php endif; ?>
--- a/views_galleriffic.module
+++ b/views_galleriffic.module
@@ -101,22 +101,27 @@
     }
     // This is to check if the field has an option. If not ignore.
     if (count($object) > 1) {
+      $vars['fields'][$object['option']] = new stdClass();
       $vars['fields'][$object['option']]->content = $object['content'];
       if ($object['option'] == 'title_field') {
+        $vars['fields']['title'] = new stdClass();
         $vars['fields']['title']->content = check_markup($vars['fields']['title_field']->content, $format_id = 'full_html', '', $check = FALSE);
         // Slideshow can break if there are spaces or '#' in the title.
         $vars['fields']['title']->stripped = str_replace('#', '', str_replace(' ', '', strip_tags($vars['fields']['title_field']->content)));
       }
       if ($object['option'] == 'description_field') {
+        $vars['fields']['desc'] = new stdClass();
         $vars['fields']['desc']->content = check_markup($vars['fields']['description_field']->content, $format_id = 'full_html', '', $check = FALSE);
       }
       if ($object['option'] == 'thumbnail_field') {
         if (preg_match('/(src=")(\S+)(")/', $vars['fields']['thumbnail_field']->content, $thumb_url)) {
+          $vars['fields']['thumbnail'] = new stdClass();
           $vars['fields']['thumbnail']->content = $thumb_url['2'];
         };
       }
       if ($object['option'] == 'slide_field') {
         if (preg_match('/(src=")(\S+)(")/', $vars['fields']['slide_field']->content, $slide_url)) {
+          $vars['fields']['slide'] = new stdClass();
           $vars['fields']['slide']->content = $slide_url['2'];
         }
       }