砌體畫廊不工作

我通過GitHub託管一個網站，我只是添加了一個新的頁面，我展示了一些平面設計工作。該頁面包含一個標題，然後是包含我的一些作品的砌體畫廊。圖像的大小最多爲1920x1080和800x800。當我在記事本中創建我的畫廊時，一旦我將它發送給GitHub，圖像就會被炸成實際大小。我能做什麼？謝謝。砌體畫廊不工作

圖片：http://imgur.com/a/RH4y9

畫廊：https://kuebikoyt.github.io/portfolio.html

來源

2017-06-02 Kuebiko

看在你的瀏覽器控制檯。你不包括jquery。 –

我把它包括在內只是沒有一個安全的協議。我改變了它的谷歌CDN，我仍然有問題 – Kuebiko

我得到它整理出來，谷歌CDN有最新版本的jquery這將無法與畫廊，所以我找到了一個早期版本的CDN，它開始上班。謝謝您的幫助！ – Kuebiko

你得到在瀏覽器控制檯Uncaught TypeError: a.indexOf is not a function。我已經看過幾次了，這是因爲你不正確地使用了$.load()。 $.load()曾經是$.on('load')的快捷/別名，但現在不再存在。因此改用$(window).on('load', functionname)。您還應該使用$.on('resize')您的其他事件，儘管它是沒有必要的...現在;）

$(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>

來源

2017-06-02 23:40:12

砌體畫廊不工作

回答

相關問題