I have created a Fadein/Fadeout slider. Left button and right button are working fine but I want to play slider by clicking on tab buttons.
JSfiddle
HTML
<p id="slide1_controls">
<div class="block-icon icon-s1">
<img class="block-img icon-s1" src="../_images/building_icon1.png" data-hover-image="../_images/building_icon1_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s2">
<img class="block-img icon-s2" src="../_images/building_icon2.png" data-hover-image="../_images/building_icon2_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s3">
<img class="block-img icon-s3" src="../_images/building_icon3.png" data-hover-image="../_images/building_icon3_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s4">
<img class="block-img icon-s4" src="../_images/building_icon4.png" data-hover-image="../_images/building_icon4_hover.png" data-selected="false" />
</div>
</p>
<div class="slider-text-context" id="target">
<div class="slide-01 fade-texts active">tab1</div>
<div class="slide-02 fade-texts">tab2</div>
<div class="slide-03 fade-texts">tab3</div>
<div class="slide-04 fade-texts">tab4</div>
</div>
CSS
.fade-texts {
width: 100%;
height: 259px;
left: 0px;
position: absolute;
}
.slider-btn-area {
position: absolute;
z-index: 8;
margin-left: auto;
margin-right: auto;
left: 25%;
top: 54%;
width: 50%;
}
#target > div {
display:none;
}
#target div:nth-child(1) {
display:block;
}
.tab-area {
position: absolute;
left: 25%;
top: 30%;
}
Javascript
$(".icon-s2").click(function() {
activeElem = $("#target .slide-02");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
$(".icon-s3").click(function() {
activeElem = $("#target .slide-03");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
When I press the tab it does not work to try to appear a DIV.
Your code made no sense. The way it looked was that the images had to be clicked in order to fadeIn/Out the tabs. I believe it should be the other way. I cleaned up the markup, and simplified the classes, ids, styles, etc...
Here's the DEMO
HTML
<div id="slides">
<div id="slide1" class="slide active">
<img class="img" src="http://placehold.it/150x50/000/Fff.png&text=FIRST" />
</div>
<div id="slide2" class="slide">
<img class="img" src="http://placehold.it/150X50/048/Fee.png&text=SECOND" />
</div>
<div id="slide3" class="slide">
<img class="img" src="http://placehold.it/150X50/fa8/375.png&text=THIRD" />
</div>
<div id="slide4" class="slide">
<img class="img" src="http://placehold.it/150X50/9a7/a10.png&text=FOURTH" />
</div>
</div>
<div class="tab-area" id="controls">
<div id="tab1" class="tab">1</div>
<div id="tab2" class="tab">2</div>
<div id="tab3" class="tab">3</div>
<div id="tab4" class="tab">4</div>
</div>
CSS
.slide {
display:none;
}
.active {
display: block;
}
.tab {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 10px;
outline: 1px solid black;
text-align: center;
cursor: pointer;
}
jQuery/JavaScript
$(function () {
$('.tab').on('click', function (event) {
var tabID = event.target.id;
//console.log('tabID: '+tabID);
var order = tabID.split('b').pop();
//console.log('order: '+order);
var pos = parseInt(order, 10);
var slideID = 'slide'+pos;
//console.log('slideID: '+slideID);
var act = document.getElementById(slideID);
//console.log('act: '+act.id);
$('.slide').fadeOut(0).removeClass('active');
$(act).addClass('active').fadeIn(750);
});
});
Related
I am currently working on a college project for a clothing website, so what I want is that when the user hovers over a product image on the main feed, the product image keeps changing between 3-4 images of that product with a few milliseconds of transition.
this is my HTML code
<div class="imagebox">
<img src="../img/Mom Sarees/5pcs/A93A5321.JPG" alt="Saree no: A93A5321 ">
</div>
this is the CSS
.imagebox{
display: inline-block;}
.imagebox img{
margin-top: 20px;
height: 400px;
margin-right: 10px;}
Is there a way to do that using CSS or JS?
I've implemented an example by JS, I hope this will be helpful.
let intervalId;
let i = 0;
document.querySelectorAll('.product-images').forEach((poroduct) => {
const productImages = poroduct.querySelectorAll('img');
poroduct.addEventListener('mouseenter', function() {
fadeImg(productImages);
intervalId = setInterval(() => fadeImg(productImages), 1500);
});
poroduct.addEventListener('mouseleave', function() {
clearInterval(intervalId);
productImages[i].classList.remove('active');
productImages[0].classList.add('active');
i = 0;
});
});
function fadeImg(productImages) {
productImages[i].classList.remove('active');
i = (i + 1) % 4;
productImages[i].classList.add('active');
}
.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
opacity: 0;
transition: opacity 500ms;
}
.imagebox img.active {
opacity: 1;
}
<div class="container">
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/550000/?text=Image1" />
<img src="https://fakeimg.pl/350x200/005500/?text=Image2" />
<img src="https://fakeimg.pl/350x200/000055/?text=Image3" />
<img src="https://fakeimg.pl/350x200/005555/?text=Image4" />
</a>
</div>
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/000000/?text=Image1" />
<img src="https://fakeimg.pl/350x200/faaa22/?text=Image2" />
<img src="https://fakeimg.pl/350x200/885500/?text=Image3" />
<img src="https://fakeimg.pl/350x200/f500aa/?text=Image4" />
</a>
</div>
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/0000ff/?text=Image1" />
<img src="https://fakeimg.pl/350x200/00ff00/?text=Image2" />
<img src="https://fakeimg.pl/350x200/ff0000/?text=Image3" />
<img src="https://fakeimg.pl/350x200/ffff00/?text=Image4" />
</a>
</div>
</div>
Hello,
I have a working navigation bar sliding out of the page when the user clicks on the menu icon. It shows up only on mobile version of the website.
When u want to close the bar, you click on "x" or outside the div, somewhere in the background.
When I click on a section name, the page refreshes and the navigation closes. The problem appears when I click on the current section. The page does not refresh, so you have to close the navigation manually.
I want my navigation bar to close everytime an user clicks a link. Do you have any idea how can I achieve that?
This is my website: https://www.poznanprzeprowadzki.pl
This is my html for this part:
<div id="menu-mobile" class="menu-mobile">
<div class="menu-mobile-close" onclick=closeNav()>
<p>x</p>
</div>
<div class="menu-mobile-header">
<img src="img/poznanprzeprowadzki_logo3.png" name="Poznań przeprowadzki logo" alt="Poznań przeprowadzki logo"></a>
<p class="lang" key="you-are-free-to-contact">Zapraszamy do kontaktu!</p>
</div>
<a href="index.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/Home_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="home">Strona główna</p>
</div>
</div></a>
<a href="about.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/About_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="about">O nas</p>
</div>
</div></a>
<a href="gallery.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Gallery_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="gallery">Galeria</p>
</div>
</div></a>
<a href="contact.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Contact_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="contact">Kontakt</p>
</div>
</div></a>
<a href="advices.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="15px" height="20px" src="img/Advices2_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="advices">Pomoc / Porady</p>
</div>
</div></a>
</div>
<div id="menu-mobile-background" class="menu-mobile-background" onclick=closeNav()>
</div>
This is my css for this part:
.menu-mobile {
display: block;
height: 100%;
width: 250px;
position: fixed;
z-index: 9999;
top: 0;
right: -255px;
background-color: rgba(100,100,100,1);
overflow-x: hidden;
transition: 0.4s;
}
.menu-mobile-close {
position: absolute;
top: 5px;
right: 10px;
transition: 0.05s;
}
.menu-mobile-background {
right: 0;
top: 0;
position: fixed;
overflow: hidden;
z-index: 9998;
width: 0px;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.menu-mobile-header {
min-width: 250px;
padding: 16px;
text-align: center;
background-color: white;
}
.menu-mobile-header p {
font-family: Open Sans;
font-size: 14px;
color: rgba(100,100,100,1);
padding: 2px;
font-weight: 500;
display: block;
white-space: nowrap;
}
.menu-mobile-header img {
margin: 0 auto;
height: 65px;
padding-bottom: 6px;
}
.menu-mobile-close p:hover {
color: rgba(240,240,240,1);
cursor: pointer;
}
.menu-mobile-close p {
font-family: Open Sans;
font-size: 18px;
color: rgba(100,100,100,1);
font-weight: 600;
display: block;
}
This is my JS for this part:
function openNav() {
document.getElementById("menu-mobile").style.right = "0px";
document.getElementById("menu-mobile-background").style.width = "100%";
}
function closeNav() {
document.getElementById("menu-mobile").style.right = "-255px";
document.getElementById("menu-mobile-background").style.width = "0px";
}
Here is a picture of my navigation bar:
Add this script in your js file:
$(document).ready(function() {
$('.menu-mobile a').click(function(e) {
e.preventDefault(); // if the link don't reload all the page
closeNav();
})
});
Another solution, if you want to wait something before redirect:
$(document).ready(function() {
$('.menu-mobile a').click(function(e) {
e.preventDefault(); // is required
closeNav();
setTimeout(() => {
const nextPage = e.currentTarget.href;
window.location.href = nextPage;
},1000) // set the time here in milliseconds
})
});
I have a few images displayed. First, they are all black grayscaled and I want to add effects so that when you hover over an image its grayscale becomes 0 and stays 0 until I hover over that image again.
I saw that a few people use javascript to add a class but I am not sure how to revert back to grayscale 100% after the first hover.
<div id="photos">
<div class="images">
<img src="/photographs/clouds.jpg" />
</div>
<div class="images">
<img src="/photographs/DogPrint.jpg" />
</div>
<div class="images">
<img src="/photographs/euro.jpg" />
</div>
<div class="images">
<img src="/photographs/FireHead.jpg" />
</div>
<div class="images">
<img src="/photographs/wasabi.jpg" />
</div>
<div class="images">
<img src="/photographs/sam.jpg" />
</div>
<div class="images">
<img src="/photographs/roli.jpg" />
</div>
</div>
img {
width: 100%;
filter: grayscale(100%);
border-radius: 2px;
transition: all 0.25s ease-in-out;
}
#photos {
columns: 5 200px;
column-gap: 1.5rem;
width: 90%;
margin-top: 200px;
margin-left: 200px;
}
I just added a little bit of Javascript to make it work, and even a transition.
JSFiddle - https://jsfiddle.net/8850s/oj5rcv8n/
HTML -
<div id="photos">
<div class="images">
<img src="/photographs/clouds.jpg" />
<div>
Text
</div>
</div>
<div class="images">
<img src="/photographs/DogPrint.jpg" />
<div>
Text
</div>
</div>
<div class="images">
<img src="/photographs/euro.jpg" />
<div>
Text
</div>
</div>
<div class="images">
<img src="/photographs/FireHead.jpg" />
<div>
Text
</div>
</div>
<div class="images">
<img src="/photographs/wasabi.jpg" />
<div>
Text
</div>
</div>
<div class="images">
<img src="/photographs/sam.jpg" />
<div>
Text
</div>
</div>
<div class="images">
<img src="/photographs/roli.jpg" />
<div>
Text
</div>
</div>
</div>
JS -
var images = document.querySelectorAll('#photos > .images > img')
for (var i = 0; i < images.length; i ++) {
images[i].style.transitionDuration = '0.1s'
images[i].nextElementSibling.style.transitionDuration = '0.1s'
images[i].nextElementSibling.style.opacity = '0'
images[i].addEventListener('mouseenter', function() {
if (this.style.filter === "grayscale(100%)") {
this.style.filter = "grayscale(0%)";
this.nextElementSibling.style.opacity = "0";
} else {
this.style.filter = "grayscale(100%)";
this.nextElementSibling.style.opacity = "1";
}
})
}
CSS -
img {
width: 100%;
filter: grayscale(100%);
border-radius: 2px;
transition: all 0.25s ease-in-out;
}
#photos {
columns: 5 200px;
column-gap: 1.5rem;
width: 90%;
margin-top: 200px;
margin-left: 200px;
}
You can attach a 'mouseover' event listener on each image element.
When this event is triggered you can just add or remove a className using element.classList.toggle('classname').
Live example
<body>
<div id="photos">
<div class="images">
<img
class="grayscale-image"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/500px-Image_created_with_a_mobile_phone.png"
/>
</div>
</div>
</body>
<script>
const imgs = document.getElementsByClassName("grayscale-image");
for (let i in imgs) {
const currentImg = imgs[i];
currentImg.addEventListener("mouseover", e => {
currentImg.classList.toggle("image-color");
});
}
</script>
img {
width: 100%;
filter: grayscale(100%);
border-radius: 2px;
transition: all 0.25s ease-in-out;
}
#photos {
columns: 5 200px;
column-gap: 1.5rem;
width: 90%;
margin-top: 200px;
}
.image-color {
filter: grayscale(0%);
}
I have panel content (not an accordian) setup to be hidden on page load. When a user clicks on one of the tabs, a "hidden" class is removed thus showing the panel content. Then I want to hide the content if the user clicks the tab for the open panel:
$('#section-navigation a').click(function (e) {
e.preventDefault()
if ($(this).closest("li").hasClass("active")) {
$('#section-navigation li.active').removeClass("active");
$(".tab-content").addClass("tab-content-hidden");
} else {
$(".tab-content").removeClass("tab-content-hidden");
$(this).tab('show');
}
});
This does show the panel content on first click, hide the panel content on second click of the same tab but it does not remove the "active" class from the panel content "li", and a third click on the same tab does nothing. Example here (coloured panels):
http://hawk.cloudlevel.me/
Fiddle: https://jsfiddle.net/uvvnpp0s/3/
How can I achieve my goal? I appreciate I might have gone about things in completely the wrong way, as I'm inexperienced with JS / jQuery.
Your custom tabs is conflicting with the bootstrap tabs implementation. Best would be have a custom tab implementation.
Here's a quick custom implementation - https://jsfiddle.net/nitincool4urchat/uvvnpp0s/9/
$("a[role=tab]").click(function() {
if ($(this).parent('li').hasClass('active')) {
$(this).parent('li').removeClass('active');
$(".tab-content").addClass('tab-content-hidden');
} else {
$("#section-navigation li").removeClass('active');
$(this).parent('li').addClass('active');
$(".tab-content").removeClass('tab-content-hidden');
$(".tab-content .tab-pane").hide(); //hide all
$($(this).attr('href')).show(); //show the selected one;
}
});
ul#section-navigation {
list-style-type: none;
padding: 0;
}
ul#section-navigation li {
position: relative;
float: left;
width: 25%;
padding-bottom: 15%;
overflow: hidden;
}
ul#section-navigation li > a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
border: 0;
color: #0e034f;
}
ul#section-navigation li > a,
ul#section-navigation li.active > a,
ul#section-navigation li a:hover,
ul#section-navigation li a:focus {
background: 0;
border: 0;
margin: 0;
outline: 0;
}
ul#section-navigation li > a h2 {
font-size: 24px;
margin-top: 1vw;
}
ul#section-navigation li > a p {
display: none;
}
ul#section-navigation li a div div {
position: absolute;
bottom: 0;
right: 0;
width: 15%;
}
ul#section-navigation li a div div:after {
content: "";
display: block;
padding-top: 100%;
}
ul#section-navigation li a div div div {
display: block;
width: 100%;
height: 100%;
}
ul#section-navigation li a div div div span {
display: block;
line-height: 100%;
color: #fff;
transition: 0.2s all;
font-size: 12vw;
}
ul#section-navigation li.active a div div span {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: 48% 48%;
}
.tab-content {
overflow: hidden;
max-height: 4000px;
transition: max-height .5s cubic-bezier(1, 0, .7, 1);
}
.tab-content .panel-padding {
padding-top: 2%;
}
.tab-content-close {
float: right;
font-size: 30px;
width: 30px;
text-align: center;
margin-left: 100%;
}
.learn-more-1,
.learn-more-2,
.learn-more-3,
.learn-more-4 {
overflow: hidden;
max-height: 4000px;
padding-top: 60px;
padding-bottom: 60px;
}
.tab-content-hidden,
.learn-more-hidden,
.bar-hidden {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
#link-learn-more-1,
#link-learn-more-2,
#link-learn-more-3,
#link-learn-more-4 {
position: relative;
top: -50px;
}
.learn-more .tab-content img {
width: 100%;
}
.panel-padding {
padding: 5%;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" role="tablist" id="section-navigation">
<li role="presentation" class="gradient-white">
<a href="#panel-1" aria-controls="panel-1" role="tab">
<h2>Apprenticeships</h2>
<p>Learn more about the great opportunities apprenticeships offer</p>
<div>
<div>
<div class="bkg-blue"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-pink">
<a href="#panel-2" aria-controls="panel-2" role="tab">
<h2>Management</h2>
<p>Developing the next generation of leaders and managers</p>
<div>
<div>
<div class="bkg-pink"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-yellow">
<a href="#panel-3" aria-controls="panel-3" role="tab">
<h2>FE Teacher Training</h2>
<p>Get qualified to train and teach in the FE sector</p>
<div>
<div>
<div class="bkg-yellow"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
<li role="presentation" class="gradient-green">
<a href="#panel-4" aria-controls="panel-4" role="tab">
<h2>Learning Zone</h2>
<p>e-Learning on demand 24/7</p>
<div>
<div>
<div class="bkg-green"><span class="icon-plus"></span>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content tab-content-hidden">
<div role="tabpanel" class="tab-pane fade in active" id="panel-1">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/apprenticeshipsbanner.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-blue"><span class="stat-number">95%</span><span class="stat-desc">of apprentices would recommend us</span>
</div>
<h2>Learn more about the great opportunities apprenticeships offer</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
Current vacancies
</div>
</div>
<span class="bar bkg-blue"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-2">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/managementsmall.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-pink"><span class="stat-number">88%</span><span class="stat-desc">increased employee satisfaction</span>
</div>
<h2>Developing the next generation of leaders and managers</h2>
<p>
<br />Enjoy progressive, flexible learning that improves prospects, boosts careers and brings immediate value to your organisation.</p>
Learn more
</div>
</div>
<span class="bar bkg-pink"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-3">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/tutortraining.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-yellow"><span class="stat-number">95%</span><span class="stat-desc">had a positive impact on their career</span>
</div>
<h2>Inspiring training for aspiring teachers and assessors</h2>
<p>
<br />Take advantage of our accredited Level 3 and 4 qualifications for those who want to get into teaching, external assessing or internal quality control for assessments. Flexible, relevant and giving you the practical skills you need, our
courses are designed to be easy to access, and help you take the next step in your career.</p>
Learn more
</div>
</div>
<span class="bar bkg-yellow"></span>
</div>
<div role="tabpanel" class="tab-pane fade in" id="panel-4">
<div class="row">
<div class="col-sm-6">
<img src="http://hawk.cloudlevel.me/images/uploads/1.png" class="img-responsive" title="" alt="" />
</div>
<div class="col-sm-6 panel-padding">
<div class="stat color-green"><span class="stat-number">93%</span><span class="stat-desc">would recommend to a friend</span>
</div>
<h2>Take the first steps towards being an outstanding apprentice</h2>
<p>
<br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p>
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I need some help to make the image fit inside the DIV Tag with provided height and width and should not stretch. As a few images are Landscape and a few are Portrait, I need to force them to fit into the DIV OR IMG Tag.
<div class="frame" style="">
<img id="photo" src="http://pocketlink.epocketlife.com/ImageRepository/images/events/ADEBAB1C-4FAF-4D65-A43D-A02978B76340/7adb104b-5140-45d9-a694-56cf5112917d.png">
</div>
This is one of the Examples I found, you may implement there.
http://jsbin.com/vikanovaya/edit?html,css,output
You will need to use some CSS position trickery to achieve what you want but hopefully one of these examples will do what you want.
Example 1 - A Single Image
In the example below, the image will grow or shrink when the image hits the edge of the container. If you resize the example horizontally or vertically it will never crop. (Try the fullscreen example for instance).
Requires: CSS Only
body {
margin: 0;
padding: 0;
font-family: "Segoe UI Light", "Helvetica Neue LT", "Helvetica Ultra LT", "Roboto", Arial, sans-serif;
}
.gallery {
background: rgba(0, 0, 0, 0.9);
border-radius: 10px;
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
overflow: hidden;
z-index: 2;
}
.gallery .imageWrapper {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.gallery .imageWrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
<div class="gallery isFullScreen">
<div class="imageWrapper">
<img src="http://via.placeholder.com/3500x1500" />
</div>
</div>
Example 2 - Thumbnails
In this example there are two images that don't conform to their containers aspect ratio. They are resized so that their longest edge hits the div first and then they are centered. All thumbnail containers should now be the same size and images that do not conform shrink to fit.
Requires: CSS Only
.galleryArea {
background: rgba(0,0,0,0.7);
padding: 10px;
overflow: hidden;
}
.galleryArea .imageWrapper {
position: relative;
width: 100px;
height: 100px;
float: left;
background: #fff;
}
.galleryArea .imagePosition {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
<div id="contentGallery" class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x100" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
Example 3 - Thumbnails that Stretch
In this example, the two images that do not conform to their containers aspect ratios are now stretched so that their shortest edge expands to fill the container and their longest edge overflows. This makes the end result a little neater but requires JavaScript to help things along.
Requires: CSS and JavaScript (jQuery)
$(window).on("load", function() {
orientateGalleryImages($("#contentGallery").children().children().children("img"));
});
function orientateGalleryImages(images) {
images.each(function() {
var thisImage = jQuery(this);
if(thisImage.height() > thisImage.width()) {
thisImage.addClass("portrait");
} else if(thisImage.width() > thisImage.height()) {
thisImage.addClass("landscape");
} else {
thisImage.addClass("square");
}
});
}
.galleryArea {
background: rgba(0,0,0,0.7);
padding: 10px;
display: flex;
}
.galleryArea .imageWrapper {
position: relative;
width: 10%;
padding-top: 10%;
overflow: hidden;
}
.galleryArea .imagePosition {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.galleryArea .imagePosition img.landscape {
max-height: 50%;
height: 50%;
left: -50%;
margin-left: 25%;
}
.galleryArea .imagePosition img.portrait {
max-width: 50%;
width: 50%;
}
.galleryArea .imagePosition img.square {
max-width: 50%;
max-height: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentGallery" class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x100" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>