I recently launched a simple single page portfolio site via Google App Engine (NodeJS) and everything works fine except when you click on an image gallery. The images render slowly and come across as:
����tExifII*>F(i�N���0230���
That is just the 1st paragraph. It goes on and on. I reached out to Google and while extremely helpful they determined it was something with my javascript. Bummer. They recommended I post here and see if anyone else could see where I have gone wrong. I have reviewed the other App Engine image questions and I can't find one similar to mine. It's either python or something I have already tried.
My directory layout is:
- node_modules
- public -css -img -js -less -vendor
- app.js
- app.yaml
-
package.json
Here is my app.js:
'use strict'; req uire('@google-cloud/debug-agent').start(); var express = require('express'); var path = require('path'); var app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.all('/', function(req, res) { res.sendFile('index.html', { root: 'public'}); }); app.listen(8080, function () { console.log("I'm listening..."); })
Here is my app.yaml (side note...1st time coming across a yaml file so this could be it):
runtime: nodejs
env: flex
handlers:
- url: /css
static_dir: css
- url: /js
static_dir: js
- url: /img
static_dir: img
And here is the index.html for you minus everything but the header, the end of body scripts and the html where I have the gallery via a Bootstrap carousel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Catamaran:200|Cormorant" rel="stylesheet">
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/creative.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row no-gutter">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Some of My Work</h2>
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="portfolio-item gallery" style="padding-bottom: 30px">
<a href="img/portfolio/fullsize/entertainment/1.jpg" class="portfolio-box" data-toggle="modal" data-target=".bs-example-modal-lg">
<img src="img/portfolio/thumbnails/entertainment/1.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">Category</div>
<div class="project-name">Entertainment</div>
</div>
</div>
</a>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/1.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/2.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/3.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/4.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/5.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/6.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/7.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/8.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/entertainment/9.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item gallery" style="padding-bottom: 30px">
<a href="img/portfolio/fullsize/lifestyle/2.jpg" class="portfolio-box" data-toggle="modal" data-target=".bs-lifestyle-modal-lg">
<img src="img/portfolio/thumbnails/lifestyle/2.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">Category</div>
<div class="project-name">Lifestyle</div>
</div>
</div>
</a>
</div>
<div class="modal fade bs-lifestyle-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-lifestyle" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/1.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/2.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/3.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/4.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/5.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/6.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/7.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/8.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/9.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="img/portfolio/fullsize/lifestyle/10.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-lifestyle" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-lifestyle" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/creative.js"></script>
</body>
</html>
And lastly here is my creative.js:
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 50)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
// Offset for Main Navigation
$('#mainNav').affix({
offset: {
top: 100
}
})
// Initialize and Configure Scroll Reveal Animation
window.sr = ScrollReveal();
sr.reveal('.sr-icons', {
duration: 600,
scale: 0.3,
distance: '0px'
}, 200);
sr.reveal('.sr-button', {
duration: 1000,
delay: 200
});
sr.reveal('.sr-contact', {
duration: 600,
scale: 0.3,
distance: '0px'
}, 300);
})(jQuery);
The last last thing... there are no errors in the console to refer too. Thanks in advance for the help
via LANole
No comments:
Post a Comment