I want 3 thumbnails with equal height. If I first load the site the thumbnails are too small for the pictures and the text is behind the next row of thumbnails. The buttons are in the picture, if I reload the site they are all on same height and aligned.
why?
HTML:
<div class="row equalheight">
<div class="col-md-4 artikel">
<div class="thumbnail">
<img src="..." alt="">
<div class="caption">
<h3>Head</h3>
<p>Text</p><br><br>
<p>Click!</p>
</div>
</div>
</div>
<div class="col-md-4 artikel">
<div class="thumbnail">
<img src="..." alt="">
<div class="caption">
<h3>Head</h3>
<p>Text</p><br><br>
<p>Click!</p>
</div>
</div>
</div>
<div class="col-md-4 artikel">
<div class="thumbnail">
<img src="..." alt="">
<div class="caption">
<h3>Head</h3>
<p>Text</p><br><br>
<p>Click!</p>
</div>
</div>
</div>
<script src="../../style/js/jQuery.equalheights.min.js"></script>
<script>
if ($(window).width() > 960) {
$('.equalheight div').equalHeights();
}
</script>
CSS:
.button {
position: absolute;
bottom: 15px;
right: 30px;
}
.artikel {
margin-bottom: 25px;
}
Put your height equalizer code into $(window).load() or $(document).ready() block.
Loading of images lags from the rest of the html. Your equalizer starts working before the images have fully loaded.
$(window).load(function(){
if ($(window).width() > 960) {
$('.equalheight div').equalHeights();
}
});
or
$(document).ready(function(){
if ($(window).width() > 960) {
$('.equalheight div').equalHeights();
}
});
Related
I'm creating slider using flickity and what I'm trying to do is when slide is selected the background color of body change (each slide has a specific color.. the problem is (is-selected) class can't detected in JavaScript even though I clearly see it in console
html:
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="./img/1.jpeg" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="./img/2.jpeg" alt=""
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="./img/3.jpeg" alt="">
</div>
</div>
let cell = document.querySelectorAll(".carousel-cell");
cell.forEach((c) => {
// console.log(c.dataset.color);
if (c.classList.contains("is-selected")) {
document.body.style.backgroundColor = "red";
}
});
how can I solve this?
You might tweak Flickity itself like I do in the snippet below, or if you'd like to keep it clean, you want to use mutationObserver.
const selectFn = [
'var a = fizzyUIUtils;',
(Flickity.prototype.select + '').substring(16).replace(/}$/, ';'),
'document.body.style.backgroundColor = this.cells.find(c => c.element.classList.contains("is-selected")).element.dataset.color;'
].join('');
Flickity.prototype.select = new Function('t', 'e', 'i', selectFn);
.carousel {
height: 80vh;
width: 80vw;
margin: 10vh 0 0 10vw
}
.carousel-cell,
.pic {
height: 100%;
width: 100%;
}
.pic {
object-fit: contain
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="https://picsum.photos/id/21/400/300" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="https://picsum.photos/id/16/400/300" alt="">
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="https://picsum.photos/id/28/400/300" alt="">
</div>
</div>
I've built a lightbox for some photos and I have a row of thumbnails at the bottom so that you can easily jump to any picture instead of the ones directly before or after the current image.
I used to use WordPress and in one of the lightbox plugins, there was a feature where, if you had more images than the width of the page could show, they would go off of the page, but when you used the arrows to go to one of the images that were off the page the line of thumbnails would automatically slide over so that the current image's thumbnail was on screen.
Some of my code is below to give you a sense of what I'm working with.
HTML:
There's obviously a lot more since 3 images wouldn't run off the page, but this is for the general idea. The rest is more of the same.
<div class="row">
<!-- Images on the page itself -->
<div class="column">
<img src="image-1.png" style="width:100%" onclick="openModal();currentSlide(1)" class="photo-1">
</div>
<div class="column">
<img src="image-2" style="width:100%" onclick="openModal();currentSlide(2)" class="photo-2">
</div>
<div class="column">
<img src="image-3" style="width:100%" onclick="openModal();currentSlide(3)" class="photo-3">
</div>
<!-- Images in the lightbox -->
<div id="myModal" class="modal-container">
<div class="modal">
<span class="close cursor" id="handle" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="image-1" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="image-2" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="image-3" style="width:100%">
</div>
</div>
</div>
<!-- Arrows -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Thumbnails in the lightbox-->
<div class="column-inside-row">
<div class="column-inside">
<img class="demo cursor" src="image-1" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column-inside">
<img class="demo cursor" src="image-2.png" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column-inside">
<img class="demo cursor" src="image-3.png" style="width:100%" onclick="currentSlide(3)">
</div>
</div>
</div>
</div>
CSS:
There's obviously a lot more, but the only thing relevant here is what I have for the thumbnails. Otherwise, it's a classic lightbox setup.
.column-inside-row {
position: absolute;
bottom: 0;
display: flex;
width: 100%;
justify-content: center;
flex-wrap: nowrap;
z-index: 11;
}
.column-inside {
margin: 0px 2px;
}
.demo:hover {
transform: scale(105%);
transition: .3s ease-out;
}
The only JS I have right now is for things like openModal and closeModal, which are just classic lightbox toggles. Those are irrelevant here.
Let me know if there's more that I can include. I know there's no JS to work with but I don't know where to start. Thanks in advance.
Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below.
<section id="main">
<div class="inner">
<section>
<div class="box alt">
<div class="row 50% uniform">
<div class="4u"><span class="image fit"><img
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
</div>
</div>
</section>
</div>
</section>
Hover:
.image.fit >img:hover {
width: 1000px;
height: 1000px;
position: absolute;
}
The span elements should be completely removed and its classes placed on the image elements themselves.
Also, you have a nested section element that isn't doing anything for you.
Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:hover {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
I've taken Scott Marcus' answer and adapted to click, which was your original request.
The main diffence is the addition of a tags targeting elements on the page and using :target in the css.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:target {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<a href="#image1">
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image2">
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image3">
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
I am trying to get my images to fill in the available space like the example website
link view
how can i show my image without space and it will be come with different height.
it should like example website.
under you get my code .
Live demo my code
code language html5
<div class="blog_posts">
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_1" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="...." class="hg_t_2" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="...." class="hg_t_5" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="...." class="hg_t_3" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_4" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_2" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_1" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_4" alt="">
</div>
</div>
</div>
code language css
.blog_posts img {
width: 100%;
}
.blog_posts img.hg_t_1 {
height: 220px;
}
.blog_posts img.hg_t_2 {
height: 280px;
}
.blog_posts img.hg_t_3 {
height: 120px;
}
.blog_posts img.hg_t_4 {
height: 320px;
}
.blog_posts img.hg_t_5 {
height: 150px;
}
It's a bit hard to understand from your post but I think you're trying to get your images to fill in the available space like the example site you provided in the comments.
I don't think this is possible with pure HTML5/CSS, but there's a javascript library called Masonry which probably does what you're looking for.
Your HTML will look like this:
<main>
<img src="http://i.imgur.com/nQSRbvc.jpg" class="width33" alt="">
<!-- the rest of your images -->
</main>
The width33 class just sets the max-width of the image to 33%. This will allow the images to scale without changing the aspect ratio. And to initialize masonry just call it:
$('main').masonry({
itemSelector: 'img'
});
Here's a jsfiddle example with your images: https://jsfiddle.net/fujtjf7q/
If you set both the height and width you will distort the image.
Set just the width and they will maintain aspect ratio.
See this fiddle
.blog_posts img {
width: 100px;
}
I have a strange problem with Twitter Bootstrap Carousel. Please have a look at http://www.bettondesignwork.co.uk/cheapbeds4u/
At the moment there are three identical images. The first image loads OK but when the second image slides in the height of the containing div animates to 0px. As well as this an extra div is generated around the carousel .
Actual html:
<section id="top" class="container">
<div id="TopCarousel" class="moduletable carousel slide">
<div class="carousel-inner">
<div class="item">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</section>
Rendered HTML:
<section id="top" class="container">
<div style="margin: 0px 0px 20px; position: relative; overflow: hidden; height: 0px;">
<div id="TopCarousel" class="moduletable carousel slide" style="margin: -340px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
<div class="item active">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
</section>
Any help would be greatly appreciated. Thank you.
This is a problem with Joomla 3.0 and the Bootstrap carousel function. As pointed out in the comment above Mootools and jQuery run together by default on a J3 install.
The fix for me was to install and activate this plugin - http://extensions.joomla.org/extensions/core-enhancements/performance/mootools/15748
This fixes the problem for me as can be seen here:
http://www.littledonkey.net
Beware though that this disables mootools completely so somethings may stop working as expected...
Cheers,
Adam