Hello and thanks in advance for the help. Here's a link to the site in question: caulfield.co/test/originals.html
I'm attempting to use Masonry to create a gallery on a Bootstrap 4 built site. When loading on local server, the masonry shows as desired, see image:
But when uploading the site to a shared hosting account, the images display incorrectly. See the first link here.
My html, css, and js is a slight customization of Masonry's original code:
HTML:
<section id="available">
<h1>Originals</h1>
<div class="line-separator-sm"></div>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item two-to-one">
<img src="images/available/1.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item three-to-two">
<img src="images/available/2.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item one-to-one">
<img src="images/available/3.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item four-to-five">
<img src="images/available/4.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item three-to-two">
<img src="images/available/5.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item one-to-two">
<img src="images/available/6.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item one-to-one">
<img src="images/available/7.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item three-to-two">
<img src="images/available/8.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item five-to-eight">
<img src="images/available/9.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item one-to-one">
<img src="images/available/10.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item two-to-three">
<img src="images/available/11.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item three-to-two">
<img src="images/available/12.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item one-to-one">
<img src="images/available/13.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item two-to-one">
<img src="images/available/14.jpg" width="100%" height="auto"/>
</div>
<div class="grid-item three-to-two">
<img src="images/available/15.jpg" width="100%" height="auto"/>
</div>
</div>
</section>
CSS:
/* ---- grid ---- */
.grid {
max-width: 1200px;
margin: 0 auto;
box-shadow:0px 0px 2px #888;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-sizer,
.grid-item {
width:20px;
}
.grid-item {
margin:5px;
}
.one-to-one { width: 150px; height: 150px; }
.one-to-two { width: 150px; height: 300px; }
.two-to-one { width: 300px; height: 150px; }
.two-to-three { width: 150px; height: 225px; }
.three-to-two { width: 225px; height: 150px; }
.three-to-five{ width: 150px; height: 250px; }
.five-to-three{ width: 250px; height: 150px; }
.four-to-five { width: 150px; height: 187.5px; }
.five-to-four { width: 187.5px; height: 150px; }
.five-to-eight{ width: 150px; height: 240px; }
.eight-to-five{ width: 240px; height: 150px; }
JS:
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
horizontalOrder: true,
fitWidth: true
});
Any ideas what I've done wrong?
The answer is simple. Thanks to #ksav I used the inspector to discover the 404 errors caused by an incorrect <script> paths. They were written as /js/... and correcting them to js/... did the trick. Thank you!
Related
I am using Isotope JS and I am trying to get an evenly spaced, proportional gallery layout but I am not sure what is wrong. My code isn't cooperating with isotope. I would be very grateful if someone could help me figure out what I am doing wrong.
I created a codepen if that would help as well: https://codepen.io/jaytb95/pen/vYxMGqP
$(document).ready(function() {
$grid = $('.grid').isotope({
filter: '*',
itemSelector: '.grid-item',
layoutMode: 'fitRows',
percentPosition: true
});
$filters = $('.list');
$filters.click(function() {
$value = $(this).attr('data-filter');
if ($value == 'all') {
$grid.isotope({ filter: '*' });
} else {
$grid.isotope({ filter: '.' + $value });
}
});
});
ul {
display: flex;
list-style: none;
justify-content: center;
margin-top: 25px;
}
ul > li {
margin-left: 15px;
cursor: pointer;
padding: 0.5rem 1rem;
background-color: crimson;
color: white;
font-family: 'Calibri',sans-serif;
}
.container {
max-width: 90%;
margin: 0 auto;
}
.grid {
columns: 4 25vh;
}
.grid-item img {
object-fit: cover;
width: 100%;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout#3.0.6/dist/isotope.pkgd.min.js"></script>
<ul>
<li class="list" data-filter="all">All</li>
<li class="list" data-filter="phone">Phone</li>
<li class="list" data-filter="camera">Camera</li>
<li class="list" data-filter="watch">Watch</li>
</ul>
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
</div>
</div>
You should initialize Isotope after all the images have loaded. This means that you also have to include the imagesLoaded library in your code.
Also, to make the images proportional and evenly spaced, set the width of each .grid-item class to 50%, set the width of each image to calc(100% - 0.25rem), and change the layout mode to masonry. Your "image gallery" should work just fine after this:
$(document).ready(function() {
$grid = $(".grid").imagesLoaded(function() {
$grid.isotope({
filter: "*",
itemSelector: ".grid-item",
layoutMode: "masonry",
percentPosition: true
});
});
$filters = $(".list");
$filters.click(function() {
$value = $(this).attr("data-filter");
if ($value == "all") {
$grid.imagesLoaded(function() {
$grid.isotope({ filter: "*" });
});
} else {
$grid.imagesLoaded(function() {
$grid.isotope({ filter: "." + $value });
});
}
});
});
ul {
display: flex;
list-style: none;
justify-content: center;
margin-top: 25px;
}
ul > li {
margin-left: 15px;
cursor: pointer;
padding: 0.5rem 1rem;
background-color: #dc143c; /* crimson */
color: #fff; /* white */
font-family: "Calibri", sans-serif;
}
.container {
max-width: 90%;
margin: 0 auto;
}
.grid {
columns: 4 25vw;
}
.grid-item {
width: 50%;
}
.grid-item img {
object-fit: cover;
-o-object-fit: cover;
width: calc(100% - 0.25rem);
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout#3.0.6/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded#4.1.4/imagesloaded.pkgd.min.js"></script>
<ul>
<li class="list" data-filter="all">All</li>
<li class="list" data-filter="phone">Phone</li>
<li class="list" data-filter="camera">Camera</li>
<li class="list" data-filter="watch">Watch</li>
</ul>
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="">
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="">
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="">
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="">
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="">
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="">
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="">
</div>
</div>
</div>
My thumbnail slider is working properly for image file. But now i have some video in my slider which will change on click of appropriate thumbnail. for image i am changing the src on thumbnail click. Is it possible to display video on thumbnail click , just doing some changes in my code. Below is my code.
<style>
/* -- thumbnails -- */
#thumbnails {
float:left;
width:120px;
overflow-y: auto;
.thumb {
padding:11px 8px;
cursor: pointer;
}
img {
border: 1px solid #DDD;
cursor: pointer;
width:90px;
height:60px;
}
.frame {
float: left;
padding: 2px;
border: 1px solid #CCC;
}
}
#slider {
#largeImage {
position: absolute;
width: 100%;
height: 100%;
}
}
</style>
<div class="row">
<div class="col-2" id="thumbnails">
<div class="thumb">
<div class="frame"><img src="https://thethemefoundry.com/wp-content/themes/ttf-reloaded/images/single-theme/video-thumbnail.png" /></div>
</div>
<div class="thumb">
<div class="frame"><img src="img/sim_imaging/header2.jpg" /></div>
</div>
<div class="thumb">
<div class="frame"><img src="img/sim_imaging/header3.jpg" /></div>
</div>
<div class="thumb">
<div class="frame"><img src="img/sim_imaging/header4.jpg" /></div>
</div>
<div class="thumb">
<div class="frame"><img src="img/sim_imaging/header5.jpg" /></div>
</div>
<div class="thumb">
<div class="frame"><img src="img/sim_imaging/header6.jpg" /></div>
</div>
</div>
<div class="col-10">
<img id="largeImage" src="https://thethemefoundry.com/wp-content/themes/ttf-reloaded/images/single-theme/video-thumbnail.png" class="img-fluid"/>
</div>
</div>
<script>
$('#thumbnails img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
});
</script>
This http://jsfiddle.net/b6jtwndd/ code is working well for video. find this solution in stackoverflow.
I add data-source within my img tag . and set the path of my video. and than did small changes in my function... now it's working for image and video as well.
$('#thumbnails img').click(function(){
video = '<iframe width="100%" height="515" src="'+ $(this).attr('data-video') +'"></iframe>';
if(this.hasAttribute('data-video'))
{
$('#largeImage').replaceWith(video);
}
else
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
});
I'm building an app using jquery mobile.
I want to vertically and horizontally center multiple images using grid, i want the images to be exactly in the center of the page. I'v tried everything but nothing really worked.
I want it exactly to look like whats in this pic:
Sample
and here is my code:
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
</div>
</div>
I would love if it can look exactly like the image attached.
Thank you.
You can scale the content div to take the device height:
$(document).on( "pagecontainershow", function(){
ScaleContentToDevice();
$(window).on("resize orientationchange", function(){
ScaleContentToDevice();
})
});
function ScaleContentToDevice(){
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
Then use some CSS on the grid to center everything within the scaled content:
<div id="GridWrapper">
<div class="ui-grid-a centeredGrid">
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
</div>
</div>
#GridWrapper{
position: relative;
height: 100%;
}
#GridWrapper .centeredGrid{
position: absolute;
width: 380px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
DEMO
You can try with flexbox properties.
.ui-block-a,.ui-block-b{
width: 30px;
height: 30px;
margin: 5px;
}
.ui-grid-a{
display: flex;
align-items: center;
min-height: 15em;
justify-content: center;
}
For further information about flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm trying to use Masonry, but it doesn't seem to work well. It leaves a lot of empty spaces. as you can see here
I already tried various other ways to implement Masonry, but this one leans the most to the result. Can someone help this rookie?
Here what I think is important of my HTML/ CSS/ JAVASCRIPT
<script src="masonry-docs/js/masonry.pkgd.min.js"></script>
<script type="text/javascript">// Javascript
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
// options
columnWidth: 33%,
itemSelector: '.grid-item'
});</script>
.grid-item{width: 33%;}
.grid-item--width2{width: 33%;}
.grid-item--width3{width: 33%;}
*{box-sizing:border-box;}
.box-sizing:border-box;
.grid:after {
content: '';
display: block;
clear: both;
}
.grid-item {
width: 33%;
float: left;
border: 5px solid #FFFFFF;
}
.grid-sizer,
.grid-item {
width: 33%;
}
<section id="werk">
<div class="container">
<div class="grid">
<div class="item">
<div id="masonry-grid">
<div class="grid-item">
<h3>Manifesta 10</h3>
<span class="category">huisstijl</span>
<img src="images/manifesta.jpg" alt="" />
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Deutsche Grammophon</h3>
<span class="category">platenhoezen</span>
<img src="images/GIF_1.gif" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width3">
<h3>Ghent Art Book Fair</h3>
<span class="category">poster</span>
<img src="images/boekposter.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item">
<h3>teaser masterproef</h3>
<span class="category">foto</span>
<img src="images/masterproef.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Mundaneum</h3>
<span class="category">publicatie</span>
<img src="images/Mundaneum.gif" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Your h3 Element has a margin, add this a the beginning of your CSS-Code:
h3 { margin: 0px; }
Your .grid-item has a border of 5px, change it in your CSS-Code:
.grid-item {
width: 33%;
float: left;
border: 0px solid #FFFFFF;
}
I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}