nate8684/gist:2401211

## gistfile1.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- =========== META =============================== -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<!-- =========== STYLES =============================== -->
	<link rel="stylesheet"  href="styles/jquery.mobile-1.0.1.css" />
	<link href="styles/slideshow.css" type="text/css" rel="stylesheet" />
	<link rel="stylesheet" media="all and (orientation:landscape)" href="styles/iphone-lan.css">
	<link type="text/css" rel="stylesheet" href="styles/iphone.css" />

<!-- =========== EXTERNAL SCRIPTS =============================== -->
	<script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script type="text/javascript" src="scripts/phonegap.js"></script>
	<script type="text/javascript" src="scripts/klass.min.js"></script>
	<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
	<script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>

</head>
<body class="bodyhome">
<!-- ========== PAGE 1 CONTENT ========================== -->
<div class="page-wrapper" id="home" data-role="page">
	<div data-role="content" class="content">

		<script type="text/javascript">
		// ---------- AJAX JSON CALL ----------------
			$.ajax({
				url: "http://www.lcbcchurch.com/mobileJSON/homeslideshow",
				dataType: "json",
				success:function(data){
				results(data);
			}
			});

			function results(data) {
				for(var i = 0; i<data.length;i++){
				// this will log all of the images url
				console.log(data[i].slideshow_image); // just access the part you want by it's name.
				// Adding the JSON to the HTML
				$("#slider").append("<a href='"+data[i].slideshow_image+"'></a>");
			}
				// Call the pics ready function
				picsReady();
			}
		    // ---------- FORM THE SLIDER ----------------
			function picsReady() {
			// Initial Load of slideshow
			(function(window, Util, PhotoSwipe){
				var
				currentPage = $('#home'),
				photoSwipeInstance = PhotoSwipe.attach(window.document.querySelectorAll('#slider a'),
				{
					target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
					loop: true,
					preventHide: true,
					autoStartSlideshow: true,
					captionAndToolbarHide: true,
					jQueryMobile: true,
					margin: 0,
				},
					currentPage.attr('id'));
					photoSwipeInstance.show(0);
					return true;
			}(window, window.Code.Util, window.Code.PhotoSwipe)); // function(window, util, PhotoSwipe)

		    // Reload of slideshow
		    (function(window, Util, PhotoSwipe){
				$('#home').live('pageshow', function(e){
				var
				currentPage = $('#home'),
				photoSwipeInstance = PhotoSwipe.attach(window.document.querySelectorAll('#slider a'),
				{
					target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
					loop: true,
					preventHide: true,
					autoStartSlideshow: true,
					captionAndToolbarHide: true,
					jQueryMobile: true,
					margin: 0,
				},
					currentPage.attr('id'));
					photoSwipeInstance.show(0);
					return true;
				}) // .live('pageshow')
					.live('pagehide', function(e){
					var
					currentPage = $('#home'),
					photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

					if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
						window.Code.PhotoSwipe.unsetActivateInstance(photoSwipeInstance);
						window.Code.PhotoSwipe.detatch(photoSwipeInstance);
					}
					return true;
				}); // .live('pagehide')
				}(window, window.Code.Util, window.Code.PhotoSwipe)); // function(window, util, PhotoSwipe
		     } // function picsReady()
		</script>

<script>
 $(document).ready(function() {
  // disable ajax nav
  $.mobile.ajaxLinksEnabled = false;
 });
</script>

	<div class="page-header">Welcome</div>

	<div id="PhotoSwipeTarget"></div>
	<div id="slider"></div>
	<p>
	LCBC is a group of people on a journey with Jesus. We don’t claim to have it all figured out and recognize that each of us is in a different spot on that journey. From those just exploring Jesus, to those starting to figure out how to walk with Him, to those fully engaged in that pursuit— everyone is welcome here!
	</p>
	</div> <!-- /content -->

<!-- ========== NAVIGATION ========================== -->
	<div data-role="footer" data-id="foo1" data-position="fixed"  class="navigation">
		<div data-role="navbar">
			<ul>
				<li><a href="index.html" class="ui-btn-active ui-state-persist" id="home" data-iconpos="top" data-icon="custom" data-transition="slide">Home</a></li>
				<li><a href="where.html" data-iconpos="top" data-icon="custom" id="where" data-transition="slide">Where</a></li>
				<li><a href="series.html" data-iconpos="top" data-icon="custom" id="series" data-transition="slide">Series</a></li>
				<li><a href="events.html" data-iconpos="top" data-icon="custom" id="events-icon" data-transition="slide">Events</a></li>
				<li><a href="more.html" data-iconpos="top" data-icon="custom" id="more" data-transition="slide">More</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /footer -->
</div> <!-- // .page-content -->
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<!-- =========== META =============================== -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<!-- =========== STYLES =============================== -->
	<link rel="stylesheet" href="styles/jquery.mobile-1.0.1.css" />
	<link href="styles/slideshow.css" type="text/css" rel="stylesheet" />
	<link rel="stylesheet" media="all and (orientation:landscape)" href="styles/iphone-lan.css">
	<link type="text/css" rel="stylesheet" href="styles/iphone.css" />

	<!-- =========== EXTERNAL SCRIPTS =============================== -->
	<script src="http://jquerymobile.com/test/js/jquery.js"></script>
	<script type="text/javascript" src="scripts/phonegap.js"></script>
	<script type="text/javascript" src="scripts/klass.min.js"></script>
	<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
	<script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>

	</head>
	<body class="bodyhome">
	<!-- ========== PAGE 1 CONTENT ========================== -->
	<div class="page-wrapper" id="home" data-role="page">
	<div data-role="content" class="content">

	<script type="text/javascript">
	// ---------- AJAX JSON CALL ----------------
	$.ajax({
	url: "http://www.lcbcchurch.com/mobileJSON/homeslideshow",
	dataType: "json",
	success:function(data){
	results(data);
	}
	});

	function results(data) {
	for(var i = 0; i<data.length;i++){
	// this will log all of the images url
	console.log(data[i].slideshow_image); // just access the part you want by it's name.
	// Adding the JSON to the HTML
	$("#slider").append("<a href='"+data[i].slideshow_image+"'></a>");
	}
	// Call the pics ready function
	picsReady();
	}
	// ---------- FORM THE SLIDER ----------------
	function picsReady() {
	// Initial Load of slideshow
	(function(window, Util, PhotoSwipe){
	var
	currentPage = $('#home'),
	photoSwipeInstance = PhotoSwipe.attach(window.document.querySelectorAll('#slider a'),
	{
	target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
	loop: true,
	preventHide: true,
	autoStartSlideshow: true,
	captionAndToolbarHide: true,
	jQueryMobile: true,
	margin: 0,
	},
	currentPage.attr('id'));
	photoSwipeInstance.show(0);
	return true;
	}(window, window.Code.Util, window.Code.PhotoSwipe)); // function(window, util, PhotoSwipe)

	// Reload of slideshow
	(function(window, Util, PhotoSwipe){
	$('#home').live('pageshow', function(e){
	var
	currentPage = $('#home'),
	photoSwipeInstance = PhotoSwipe.attach(window.document.querySelectorAll('#slider a'),
	{
	target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
	loop: true,
	preventHide: true,
	autoStartSlideshow: true,
	captionAndToolbarHide: true,
	jQueryMobile: true,
	margin: 0,
	},
	currentPage.attr('id'));
	photoSwipeInstance.show(0);
	return true;
	}) // .live('pageshow')
	.live('pagehide', function(e){
	var
	currentPage = $('#home'),
	photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

	if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
	window.Code.PhotoSwipe.unsetActivateInstance(photoSwipeInstance);
	window.Code.PhotoSwipe.detatch(photoSwipeInstance);
	}
	return true;
	}); // .live('pagehide')
	}(window, window.Code.Util, window.Code.PhotoSwipe)); // function(window, util, PhotoSwipe
	} // function picsReady()
	</script>

	<script>
	$(document).ready(function() {
	// disable ajax nav
	$.mobile.ajaxLinksEnabled = false;
	});
	</script>

	<div class="page-header">Welcome</div>

	<div id="PhotoSwipeTarget"></div>
	<div id="slider"></div>
	<p>
	LCBC is a group of people on a journey with Jesus. We don’t claim to have it all figured out and recognize that each of us is in a different spot on that journey. From those just exploring Jesus, to those starting to figure out how to walk with Him, to those fully engaged in that pursuit— everyone is welcome here!
	</p>
	</div> <!-- /content -->

	<!-- ========== NAVIGATION ========================== -->
	<div data-role="footer" data-id="foo1" data-position="fixed" class="navigation">
	<div data-role="navbar">
	<ul>
	<li><a href="index.html" class="ui-btn-active ui-state-persist" id="home" data-iconpos="top" data-icon="custom" data-transition="slide">Home</a></li>
	<li><a href="where.html" data-iconpos="top" data-icon="custom" id="where" data-transition="slide">Where</a></li>
	<li><a href="series.html" data-iconpos="top" data-icon="custom" id="series" data-transition="slide">Series</a></li>
	<li><a href="events.html" data-iconpos="top" data-icon="custom" id="events-icon" data-transition="slide">Events</a></li>
	<li><a href="more.html" data-iconpos="top" data-icon="custom" id="more" data-transition="slide">More</a></li>
	</ul>
	</div><!-- /navbar -->
	</div><!-- /footer -->
	</div> <!-- // .page-content -->
	</body>
	</html>