Fixing the Fancybox redirection/disappearance

This was a problem for the images on the shop page. Every time a
 fancybox would open the original image would disappear and not
 come back. We think it may have been due to some javascript
 interference from the WooCommerce plugin.

diff --git a/js/app.js b/js/app.js
index e03715a..b814de8 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -19,27 +19,22 @@ $(document).ready(function () {
     });
 
     $(".woocommerce-LoopProduct-link").each(function() {
-        // This makes fancybox not work
-        //$(this).attr("href", "#");
-
-        // Fancybox works but <a> is display: none on image click
-        //$(this).attr("href", "");
-
-        // Not doing anything leaves the link active
-    });
-
-
-    $(".woocommerce-LoopProduct-link").on("click",function( event ) {
-        // Doing this makes fancybox not work
-        //event.preventDefault();
+        // Removing all the anchors from the products so that you won't
+        //  navigate away when clicking in one, allowing fancybox to display
+        $(this).attr("href", "");
     });
 
-
     $(".woocommerce-LoopProduct-link").fancybox({
         helpers: {
             overlay: {  locked: false,
                     },
              title: { type: 'inside'},
+        },
+        afterLoad: function(){
+            this.title = $(this.element).find('img').attr('alt');
+        },
+        afterClose: function() {
+            $(this.element).show();
         }
 
     });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 6a3ff6c..aa3e02b 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -10,27 +10,22 @@ $(document).ready(function () {
     });
 
     $(".woocommerce-LoopProduct-link").each(function() {
-        // This makes fancybox not work
-        //$(this).attr("href", "#");
-
-        // Fancybox works but <a> is display: none on image click
-        //$(this).attr("href", "");
-
-        // Not doing anything leaves the link active
-    });
-
-
-    $(".woocommerce-LoopProduct-link").on("click",function( event ) {
-        // Doing this makes fancybox not work
-        //event.preventDefault();
+        // Removing all the anchors from the products so that you won't
+        //  navigate away when clicking in one, allowing fancybox to display
+        $(this).attr("href", "");
     });
 
-
     $(".woocommerce-LoopProduct-link").fancybox({
         helpers: {
             overlay: {  locked: false,
                     },
              title: { type: 'inside'},
+        },
+        afterLoad: function(){
+            this.title = $(this.element).find('img').attr('alt');
+        },
+        afterClose: function() {
+            $(this.element).show();
         }
 
     });