Jquery 自定义排序问题
Jquery custom sorting issue
我有一个页面在从 API 加载页面时加载照片。
** 编辑：这是带有页面的 CodePen，那里出现错误：http://codepen.io/nathan-anderson/pen/GqXbvK
最初加载页面时，我使用它来调用信息并使用 lightgallery 插件：
// ----------------------------------------------------------------//
// ---------------// Unsplash Photos //---------------//
// ----------------------------------------------------------------//
function displayPhotos(data) {
var photoData = '';
$.each(data, function (i, photo) {
photoData += '<a class="tile"' + 'data-sub-html="#' + photo.id + '"'+ 'data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' + photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' (aka:' + '<a target="_blank" href="' + photo.links.html + '">' + photo.user.username + ')</a>' + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes.' + ' You can download this photo if you wish, it has a free <a target="_blank" href="https://unsplash.com/license"> Do whatever you want </a> license. <a target="_blank" href="' + photo.links.download + '"><i class="fa fa-download" aria-hidden="true"></i> </a> </p>' + '</div>' + '</a>';
});
// Putitng into HTML
$('#photoBox').html(photoData);
//--------//
// Calling Lightbox
//--------//
$('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
} // End Displayphotos function
// Show popular photos on pageload
$.getJSON(unsplashAPI, popularPhotos, displayPhotos);
我有多个按钮用于显示不同顺序的照片。 API 根据 "order_by" 选项抓取不同的照片。
这是我用来显示不同部分的代码：
var popularPhotos = {
order_by: "popular",
format: "json"
};
var latestPhotos = {
order_by: "latest",
format: "json"
};
var oldestPhotos = {
order_by: "oldest",
format: "json"
};
// Button Click Changes
$('button').click(function () {
$('button').removeClass("active");
$(this).addClass("active");
}); // End button
// Show Popular Photos
$('#popular').click(function () {
$.getJSON(unsplashAPI, popularPhotos, displayPhotos);
}); // End button
// Show latest Photos
$('#latest').click(function () {
$.getJSON(unsplashAPI, latestPhotos, displayPhotos);
}); // End button
// Show oldest Photos
$('#oldest').click(function () {
$.getJSON(unsplashAPI, oldestPhotos, displayPhotos);
}); // End button
这确实会在单击按钮时加载新照片，但会破坏灯箱插件的功能。
有什么想法吗？还有其他人 运行 参与其中吗？
-- 谢谢
所以，原因是在没有正确销毁以前的侦听器的情况下附加 lightGallery 时库的一个已知问题：
在这种情况下，一个 soln 是一个简单的 destroy，然后在 displayPhotos 函数中重新初始化它。
只需在外部范围内声明一个变量 gallery，例如：var gallery;
然后更新 displayPhotos 函数重新初始化，如：
//destroy if existing
if(gallery) gallery.data('lightGallery').destroy(true);
//initialise the plugin
gallery = $('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
更新的 CodePen：http://codepen.io/alokrajiv/pen/pbOXmp
工作片段在这里：
// ----------------------------------------------------------------//
// ---------------// Variables //---------------//
// ----------------------------------------------------------------//
var unsplashAPI = "https://api.unsplash.com/users/nathananderson/photos/?client_id=1fc3cf0554dd08f8491af5cd37ac945bebde6b5032613d61419f2b92ddde1d9a&per_page=20";
var popularPhotos = {
order_by: "popular",
format: "json"
};
var latestPhotos = {
order_by: "latest",
format: "json"
};
var oldestPhotos = {
order_by: "oldest",
format: "json"
};
// ----------------------------------------------------------------//
// ---------------// Unsplash Photos //---------------//
// ----------------------------------------------------------------//
var gallery;
function displayPhotos(data) {
var photoData = '';
$.each(data, function(i, photo) {
photoData += '<a class="tile"' + 'data-sub-html="#' + photo.id + '"' + 'data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' + photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' (aka:' + '<a target="_blank" href="' + photo.links.html + '">' + photo.user.username + ')</a>' + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes.' + ' You can download this photo if you wish, it has a free <a target="_blank" href="https://unsplash.com/license"> Do whatever you want </a> license. <a target="_blank" href="' + photo.links.download + '"><i class="fa fa-download" aria-hidden="true"></i> </a> </p>' + '</div>' + '</a>';
});
// Putitng into HTML
$('#photoBox').html(photoData);
//-----------------------------------//
// ------- Calling Lightbox ------- //
//-----------------------------------//
if (gallery) gallery.data('lightGallery').destroy(true);
gallery = $('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
} // End Displayphotos function
// Show popular photos on pageload
$.getJSON(unsplashAPI, popularPhotos, displayPhotos);
// Button Click Changes
$('button').click(function() {
$('button').removeClass("active");
$(this).addClass("active");
}); // End button
// Show Popular Photos
$('#popular').click(function() {
$.getJSON(unsplashAPI, popularPhotos, displayPhotos);
}); // End button
// Show latest Photos
$('#latest').click(function() {
$.getJSON(unsplashAPI, latestPhotos, displayPhotos);
}); // End button
// Show oldest Photos
$('#oldest').click(function() {
$.getJSON(unsplashAPI, oldestPhotos, displayPhotos);
}); // End button
html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on July 25, 2016 */
@font-face {
font-family: 'courier_primeregular';
src: url("../fonts/courier_prime-webfont.woff2") format("woff2"), url("../fonts/courier_prime-webfont.woff") format("woff");
}
@font-face {
font-family: 'courier_primeitalic';
src: url("../fonts/courier_prime_italic-webfont.woff2") format("woff2"), url("../fonts/courier_prime_italic-webfont.woff") format("woff");
}
@font-face {
font-family: 'courier_primebold';
src: url("../fonts/courier_prime_bold-webfont.woff2") format("woff2"), url("../fonts/courier_prime_bold-webfont.woff") format("woff");
}
body,
.filter-box .filter:hover,
.filter-box .filter.active,
.lg-actions .lg-prev:after,
.lg-actions .lg-next:before {
font-family: 'courier_primeregular', sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
}
.filter-box .filter,
.photo-description span {
font-family: 'courier_primebold', sans-serif;
text-weight: 600;
}
header span {
font-family: 'courier_primeitalic', sans-serif;
}
html,
body {
margin: 0;
padding: 0;
}
a:hover {
cursor: pointer;
}
p {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
line-height: inherit;
font-weight: inherit;
margin-top: 0;
}
img {
vertical-align: middle;
}
figure {
margin: 0;
}
/* Global Layout Set-up */
* {
box-sizing: border-box;
}
.justify-end {
justify-content: flex-end;
}
.no-grow {
flex-grow: 0;
}
/* Because... Fun */
::selection {
background: #000000;
color: #FFFFFF;
}
/* Becuase I can't stand these */
*:focus {
outline: none;
}
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: #FFFFFF;
color: #000000;
}
#top,
#bottom,
#left,
#right {
background: #000000;
position: fixed;
}
#left,
#right {
top: 0;
bottom: 0;
width: 10px;
}
#left {
left: 0;
}
#right {
right: 0;
}
#top,
#bottom {
left: 0;
right: 0;
height: 10px;
}
#top {
top: 0;
}
#bottom {
bottom: 0;
}
a {
color: #000000;
}
.current a {
color: #000000;
text-decoration: underline;
}
header {
display: flex;
padding: 1.5em 1.5em 0 1.5em;
flex-direction: column;
}
header h1 {
color: #000000;
text-align: left;
font-size: 2em;
}
@media only screen and (min-width: 480px) {
header h1 {
margin-bottom: 0;
}
}
header span {
display: none;
}
@media only screen and (min-width: 480px) {
header span {
display: inline;
text-align: left;
}
}
@media only screen and (min-width: 480px) {
header {
padding: 2.5em 2.5em 1em 2.5em;
}
}
.filter-box {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
padding: 0 1.5em;
}
.filter-box .filter {
font-size: 1em;
background: #FFFFFF;
color: #000000;
border: 3.5px solid #000000;
padding: 0.35em 2.25em;
margin: 0.5em 0.5em;
cursor: pointer;
transition: background 0.2s;
}
.filter-box .filter:first-of-type {
padding: 0.35em 1.5em;
}
.filter-box .filter:hover {
color: #FFFFFF;
background: #000000;
cursor: pointer;
}
@media only screen and (min-width: 480px) {
.filter-box .filter {
margin: 1em 1em;
}
}
.filter-box .filter.active {
color: #FFFFFF;
background: #000000;
}
@media only screen and (min-width: 480px) {
.filter-box {
padding-left: 1.5em;
}
}
/* Edits for styles on lightgallery plugin */
.lg-backdrop {
background: rgba(0, 0, 0, 0.9);
}
.lg-outer .lg-img-wrap,
.lg-outer .lg-item {
max-width: 100%;
height: 100%;
}
.lg-outer .lg-img-wrap .lg-image,
.lg-outer .lg-item .lg-image {
max-width: 100%;
border: 10px solid #000000;
vertical-align: top;
margin-top: 10%;
}
@media only screen and (min-width: 480px) {
.lg-outer .lg-img-wrap .lg-image,
.lg-outer .lg-item .lg-image {
max-width: 850px;
margin-top: 0;
vertical-align: middle;
}
}
.lg-outer .lg-img-wrap .lg-item,
.lg-outer .lg-item .lg-item {
background: none;
}
.lg-actions .lg-next,
.lg-actions .lg-prev,
.lg-toolbar {
background: none;
}
.lg-actions .lg-prev:after {
content: 'Back';
right: -100px;
position: absolute;
top: 0;
color: #FFFFFF;
}
.lg-actions .lg-next:before {
content: 'Next';
left: -60px;
position: absolute;
top: 50%;
color: #FFFFFF;
}
@media (max-width: 1100px) {
.lg-actions .lg-next:before {
color: transparent;
}
}
@media (max-width: 1100px) {
.lg-actions .lg-prev:after {
color: transparent;
}
}
.lg-sub-html {
max-width: 850px;
margin: 0 auto 18.2% auto;
background: #FFFFFF;
color: #000000;
border: 10px solid #000000;
text-align: left;
padding-left: 1em;
}
.lg-sub-html p {
margin: 0;
font-size: 1em;
}
.lg-sub-html .photo-title {
margin-bottom: 0em;
font-size: 2em;
}
.lg-sub-html .photo-description {
padding: 1em 0;
line-height: 1.5;
}
@media (max-height: 1250px) {
.lg-sub-html {
margin-bottom: 0;
}
}
@media (min-width: 1250px) {
.lg-sub-html {
margin: 0 auto 5% auto;
}
}
/* Hide toolbar becuase I don't need these right now */
div.lg-toolbar.group {
display: none;
}
.content {
column-count: 1;
column-gap: 0;
padding: 0 2em;
padding-bottom: 2em;
}
.content .tile {
margin-top: 1em;
display: inline-block;
width: 100%;
background-color: #000000;
}
.content .tile:hover {
opacity: 0.9;
transition: all 0.2s ease-in-out;
}
.content .tile .photo {
width: 100%;
}
@media only screen and (min-width: 480px) {
.content {
padding-left: 2.5em;
padding-right: 2.5em;
column-count: 3;
column-gap: 1em;
}
}
.caption-box {
display: none;
}
.photo-description {
padding: 0.25em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://nathanworking.com/unsplash/lightgallery-all.min.js"></script>
<link href="http://nathanworking.com/unsplash/lightgallery.min.css" rel="stylesheet" />
<!-- Borders all the way around, all day everyday -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<header>
<h1> My Favorite Photos from Unsplash </h1>
<span> It just so happens they’re my photos, go figure ;) </span>
</header>
<div class="filter-box">
<button type="button" id="popular" class="filter active">popular</button>
<button type="button" id="latest" class="filter">latest</button>
<button type="button" id="oldest" class="filter">oldest</button>
</div>
<div class="content" id="photoBox"></div>
我有一个页面在从 API 加载页面时加载照片。
** 编辑：这是带有页面的 CodePen，那里出现错误：http://codepen.io/nathan-anderson/pen/GqXbvK
最初加载页面时，我使用它来调用信息并使用 lightgallery 插件：
// ----------------------------------------------------------------//
// ---------------// Unsplash Photos //---------------//
// ----------------------------------------------------------------//
function displayPhotos(data) {
var photoData = '';
$.each(data, function (i, photo) {
photoData += '<a class="tile"' + 'data-sub-html="#' + photo.id + '"'+ 'data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' + photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' (aka:' + '<a target="_blank" href="' + photo.links.html + '">' + photo.user.username + ')</a>' + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes.' + ' You can download this photo if you wish, it has a free <a target="_blank" href="https://unsplash.com/license"> Do whatever you want </a> license. <a target="_blank" href="' + photo.links.download + '"><i class="fa fa-download" aria-hidden="true"></i> </a> </p>' + '</div>' + '</a>';
});
// Putitng into HTML
$('#photoBox').html(photoData);
//--------//
// Calling Lightbox
//--------//
$('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
} // End Displayphotos function
// Show popular photos on pageload
$.getJSON(unsplashAPI, popularPhotos, displayPhotos);
我有多个按钮用于显示不同顺序的照片。 API 根据 "order_by" 选项抓取不同的照片。
这是我用来显示不同部分的代码：
var popularPhotos = {
order_by: "popular",
format: "json"
};
var latestPhotos = {
order_by: "latest",
format: "json"
};
var oldestPhotos = {
order_by: "oldest",
format: "json"
};
// Button Click Changes
$('button').click(function () {
$('button').removeClass("active");
$(this).addClass("active");
}); // End button
// Show Popular Photos
$('#popular').click(function () {
$.getJSON(unsplashAPI, popularPhotos, displayPhotos);
}); // End button
// Show latest Photos
$('#latest').click(function () {
$.getJSON(unsplashAPI, latestPhotos, displayPhotos);
}); // End button
// Show oldest Photos
$('#oldest').click(function () {
$.getJSON(unsplashAPI, oldestPhotos, displayPhotos);
}); // End button
这确实会在单击按钮时加载新照片，但会破坏灯箱插件的功能。
有什么想法吗？还有其他人 运行 参与其中吗？
-- 谢谢
所以，原因是在没有正确销毁以前的侦听器的情况下附加 lightGallery 时库的一个已知问题：
在这种情况下，一个 soln 是一个简单的 destroy，然后在 displayPhotos 函数中重新初始化它。
只需在外部范围内声明一个变量 gallery，例如：var gallery;
然后更新 displayPhotos 函数重新初始化，如：
//destroy if existing
if(gallery) gallery.data('lightGallery').destroy(true);
//initialise the plugin
gallery = $('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
更新的 CodePen：http://codepen.io/alokrajiv/pen/pbOXmp
工作片段在这里：
// ----------------------------------------------------------------//
// ---------------// Variables //---------------//
// ----------------------------------------------------------------//
var unsplashAPI = "https://api.unsplash.com/users/nathananderson/photos/?client_id=1fc3cf0554dd08f8491af5cd37ac945bebde6b5032613d61419f2b92ddde1d9a&per_page=20";
var popularPhotos = {
order_by: "popular",
format: "json"
};
var latestPhotos = {
order_by: "latest",
format: "json"
};
var oldestPhotos = {
order_by: "oldest",
format: "json"
};
// ----------------------------------------------------------------//
// ---------------// Unsplash Photos //---------------//
// ----------------------------------------------------------------//
var gallery;
function displayPhotos(data) {
var photoData = '';
$.each(data, function(i, photo) {
photoData += '<a class="tile"' + 'data-sub-html="#' + photo.id + '"' + 'data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' + photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' (aka:' + '<a target="_blank" href="' + photo.links.html + '">' + photo.user.username + ')</a>' + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes.' + ' You can download this photo if you wish, it has a free <a target="_blank" href="https://unsplash.com/license"> Do whatever you want </a> license. <a target="_blank" href="' + photo.links.download + '"><i class="fa fa-download" aria-hidden="true"></i> </a> </p>' + '</div>' + '</a>';
});
// Putitng into HTML
$('#photoBox').html(photoData);
//-----------------------------------//
// ------- Calling Lightbox ------- //
//-----------------------------------//
if (gallery) gallery.data('lightGallery').destroy(true);
gallery = $('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
} // End Displayphotos function
// Show popular photos on pageload
$.getJSON(unsplashAPI, popularPhotos, displayPhotos);
// Button Click Changes
$('button').click(function() {
$('button').removeClass("active");
$(this).addClass("active");
}); // End button
// Show Popular Photos
$('#popular').click(function() {
$.getJSON(unsplashAPI, popularPhotos, displayPhotos);
}); // End button
// Show latest Photos
$('#latest').click(function() {
$.getJSON(unsplashAPI, latestPhotos, displayPhotos);
}); // End button
// Show oldest Photos
$('#oldest').click(function() {
$.getJSON(unsplashAPI, oldestPhotos, displayPhotos);
}); // End button
html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on July 25, 2016 */
@font-face {
font-family: 'courier_primeregular';
src: url("../fonts/courier_prime-webfont.woff2") format("woff2"), url("../fonts/courier_prime-webfont.woff") format("woff");
}
@font-face {
font-family: 'courier_primeitalic';
src: url("../fonts/courier_prime_italic-webfont.woff2") format("woff2"), url("../fonts/courier_prime_italic-webfont.woff") format("woff");
}
@font-face {
font-family: 'courier_primebold';
src: url("../fonts/courier_prime_bold-webfont.woff2") format("woff2"), url("../fonts/courier_prime_bold-webfont.woff") format("woff");
}
body,
.filter-box .filter:hover,
.filter-box .filter.active,
.lg-actions .lg-prev:after,
.lg-actions .lg-next:before {
font-family: 'courier_primeregular', sans-serif;
font-weight: 400;
font-style: normal;
font-stretch: normal;
}
.filter-box .filter,
.photo-description span {
font-family: 'courier_primebold', sans-serif;
text-weight: 600;
}
header span {
font-family: 'courier_primeitalic', sans-serif;
}
html,
body {
margin: 0;
padding: 0;
}
a:hover {
cursor: pointer;
}
p {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
line-height: inherit;
font-weight: inherit;
margin-top: 0;
}
img {
vertical-align: middle;
}
figure {
margin: 0;
}
/* Global Layout Set-up */
* {
box-sizing: border-box;
}
.justify-end {
justify-content: flex-end;
}
.no-grow {
flex-grow: 0;
}
/* Because... Fun */
::selection {
background: #000000;
color: #FFFFFF;
}
/* Becuase I can't stand these */
*:focus {
outline: none;
}
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: #FFFFFF;
color: #000000;
}
#top,
#bottom,
#left,
#right {
background: #000000;
position: fixed;
}
#left,
#right {
top: 0;
bottom: 0;
width: 10px;
}
#left {
left: 0;
}
#right {
right: 0;
}
#top,
#bottom {
left: 0;
right: 0;
height: 10px;
}
#top {
top: 0;
}
#bottom {
bottom: 0;
}
a {
color: #000000;
}
.current a {
color: #000000;
text-decoration: underline;
}
header {
display: flex;
padding: 1.5em 1.5em 0 1.5em;
flex-direction: column;
}
header h1 {
color: #000000;
text-align: left;
font-size: 2em;
}
@media only screen and (min-width: 480px) {
header h1 {
margin-bottom: 0;
}
}
header span {
display: none;
}
@media only screen and (min-width: 480px) {
header span {
display: inline;
text-align: left;
}
}
@media only screen and (min-width: 480px) {
header {
padding: 2.5em 2.5em 1em 2.5em;
}
}
.filter-box {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
padding: 0 1.5em;
}
.filter-box .filter {
font-size: 1em;
background: #FFFFFF;
color: #000000;
border: 3.5px solid #000000;
padding: 0.35em 2.25em;
margin: 0.5em 0.5em;
cursor: pointer;
transition: background 0.2s;
}
.filter-box .filter:first-of-type {
padding: 0.35em 1.5em;
}
.filter-box .filter:hover {
color: #FFFFFF;
background: #000000;
cursor: pointer;
}
@media only screen and (min-width: 480px) {
.filter-box .filter {
margin: 1em 1em;
}
}
.filter-box .filter.active {
color: #FFFFFF;
background: #000000;
}
@media only screen and (min-width: 480px) {
.filter-box {
padding-left: 1.5em;
}
}
/* Edits for styles on lightgallery plugin */
.lg-backdrop {
background: rgba(0, 0, 0, 0.9);
}
.lg-outer .lg-img-wrap,
.lg-outer .lg-item {
max-width: 100%;
height: 100%;
}
.lg-outer .lg-img-wrap .lg-image,
.lg-outer .lg-item .lg-image {
max-width: 100%;
border: 10px solid #000000;
vertical-align: top;
margin-top: 10%;
}
@media only screen and (min-width: 480px) {
.lg-outer .lg-img-wrap .lg-image,
.lg-outer .lg-item .lg-image {
max-width: 850px;
margin-top: 0;
vertical-align: middle;
}
}
.lg-outer .lg-img-wrap .lg-item,
.lg-outer .lg-item .lg-item {
background: none;
}
.lg-actions .lg-next,
.lg-actions .lg-prev,
.lg-toolbar {
background: none;
}
.lg-actions .lg-prev:after {
content: 'Back';
right: -100px;
position: absolute;
top: 0;
color: #FFFFFF;
}
.lg-actions .lg-next:before {
content: 'Next';
left: -60px;
position: absolute;
top: 50%;
color: #FFFFFF;
}
@media (max-width: 1100px) {
.lg-actions .lg-next:before {
color: transparent;
}
}
@media (max-width: 1100px) {
.lg-actions .lg-prev:after {
color: transparent;
}
}
.lg-sub-html {
max-width: 850px;
margin: 0 auto 18.2% auto;
background: #FFFFFF;
color: #000000;
border: 10px solid #000000;
text-align: left;
padding-left: 1em;
}
.lg-sub-html p {
margin: 0;
font-size: 1em;
}
.lg-sub-html .photo-title {
margin-bottom: 0em;
font-size: 2em;
}
.lg-sub-html .photo-description {
padding: 1em 0;
line-height: 1.5;
}
@media (max-height: 1250px) {
.lg-sub-html {
margin-bottom: 0;
}
}
@media (min-width: 1250px) {
.lg-sub-html {
margin: 0 auto 5% auto;
}
}
/* Hide toolbar becuase I don't need these right now */
div.lg-toolbar.group {
display: none;
}
.content {
column-count: 1;
column-gap: 0;
padding: 0 2em;
padding-bottom: 2em;
}
.content .tile {
margin-top: 1em;
display: inline-block;
width: 100%;
background-color: #000000;
}
.content .tile:hover {
opacity: 0.9;
transition: all 0.2s ease-in-out;
}
.content .tile .photo {
width: 100%;
}
@media only screen and (min-width: 480px) {
.content {
padding-left: 2.5em;
padding-right: 2.5em;
column-count: 3;
column-gap: 1em;
}
}
.caption-box {
display: none;
}
.photo-description {
padding: 0.25em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://nathanworking.com/unsplash/lightgallery-all.min.js"></script>
<link href="http://nathanworking.com/unsplash/lightgallery.min.css" rel="stylesheet" />
<!-- Borders all the way around, all day everyday -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<header>
<h1> My Favorite Photos from Unsplash </h1>
<span> It just so happens they’re my photos, go figure ;) </span>
</header>
<div class="filter-box">
<button type="button" id="popular" class="filter active">popular</button>
<button type="button" id="latest" class="filter">latest</button>
<button type="button" id="oldest" class="filter">oldest</button>
</div>
<div class="content" id="photoBox"></div>