I have a grid image gallery for a collection of projects. By clicking each image, I want it to have a pop-up image slideshow that shows more images that are not in the gallery. So people can see more details about a particular project.
Is it possible to do that with hrml/css/javascript? I'm building it on Tumblr so functions are limited.
Below is the very basic html/css of the grid image gallery. How should I continue from that on?
div.gallery {
border: 20px solid #ccc;
}
div.gallery:hover {
border: 20px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_1.jpg">
<img src="iimg_1.jpg" alt="Cat" width="600" height="600">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_2.jpg">
<img src=""img_2.jpg"" alt="Forest" width="600" height="600">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_3.jpg"">
<img src="img_3.jpg" alt="Lights" width="600" height="600">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_4.jpg">
<img src="img_4.jpg" alt="Sea" width="600" height="600">
</a>
</div>
</div>
<div class="clearfix"></div>
if you want to open new gallery by clicking on a button/link you can write a JavaScript function which will display every element you want in the DOM.
So, on click add new element to HTML from JS and display provided elements.
Related
This question already has answers here:
When click on <li> I when display none div and display table one div
(2 answers)
Closed 2 months ago.
Load div into target from onclick using image nav. Then I want to hide divs that are not active. The 1st div should initially load when page loads. I have searched but can't find a solution.
// JavaScript Document
const mus = document.querySelector("#mus"),
albNav = mus.querySelector(".albnav img"),
/*hideAlbNav = mus.querySelector(""),*/
tunes = mus.querySelector("#tunes"),
gen0Nav = mus.querySelector("img #gen0"),
gen1Nav = mus.querySelector("img #gen1"),
gen0Tunes = mus.querySelector("#tunes .gen0"),
gen1Tunes = mus.querySelector("#tunes .gen1");
/*$(document).on('click', '.menu', function(){
$(this).addClass('active').siblings().removeClass('active')
});*/
tunes.style.display = 'none';
$("albNav").on('click', function() {
$(this).attr('.menu');
$('tunes').hide();
$('tunes').show();
});
<div id="mus">
<div class="albnav">
<img id="gen0" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen1" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen2" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen3" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen4" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen5" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
</div>
<div id="tunes">
<div class="gen0">Gen 0</div>
<div class="gen1">Gen 1</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="js/stQ-plrnav-12-14-22.js"></script> -->
isherwood DID NOT find the solution. The author mim did. isherwood Please stop editing my post just to save face. The original answer by the author mim is as follows:
No thanks to isherwood, who has deleted his comments..haha, I found the answer from Jakob # When click on <li> I when display none div and display table one div. Here is the solution:
$('.menu').on('click',function(){
$(".hidden[show-hide="+$(this).attr('id')+"]").show();
$(".hidden[show-hide!="+$(this).attr('id')+"]").hide();
});
.albnav {
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
width: 80%;
/*height: auto;*/
border-style:dashed;
border-color: #F431F0;
}
.menu {
position: relative;
width: 14.75%;
object-fit: cover;
max-width: 85px;
height: auto;
vertical-align: middle;
padding: 5px 0 5px 2px;
cursor: pointer;
}
.active, .albnav img:hover {
/*background: rgba(0, 0, 0, 0.8);*/
opacity: 0.8;
}
#tunes {
/*margin-top;: 100px;*/
margin-left: auto;
margin-right: auto;
padding: 5px 20px 5px;
border-style:dashed;
border-color: #EB1215;
}
.hidden:first-of-type {display:block}
.hidden {display:none}
<div class="albnav">
<img id="gen0" class="menu" src="genpx.png"/>
<img id="gen1" class="menu" src="genpx1.png"/>
<img id="gen2" class="menu" src="genpx2.png"/>
<img id="gen3" class="menu" src="genpx3.png"/>
<img id="gen4" class="menu" src="genpx.png"/>
</div>
<div id="tunes">
<div id="tun0" class="hidden" show-hide="gen0">Gen 0</div>
<div id="tun1" class="hidden" show-hide="gen1">Gen 1</div>
<div id="tun2" class="hidden" show-hide="gen2">Gen 2</div>
<div id="tun3" class="hidden" show-hide="gen3">Gen 3</div>
<div id="tun4" class="hidden" show-hide="gen4">Gen 4</div>
</div>
So I am designing a webpage, and I have three images aligned next to each other:
html :
<div id="imgs">
<img src="img/img_2.jpg" alt="">
<img src="img/img_1.jpg" alt="">
<img src="img/img_0.jpg" alt="">
</div>
css :
#imgs img {
width: 29%;
margin: 1.5%;
}
On desktop I want to keep the three images next to each other but when on mobile I want then into a slider.
A simple solution is to make two elements and display the first one if the width of the page is > 600px. Else you display the other.
<div id="imgs-flex">
<img src="img/img_2.jpg" alt="">
<img src="img/img_1.jpg" alt="">
<img src="img/img_0.jpg" alt="">
</div>
<div id="img-mobile">
<img src="img/img_2.jpg" alt="">
<img src="img/img_1.jpg" alt="">
<img src="img/img_0.jpg" alt="">
</div>
And then in the CSS :
#img-flex{
display: flex;
}
#img-mobile{
display: none;
}
/* You use Media Queries for the responsive */
#media screen and (max-width: 600px){
#img-mobile{
display: block;
}
#img-flex{
display: none;
}
}
And you add Javascript to do your slider.
Have you tried using display: flex; and a media query for with a min-max?
If the screen is smaller then 600px the three images are displayed one below the other. Larger than 600px are all images placed side by side.
I hope this is what you are searching for...
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 50%; /* for fullscreen take 100% */
}
}
<div class="row">
<div class="column">
<img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%;">
</div>
<div class="column">
<img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">
</div>
<div class="column">
<img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">
</div>
</div>
I have hundreds of html-based journal articles that contain html snippets like the example below to reference images:
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
<div class="long-desc" />
<a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
<div class="permissions">
<p class="copyright" />
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</a>
</div>
On document ready, using JavaScript and CSS3 how can I show the thumbnail image contained in the first 'a' tag, along with the contents of the 'long-desc' and 'permissions' divs beneath... and then when the thumbnail is clicked, open the image in the second (daughter) 'a' tag in a modal that fills the screen (and has a close button)?
Check this out. You can edit styles as you need for your purpose. It is just a sketch.
document.addEventListener('DOMContentLoaded', function() {
let thumbnail = document.querySelector('.thumbnail');
let close = document.querySelector('.modal-close');
let overlay = document.querySelector('.overlay');
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.add('visible')
});
close.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.remove('visible')
});
});
.thumbnail-image {
border: 3px solid #BBB;
border-radius: 4px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.overlay.visible{
display:block;
}
.modal-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.modal-image {
height: calc(100vh / 1.28);
width: 100vh;
margin: auto;
}
.modal-image>img {
max-width: 100%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border: 2px solid #444;
background: #bbb;
cursor: pointer;
}
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
<!-- named anchor -->
</a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="#" class="thumbnail">
<img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
</a>
<div class="long-desc">
<div class="permissions">
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</div>
<div class="overlay">
<div class="modal-wrapper">
<div class="modal-image">
<img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
</div>
<div class="modal-close">X</div>
</div>
</div>
</div>
Is it possible to convert this image grid into a gallery?
I've tried many times with no success.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
width: 100%;
}
.header {
text-align: center;
padding: 32px;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
.column img {
margin-top: 12px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media (max-width: 800px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media (max-width: 600px) {
.column {
width: 100%;
}
}
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="row">
<div class="column">
<img src="/w3images/wedding.jpg">
<img src="/w3images/rocks.jpg">
<img src="/w3images/falls2.jpg">
<img src="/w3images/paris.jpg">
<img src="/w3images/nature.jpg">
<img src="/w3images/mist.jpg">
<img src="/w3images/paris.jpg">
</div>
<div class="column">
<img src="/w3images/underwater.jpg">
<img src="/w3images/ocean.jpg">
<img src="/w3images/wedding.jpg">
<img src="/w3images/mountainskies.jpg">
<img src="/w3images/rocks.jpg">
<img src="/w3images/underwater.jpg">
</div>
<div class="column">
<img src="/w3images/wedding.jpg">
<img src="/w3images/rocks.jpg">
<img src="/w3images/falls2.jpg">
<img src="/w3images/paris.jpg">
<img src="/w3images/nature.jpg">
<img src="/w3images/mist.jpg">
<img src="/w3images/paris.jpg">
</div>
<div class="column">
<img src="/w3images/underwater.jpg">
<img src="/w3images/ocean.jpg">
<img src="/w3images/wedding.jpg">
<img src="/w3images/mountainskies.jpg">
<img src="/w3images/rocks.jpg">
<img src="/w3images/underwater.jpg">
</div>
</div>
I am working on building a website and below is my desired outcome.
Desired: http://i.stack.imgur.com/JI7tQ.png
Note: there is an image on the left making it 5 images in total.
However when I resize the broswer the grid-images stack together like so..
Actual: http://i.stack.imgur.com/tNSLP.png
Below is my code
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>RM</title>
<meta charset="utf-8"
<meta name= "viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/custom.css" >
</head>
<body>
<div class="container">
<div class="port">
<div id="vertical-title" class="column-1">
<img src="http://www.placehold.it/60x650" >
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive">
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive" >
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
</html>
CSS CODE
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
div#vertical-title{
display: block;
float: left;
margin-left:0%;
}
img.img-responsive {
display: inline;
max-width: 75%;
height: auto;
}
.column-1 {
display: inline;
max-width:5%;
}
.row-1 .container{
display : inline;
max-width: 95%;
}
img.row-1{
display:inline;
max-width:100%;
}
#media (min-width: 500px) {
div.test h1{
color:blue;
}
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
img.inline-div {
width : 25%;
}
}
Desired Behavior
I would like for the four images to keep their position relative to each other and shrink as the window gets smaller. In other words, I want the 2x2 grid to reduce in size and not become a 4*1 grid.
Also I would like the left most image to have the height equal to the height of the screen.
Note The images are responsive when they are stacked together.
Questions
What is the best way to achieve this behavior ?
My gut is screaming JavaScript.
I cleaned up your code with more reusable and responsive one.
Here's the JsFiddle demo link.
HTML
<div class="container">
<h3>Welcome</h3>
<div class="port">
<div id="vertical-title" class="col-left">
<img src="http://www.placehold.it/60x650" class="img-responsive" alt="" />
</div>
<div class="col-right">
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
CSS
h3 {
color: blue;
margin: 5px;
}
.row {
width: 100%;
}
.img-responsive {
width: 100%;
}
.col-left {
max-width: 60px;
float: left;
}
.col-right {
max-width: calc(100% - 60px);
float: left;
}
.col-half {
width: 49%;
margin-left: 4px;
float: left;
}
#media (max-width: 500px) {
.col-half {
width: 100%;
}
}
Hope it helps.
Do you need images to be stacked in iPhone? You can add a media query
#media only screen
and (min-device-width : 568px) { img.img-responsive {
max-width: 49%;
}}
So in iPhone it will stack up and in other it will display the desired effect
Thanks to #iam-decoder for this answer.
All I had to do was change img.img-responsive to
img.img-responsive {
display: inline;
max-width: 40%;
height: auto;
}
Thanks to all the took time to respond to my question. I am curious however how this is done in JS.