Mauerwerk Galerie funktioniert nicht

Ich hosting eine Website durch GitHub und ich habe gerade eine neue Seite hinzugefügt, wo ich einige Grafik-Design-Arbeit zeigen. Die Seite besteht aus einer Kopfzeile und einer gemauerten Galerie mit einigen meiner Arbeiten. Die Bilder variieren in der Größe meist 1920x1080 und 800x800. Als ich meine Galerie in Notepad erstellte, sah alles gut aus, sobald ich es an GitHub schickte, wurden die Bilder auf ihre tatsächliche Größe vergrößert. Was kann ich tun? Vielen Dank.Mauerwerk Galerie funktioniert nicht

Bilder: http://imgur.com/a/RH4y9

Galerie: https://kuebikoyt.github.io/portfolio.html

Quelle

2017-06-02 Kuebiko

Blick in Ihrem Browser-Konsole. Sie schließen jQuery nicht ein. –

Ich hatte es nur nicht mit einem sicheren Protokoll enthalten. Ich änderte es für die Google-CDN und ich habe immer noch das Problem – Kuebiko

Ich habe es aussortiert, die Google CDN hatte die neueste Version von Jquery, die nicht mit der Galerie arbeiten würde, so fand ich eine CDN für eine frühere Version und es begann arbeiten. Danke für die Hilfe! – Kuebiko

Sie Uncaught TypeError: a.indexOf is not a function im Browser-Konsole zu bekommen. Ich habe das ein paar Mal gesehen und es ist, weil Sie $.load() unsachgemäß verwenden. $.load() war früher eine Abkürzung/ein Alias für $.on('load'), ist aber nicht mehr. Verwenden Sie stattdessen $(window).on('load', functionname). Sie sollten auch $.on('resize') für ein anderes Ereignis verwenden, obwohl es nicht notwendig, ... jetzt ist;)

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

Quelle

2017-06-02 23:40:12

Mauerwerk Galerie funktioniert nicht

Antwort

Verwandte Themen