私はGitHubを通じてウェブサイトをホストしており、グラフィックデザインの作業を行っている新しいページを追加しました。ページはヘッダーと私の仕事の一部を含む石工ギャラリーから成っています。画像のサイズは1920x1080と800x800のものがほとんどです。メモ帳で自分のギャラリーを作成すると、画像をGitHubに送ってから、実際の大きさまで画像がぼんやりと見えるようになりました。私に何ができる？ありがとう。石工ギャラリーが機能しない
ギャラリー：https://kuebikoyt.github.io/portfolio.html
あなたはブラウザコンソールでUncaught TypeError: a.indexOf is not a functionを取得しています。私はそれを数回見ました。それはあなたが不適切に$.load()を使用しているからです。 $.load()は$.on('load')のショートカット/エイリアスでしたが、これ以上はありません。代わりに$(window).on('load', functionname)を使用してください。 ）ブラウザのコンソールで
$(function() {
function scaleGallery() {
// This is roughly the max pixels width/height of a square photo
var widthSetting = 400;
// Do not edit any of this unless you know what you're doing
var containerWidth = $(".gallery").width();
var ratioSumMax = containerWidth/widthSetting;
var imgs = $(".gallery img");
var numPhotos = imgs.length, ratioSum, ratio, photo, row, rowPadding, i = 0;
while (i < numPhotos) {
ratioSum = rowPadding = 0;
row = new Array();
while (i < numPhotos && ratioSum < ratioSumMax) {
photo = $(imgs[i]);
// reset width to original
photo.width("");
ratio = photo.width()/photo.height();
rowPadding += getHorizontalPadding(photo);
// if this is going to be first in the row, clear: left
if (ratioSum == 0) photo.css("clear", "left");
else photo.css("clear", "none");
ratioSum += ratio;
row.push(photo);
i++;
// if only 1 image left, squeeze it in
if (i == numPhotos - 1) ratioSumMax = 999;
}
unitWidth = (containerWidth - rowPadding)/ratioSum;
row.forEach(function(elem) {
elem.width(unitWidth * elem.width()/elem.height());
});
}
}
function getHorizontalPadding(elem) {
var padding = 0;
var left = elem.css("padding-left");
var right = elem.css("padding-right");
padding += parseInt(left ? left.replace("px", "") : 0);
padding += parseInt(right ? right.replace("px", "") : 0);
return padding;
}
$(window).on('load',scaleGallery);
$(window).on('resize',scaleGallery);
});<base href="https://kuebikoyt.github.io/portfolio.html">
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Responsive Photo Gallery</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-brand-centered" href="index.html">Kuebiko</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="#">Social</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</nav>
<div class="bgimg-1"><div class="text"><h1> <b>PORTFOLIO</b> </h1></div></div>
<div class="gallery">
<img src="RetroAvatar.png">
<img src="RetroTwitter.png">
<img src="englewood.png">
<img src="FloralLogo.png">
<img src="FloralBanner.png">
<img src="KuebikoLogoNewNew.png">
<img src="KuebikoNewNewNewBanner.png">
<img src="Kollorfull.png">
<img src="KuebikoLogo.png">
<img src="ios11.png">
<img src="OtherNewKuebikoBanner.png"> <img src="OtherNewKuebikoLogo.png"> <img src="SolarPanels.png"> <img src="KuebikoWallpaper.png"> <img src="KuebikoBannerNew.png"> <img src="top5tweaks.png"> <img src="PaintBanner.png"> <img src="Monochrome.png"> <img src="Wallpaper4.png"> <img src="Wallpaper2nd.png"> <img src="YoutubeLogo.png"> <img src="lol.png"> <img src="YoutubeBanner.png"> <img src="Wallpaper3.png"> <img src="Wallpaper1.png"> </div>
</body>
</html>
を見て、それは今のところ...必要はありませんが、あなたはまた、あなたの他のイベントに
$.on('resize')を使用する必要があります。あなたはjqueryを含んでいません。 –私はそれにセキュリティで保護されたプロトコルだけを含めました。私はGoogleのcdnのためにそれを変更し、私はまだ問題がある – Kuebiko
私はそれを整理して、Googleのcdnは、古いバージョンのcdnを見つけたので、ギャラリーで動作しないjqueryの最新バージョンを持っていた働く助けてくれてありがとう！ – Kuebiko