Justify thumbs horizontally - javascript

Check this code below
HTML:
$(document).ready(function(){
var $this=$('<img src="http://dummyimage.com/150x150/444/fff" alt=""/>');
for (var i=0;i<=9;i++){
$("#thumbs").append($this.clone());
}
});
#thumbs {
width: 100%;
margin-top:90px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbs">
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
<img src="http://dummyimage.com/150x150/444/fff" alt=""/>
</div>
Anchor tags gets justified when added directly in html page but not gets justified when added from javascript.
Any suggestions? Don't forget to check this fiddle

If you don't support below IE10, you can use flexbox. It will definitely work. Check https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more information.
#thumbs{ display:flex; justify-content: space-between; }

Related

JS multiple class same function

I use js to load big image whent hover to list thumbnail ok. but don't work to multiple.
How to: hover .thumbs .item of boximg_01 or boximg_02 .... loading only image in boximg_1 or boximg_02 width one js function. multiple boximg_* loading img only of element.
Now when hover thumbs img of boximg_01 it run 2 big img on both boximg_01 & boximg_02
$(document).ready(function() {
$(".box-image .thumbs img").hover(function() {
var imgpath = $(this).attr("dir");
$(".box-image .image").html("<img src=" + imgpath + ">");
});
});
#image {
max-width: 348px;
margin: 0 auto;
float: left;
background: red;
}
#thumbs, .thumbs {
width: 100%;
margin: 0 auto;
display: flex;
float: left;
}
.thumbs .item {width: 100px; height: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/1/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/3/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
</div>
</div>
Use DOM navigation relative to this to find the related image.
$(document).ready(function() {
$(".box-image .thumbs img").hover(function() {
var imgpath = $(this).attr("dir");
$(this).closest(".box-image").find(".image").html("<img src=" + imgpath + ">");
});
});
#image {
max-width: 348px;
margin: 0 auto;
float: left;
background: red;
}
#thumbs, .thumbs {
width: 100%;
margin: 0 auto;
display: flex;
float: left;
}
.thumbs .item {width: 100px; height: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/1/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/3/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
</div>
</div>

How can I shrink images to fill screen size?

I have a website where I have made it so that the 4 pictures will be on the same line like this but on smaller devices one of the pictures goes down a line. Is their a workaround that makes them all on the same line?
This is the html:
<center>
<h1>Meet Our Officers!</h1>
<center>
<div class="main">
<figure>
<img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
<center><figcaption><h2>President</h2></figcaption></center>
</figure>
<figure>
<img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
<center><figcaption><h2>Vice President</h2></figcaption></center>
</figure>
<figure>
<img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
<center><figcaption><h2>Secertary</h2></figcaption></center>
</figure>
<figure>
<img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
<center><figcaption><h2>Treasurer</h2></figcaption></center>
</figure>
</div>
column
.main {
display:flex;
flex-direction: column;
}
line
.main {
display:flex;
}
Yes absolutely! You should set the width of the figures to width: 25%
So with your extracted html I would do:
.main {
display: flex;
}
.main figure {
width: 25%;
}

My image isn't scaling as I expect inside an image carousel when I change window size

I want my images in an image carousel to scale when I change the size of the window. If I add the following to the CSS,
.carousel-slide img {
display: block;
width: 100%;
}
then for some reason I think the browser is taking the div class="carousel-slide" as the parent of the img instead of the figure, and I get all 4 images displaying in the width of the figure. Or perhaps it is because I am using the CSS Grid? How do I fix this behaviour?
HTML:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<main>
<section id="image-carousel">
<button id="leftButton">
PREV
</button>
<div id="carousel">
<div class="carousel-slide">
<figure>
<img id="lastClone" src="image-4.jpg" alt="">
<br>
<figcaption>
figcap1
</figcaption>
</figure>
<figure>
<img src="image-1.jpg" alt="">
<br>
<figcaption>
figcap2
</figcaption>
</figure>
<figure>
<img src="image-4.jpg" alt="">
<br>
<figcaption>
figcap4
</figcaption>
</figure>
<figure>
<img id="firstClone" src="image-1.jpg" alt="">
<br>
<figcaption>
figcap5
</figcaption>
</figure>
</div>
</div>
<button id="rightButton">
NEXT
</button>
</section>
</main>
</body>
</html>
CSS:
#image-carousel{
display: grid;
grid-template-areas:
". leftButton carousel rightButton .";
grid-template-columns: 0.4fr 0.5fr 60vw 0.5fr 0.4fr;
grid-template-rows: auto;
}
#carousel{
grid-area: carousel;
overflow: hidden;
}
.carousel-slide{
display: flex;
width: 100%;
height: 550px;
}
.carousel-slide img{
z-index: 1;
/*width: 100%; this is treating carousel-slide as parent instead of figure? why?*/
}
.carousel-slide figure{
width: 100%;
}
#leftButton{
grid-area: leftButton;
z-index: 3;
}
#rightButton{
grid-area: rightButton;
z-index: 3;
}
#carousel figcaption{
background-color: rgba(15, 27, 27, 0.7);
text-align: center;
height: 50px;
width: auto;
position: relative;
bottom: 50px;
z-index: 2;
}

jQuery custom plugin changes applied to all instances

I have created this JavaScript function it works if I use it for 1 gallery but if I use it for 2 it changes the gallery in the first one, I know I'm close but can't quite seam to figure out this last bit, do I need to use .each function?
$.fn.holidayhomegallery = function() {
$('.photo-thumbnails .thumbnail').click(function() {
$('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
$('.big-photo img').attr('src', path);
});
return this
}
$('.photo-other').holidayhomegallery();
.gallery-photos {
float: left;
}
.gallery-photos .big-photo {
display: inline-block;
background-color: #ffffff;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
float: left;
}
.gallery-photos .big-photo img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
float: left;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
.gallery-photos .photo-thumbnails .thumbnail {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 31%;
cursor: pointer;
margin-left: 1%;
margin-bottom: 0%;
margin-top: 1%;
margin-right: 1%;
opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
opacity: 1;
background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail.last {
margin-bottom: 0px;
}
.gallery-photos .photo-thumbnails .thumbnail.thumbnail-inner {
height: 100%;
overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
You can make use of the container class. As the main container have a class, inside the event handler, get this element and use this to get the other elements associated(are children of this container) with this instance.
So, instead of global selectors
$('.big-photo img').attr('src', path);
which will select all the matching elements on the page, use descendant selector with find().
container.find('.big-photo img').attr('src', path)
Code:
$('.photo-thumbnails .thumbnail').click(function () {
// Get the main container of the gallery
var container = $(this).closest('.gallery-photos');
// Use that container to get elements inside it
container.find('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
// Use that container to get elements inside it
container.find('.big-photo img').attr('src', path);
});
$.fn.holidayhomegallery = function() {
$('.photo-thumbnails .thumbnail').click(function() {
var container = $(this).closest('.gallery-photos');
container.find('.photo-thumbnails .thumbnail').removeClass('current');
$(this).addClass('current');
var path = $(this).find('img').attr('src');
container.find('.big-photo img').attr('src', path);
});
return this;
};
$('.photo-other').holidayhomegallery();
.gallery-photos {
float: left;
}
.gallery-photos .big-photo {
display: inline-block;
background-color: #ffffff;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
float: left;
}
.gallery-photos .big-photo img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
float: left;
box-sizing: border-box;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
.gallery-photos .photo-thumbnails .thumbnail {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 31%;
cursor: pointer;
margin-left: 1%;
margin-bottom: 0%;
margin-top: 1%;
margin-right: 1%;
opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
opacity: 1;
background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail.last {
margin-bottom: 0px;
}
.gallery-photos .photo-thumbnails .thumbnail.thumbnail-inner {
height: 100%;
overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
<div class="gallery-photos">
<div class="big-photo">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
<div id="photo-abi" class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=1" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=2" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=3" alt="" />
</div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=4" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=5" alt="" />
</div>
</div>
<div class="thumbnail last ">
<div class="thumbnail-inner">
<img src="http://dummyimage.com/680x470/000000/fff&text=6" alt="" />
</div>
</div>
</div>
</div>
Suggestion:
$('.photo-thumbnails .thumbnail').click(function () {
// Cache this instance
var $this = $(this);
// Get the main container of the gallery
var container = $this.closest('.gallery-photos');
// Select only the thumbnail elements having current class
container.find('.photo-thumbnails .thumbnail.current').removeClass('current');
$this.addClass('current');
// Use that container to get elements inside it
container.find('.big-photo img').attr('src', $this.find('img').attr('src'));
});

Masonry places blocks with huge spaces between them

There is a huge problem with masonry: it makes some useless spaces between blocks. I already tried everything, but nothing helps it.I would really apreciate if someone could tell me how to resolve this problem. Check screenshot.Result
UPDATE: I figured out, that the problem starts with first figure "T-Shirts". Somehow, when I delete class width-1 from there everything fits as it's meant to be.
Why is it happening and how can I solve this problem? Any suggestions? I really can't delete that figure, there must be some way to fit it with other blocks. Please help.
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 230
});
// element argument can be a selector string
// for an individual element
var msnry = new Masonry( '.grid', {
// options
});
main
{
height: 630px;
margin-top: 40px;
margin-left: 18%;
width: 1500px;
}
figcaption
{
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
.grid-item
{
width: 230px;
height: 180px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
.height-1
{
height: 370px;
}
.width-1
{
width: 360px;
}
.width-2
{
width: 470px;
}
.height-2
{
width: 360px;
height: 370px;
}
.width-2 img
{
width: 470px;
height: 180px;
}
<main class="grid">
<figure class="grid-item height-1 width-1">
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure class="grid-item">
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure class="grid-item">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="grid-item width-2">
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure class="grid-item">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure class="grid-item height-1">
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure class="grid-item">
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure class="grid-item">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="grid-item width-1">
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure class="grid-item">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="grid-item">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="grid-item">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>
You're missing imagesLoaded.
example:
// init Masonry
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});

Categories