Javascript Loading of Multiple Instances of Plus Gallery

Supports loading of multiple instances of plusgallery with javascript. Still will not support multiple instances on the same page as that would require a major overhaul.
jermartin77 · Mar 1, 2013 · 857688a · 857688a
1 parent 8886ce4
commit 857688a
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 1 deletion.
diff --git a/css/plusgallery.css b/css/plusgallery.css
@@ -97,6 +97,7 @@ background-color: #38beea;
 	z-index: 1;
 	background-position: 50% 50%;
 	background-size: cover;
+	background-repeat: no-repeat;
 }
 
 

diff --git a/excessive-images.html b/excessive-images.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Plus Gallery | Single Album Example</title>
+  <link rel="stylesheet" href="css/plusgallery.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+		html,body {
+			height: 100%;
+		}
+
+		body {
+			margin: 0;
+			padding: 20px 0;
+			text-align:  center;
+		}
+
+	</style>
+  </head>
+<body>
+<div id="plusgallery" data-api-key="c07f724ab7ed6a1b01b799fe753c6d13" data-userid="42571435@N08" data-album-id="72157632874526139" data-limit="100" data-type="flickr"></div>
+   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+  <script>window.jQuery || document.write("<script src='js/jquery-1.7.2.min.js'>\x3C/script>")</script>
+  <script src="js/plusgallery.js"></script>
+  <script>
+  	$(function(){
+  		$('#plusgallery').plusGallery();
+  	})
+  </script>
+</body>
+</html>
diff --git a/google-multiple.html b/google-multiple.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Plus Gallery | Single Album Example</title>
+  <link rel="stylesheet" href="css/plusgallery.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+		html,body {
+			height: 100%;
+		}
+
+		body {
+			margin: 0;
+			padding: 20px 0;
+			text-align:  center;
+		}
+
+		#gallerywrapper {
+			margin: 30px 0;
+		}
+	</style>
+  </head>
+<body>
+
+<a href="#" onclick="loadGallery('5622137746033744737'); return false;">Gallery 1</a>
+<a href="#" onclick="loadGallery('5661352802951243441'); return false;">Gallery 2</a>
+<a href="#" onclick="loadGallery('5661509050622600817'); return false;">Gallery 3</a>
+<div id="gallerywrapper">
+</div>
+
+   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+  <script>window.jQuery || document.write("<script src='js/jquery-1.7.2.min.js'>\x3C/script>")</script>
+  <script src="js/plusgallery.js"></script>
+  <script>
+  	var loadGallery = function(id){
+  		$('#gallerywrapper').html('<div id="plusgallery" data-userid="jeremiahjmartin" data-type="google" data-album-id="' + id + '"></div>');
+  		$('#plusgallery').plusGallery();
+  	}
+  </script>
+</body>
+</html>
diff --git a/js/plusgallery.js b/js/plusgallery.js
@@ -79,6 +79,13 @@ SLIDEFADE
 
 				pg.winWidth = $(window).width();
 
+
+				//reset some shit in case there is another copy that was loaded.
+				$('#pgzoomview').remove();
+				//Unbind everything first? 
+				_doc.off("click", ".pgalbumlink, #pgthumbhome, .pgthumb, .pgzoomarrow, .pgzoomclose, #pgzoomview, #pgzoomslide, .pgzoomimg");
+
+
 				pg.getDataAttr();
 
 				pg.writeHTML();
@@ -90,6 +97,10 @@ SLIDEFADE
 					pg.loadAlbumData();
 				}
 
+
+
+
+
 				//attach loadGallery to the album links
 				_doc.on("click", ".pgalbumlink",function(e){
 					e.preventDefault();
@@ -157,6 +168,7 @@ SLIDEFADE
 				}
 				else {
 					alert('You must enter a valid User ID');
+					return false;
 				}
 
 				//Gallery Type *required
@@ -166,9 +178,9 @@ SLIDEFADE
 				}
 				else {
 					alert('You must enter a data type.');
+					return false;
 				}
 
-
 				//Limit on the amount photos per gallery
 				dataAttr = lmnt.attr('data-limit');
 				if(dataAttr) {