Develop Reference

Gallery with bigger previews "in place"

My aim is to do a thumbnail gallery which will enlarge thumbnail in a new row after the thumbnail has been clicked [Edited for clarity]:
I am not sure how to do it properly (if there is a proper way). How would you conceptually approach this task?
Flexbox seems to be nice for the first part, but then add cell on calculated position by JS OR split the flexbox into two? And in every case redo everything completely in there was a resize?
A help would be also to know how this kind of gallery is called, because I was unable to find any info on Google. Thank you!

This is an example showing how a container could use display:flex; to show a number of div.item as pictures in a gallery.
Each of such div.item gets attached an handler for the click event, that will clone, populate and attach to dom the template defined to represent a preview.
The preview will show a bigger picture of the thumbnail clicked and some further details that the demo just limits to the item index number. Such bigger picture must be defined in the attribute data-original-image-url of the img thumbnail.
I was inspired to this question Gallery with bigger previews "in place" to craft the trick needed to determine the last item of a given row in a flex container.
Consider that the pictures url are fake here so the demo won't show any picture but just broken urls. I faked the size of items setting a arbitrary different width for each of them and setting the height fixed in a css class.
//Add click event handler to every div.item in any .gallery
let items = document.querySelectorAll('.gallery > div.item');
for(let item of items){
item.addEventListener('click', onItemClick);
}
/*
When an item gets clicked,
It shows a preview, bound to the item clicked, on the next line
*/
function onItemClick(event){
//the clicked item
//(currentTarget retrieves the item that had the listener not the actual element clicked)
//so in this case it will be always the div.item (never the picture itself)
clickedItem = event.currentTarget;
//determines the index (1 based) of the clicked item relative to its container
const itemIndex
= Array.from(clickedItem.parentElement.querySelectorAll('.item')).indexOf(clickedItem) + 1;
//removes all .preview elements inside the parent of the clicked item
clickedItem.parentElement.querySelectorAll('.preview').forEach( (o, i) => {
o.remove();
});
//retrieves the url for the bigger picture of the item clicked
let urlBiggerImage = clickedItem.querySelector('img').getAttribute('data-original-image-url');
//retrieves the last item in the row where the item clicked lays
let lastItemOfRow = getLastItemOfRow(clickedItem);
//retrieves the html template for the preview
const template = document.getElementById("template_preview");
//clones the template to prepare the node as a concrete preview for the current item
const preview = template.content.cloneNode(true);
//sets the img src of the preview using the value of this item.data[original-image-url]
preview.querySelector('img').src = urlBiggerImage;
//sets the description of the preview
preview.querySelector('.col:nth-child(2) p').innerText = `You selected the item n.${itemIndex}`;
//appends the preview item after the last item in the row where item clicked lays
lastItemOfRow.after( preview );
}
/*
Retrieves the last item in the row (of the flexbox container)
given an item determining the row to examine
Inspired by:
https://stackoverflow.com/questions/72096795/gallery-with-bigger-previews-in-place/72096982
*/
const getLastItemOfRow = (item) => {
const grid = item.parentElement;
const gridItems = Array.from(grid.querySelectorAll('.item'));
const itemIndex = gridItems.indexOf(item);
const baseOffset = item.offsetTop;
let breakIndex = gridItems.findIndex(item => item.offsetTop > baseOffset) -1;
breakIndex = (breakIndex < 0) ? itemIndex : breakIndex;
return gridItems[breakIndex];
}
.gallery{
display: flex;
flex-wrap: wrap;
gap: 10px 10px;
padding: 10px;
border: solid 1px gray;
/*Here you can define an arbitrary width for the container*/
width: 430px;
}
.item{
display: block;
height: 50px;
background: red;
color: white;
font-weight: 700;
cursor: pointer;
}
.item > img{
height: 50px;
}
.preview{
border: solid 1px black;
flex: 0 0 100%;
}
.preview > .col{
display: inline-block;
padding: 5px;
vertical-align: middle;
}
.bigger {
width: 200px;
height: 100px;
}
<template id="template_preview">
<div class="preview">
<div class="col">
<img class="bigger" src=""/>
</div>
<div class="col">
<p>You selected the picture n:</p>
</div>
</div>
</template>
<!-- You can have many .gallery container -->
<div class="gallery">
<!-- Each .item will count as an item with preview -->
<div class="item">
<img src="/img/1.jpg" title="1" style="width: 100px;" data-original-image-url="/img/bigger/1.jpg"/>
</div>
<div class="item">
<img src="/img/2.jpg" title="2" style="width: 70px;" data-original-image-url="/img/bigger/2.jpg"/>
</div>
<div class="item">
<img src="/img/3.jpg" title="3" style="width: 180px;" data-original-image-url="/img/bigger/3.jpg"/>
</div>
<div class="item">
<img src="/img/4.jpg" title="4" style="width: 220px;" data-original-image-url="/img/bigger/4.jpg"/>
</div>
<div class="item">
<img src="/img/5.jpg" title="5" style="width: 40px;" data-original-image-url="/img/bigger/5.jpg"/>
</div>
<div class="item">
<img src="/img/6.jpg" title="6" style="width: 80px;" data-original-image-url="/img/bigger/6.jpg"/>
</div>
<div class="item">
<img src="/img/7.jpg" title="7" style="width: 50px;" data-original-image-url="/img/bigger/7.jpg"/>
</div>
<div class="item">
<img src="/img/8.jpg" title="8" style="width: 50px;" data-original-image-url="/img/bigger/8.jpg"/>
</div>
<div class="item">
<img src="/img/9.jpg" title="9" style="width: 50px;" data-original-image-url="/img/bigger/9.jpg"/>
</div>
<div class="item">
<img src="/img/10.jpg" title="10" style="width: 50px;" data-original-image-url="/img/bigger/10.jpg"/>
</div>
<div class="item">
<img src="/img/11.jpg" title="11" style="width: 50px;" data-original-image-url="/img/bigger/11.jpg"/>
</div>
<div class="item">
<img src="/img/12.jpg" title="12" style="width: 50px;" data-original-image-url="/img/bigger/12.jpg"/>
</div>
<div class="item">
<img src="/img/13.jpg" title="13" style="width: 80px;" data-original-image-url="/img/bigger/13.jpg"/>
</div>
<div class="item">
<img src="/img/14.jpg" title="14" style="width: 150px;" data-original-image-url="/img/bigger/14.jpg"/>
</div>
</div>

Trying to get jQuery to change a different img src when clicked

I've got 2 seperate divs that change background img src when clicked which works fine, but I would like it to change the other image its present with. E.g. div 1 is pressed and becomes "open", if div2 is "open" it then becomes closed. My jQuery is rather limited and have it functioning where it can change the image, but need to figure out how to apply the "closed" class to images that haven't just been clicked. Ideally it would use the attr() so I can add more later.
jQuery
$(".box").on("click", function() {
// need to make this function select the other div.
if ($(this).hasClass("closed")) {
$(this).addClass("open").removeClass("closed");
} else {
$(this).addClass("closed").removeClass("open");
}
var id = $(this).attr("data-id");
$(this).toggleClass("open");
$(".hideDivs").hide();
$("#" + id).show();
});
.container {
width: 640px;
height: 450px;
background-color: #eee;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.text-primary {
font-size: 14px;
text-align: center;
margin-bottom: 5px;
}
.box {
cursor: pointer;
width: 90px;
height: 180px;
display:block;
margin:auto;
background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/closed_vo1pn2.png");
}
.open {
background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/open_ihcmuz.png");
}
.closed {
background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/closed_vo1pn2.png");
}
.hideDivs {
display: none;
}
.panel-body {
padding: 10px;
margin-top: 5px;
}
.title {
font-weight: bold;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="box" data-id="divId1">
</div>
</div>
<div class="col-xs-6">
<div class="box" data-id="divId2">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default hideDivs" id="divId1">
<div class="panel-body">
<span class="title">Practices for safe packaging of cooked foods</span>
<ul>
<li>Label and date all food.</li>
<li>Package high-risk food in small batches for refrigeration and return to refrigerated storage as soon as possible (within 20 minutes).</li>
<li>Store packaging products in a clean environment and protect from contamination.</li>
</ul>
</div>
</div>
<div class="panel panel-default hideDivs" id="divId2">
<div class="panel-body">
<span class="title">Practices for safe freezing of cooked foods</span>
<ul>
<li>When packaging food for freezing, cover or wrap, label and date (production and freezing date) all foods.</li>
<li>Freeze food in small quantities to ensure food is frozen quickly.</li>
<li>Do not overload freezer units and ensure air can circulate.</li>
<li>Do not freeze foods that have been cooked then refrigerated and reheated.</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Please check the jsfiddle and let me know if you are looking something like this.
https://jsfiddle.net/314sybno/2/
$(".box").on("click", function() {
var id = $(this).attr("data-id");
if( id === 'divId1') {
$('div[data-id="divId2"]').addClass('closed').removeClass('open');
} else {
$('div[data-id="divId1"]').addClass('closed').removeClass('open');
}
// need to make this function select the other div.
if ($(this).hasClass("closed")) {
$(this).addClass("open").removeClass("closed");
} else {
$(this).addClass("closed").removeClass("open");
}
$(".hideDivs").hide();
$("#" + id).show();
});

This might be a better approach:
$(".box").on("click", function() {
// Hide all detail divs
$(".hideDivs").hide();
if ($(this).is(".closed")) {
// Close other open boxes
$(".box.open").removeClass("open").addClass("closed");
// Open this box and show the corresponding details div
$(this).removeClass("closed").addClass("open");
var id = $(this).attr("data-id");
$("#" + id).show();
} else {
// Close this box
$(this).removeClass("open").addClass("closed");
}
});
Also, I would recommend changing your HTML to have your 'box' elements also have a 'closed' class, so you do not repeat/need the CSS background attribute on the 'box' class.
See it working on this fiddle

Toggle and untoggle three buttons

I have three buttons and I want to toggle between them. How can I add and remove the toggle and untoggle classes to have to toggle appropriately.
Right now, both buttons can be selected/toggled on. There should only be one button toggled at a time but I also want to be able to deselect/untoggle all of the buttons. So that I have
an option of not toggling the buttons on.
Here's the buttons in my view:
<div id="drawing">
<div style="margin-top: 12px; padding-left: 8px; margin-bottom: 8px">
<button class="small-button" onclick="Drawing.AngleClick()" data-val-btnname="Angle" style="width: 70px; height: 20px;"><span>#Culture.GetString("Angle")</span></button>
</div>
<div style="margin-top: 12px; padding-left: 8px;">
<button class="small-button" onclick="Drawing.PointClick()" data-val-btnname="Point" style="width: 70px; height: 20px;"><span style="font-size:10px !important">#Culture.GetString("Point")</span></button>
<button class="small-button" data-val-btnname="ClearAll" style="width: 70px;" onclick="Drawing.Delete()"><span>#Culture.GetString("ClearAll")</span></button>
</div>
</div>
Here's the js function so far for one of the buttons (I have the same if statement in my other button):
AngleClick: function () {
var button = $('body').find("button[data-val-btnname='Angle']");
if (button.hasClass('small-toggled-button')) {
button.removeClass('small-toggled-button').addClass('small-button');
} else {
button.removeClass('small-button').addClass('small-toggled-button');
}
}

This is an easy method for toggling buttons. Run the snippet to see it work. I simplified your HTML only for the sake of shortening the example--I'm not suggesting you change it.
$(document).ready(function() {
$("#drawing button").click(function(e) {
var isActive = $(this).hasClass('active');
$('.active').removeClass('active');
if (!isActive) {
$(this).addClass('active');
}
});
});
.active {
background: #555555;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="drawing">
<button class="small-button">Angle</button>
<button class="small-button">Point</button>
<button class="small-button">ClearAll</button>
</div>

Cannot display multiple instances of Java/CSS image gallery on single HTML page

JavaScript - I am aware that this is where I need to add something to enable multiple instances to run, however I really have no idea of how to code this correctly.
<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('#images_thumbnails a').click(function () {
var newImageSrc = $(this).attr('href');
$('#images_full img').attr({
'src': newImageSrc
});
return false;
});
</script>
CSS - This was simple enough
#images_full img,
#images_thumbnails img {
padding: 3px;
border: 1px solid #CCC;
}
#images_thumbnails img {
margin: 4px;
width: 40px;
height: 40px;
}
HTML - Finally the HTML elements
<div id="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div id="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set03.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set03.jpg" />
</a>
</div>
It works perfectly fine until I add a second instance on same HTML page, the second set just open in own window like they have almost by-passed the Java commands.

I'm going to take a stab in the dark and say that your problem is that you are just using ids (#) instead of classes (.) to represent your multiple photo galleries. If you want similar behavior among multiple "instances," your jQuery script should be acting upon a class instead of an id. For example:
http://jsbin.com/otiTOyU/1/edit?html,css,js,output
Script:
<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('.images_thumbnails a').click(function () {
var newImageSrc = $(this).attr('href');
// Traverse the DOM to change this's respective '.images_full img'
$(this).parent().prev().children().first().attr('src', newImageSrc);
return false;
});
</script>
CSS:
.images_full img,
.images_thumbnails img {
padding: 3px;
border: 1px solid #CCC;
}
.images_thumbnails img {
margin: 4px;
width: 40px;
height: 40px;
}
HTML:
<div id="gallery1">
<div class="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div class="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
</div>
</div>
<div id="gallery2">
<div class="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div class="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
</div>
</div>
There are different ways you could go about optimizing the code. However, I'll leave that to you as an exercise. Be sure to check out the link I gave near the beginning of my post for a live demo.

minimize maximize the div ? javascript or jquery which works for all the div

i want to give minimize and maximize facility to my div..for that i have written following code in my jsp page
<div id="widnow" style="width: auto;">
<div id="title_bar">
<button type="button" class="max" id="button">
<img id="max" src="<%=request.getContextPath()%>/img/Minimize.png" />
</button>
</div>
<div id="box" style="height:auto; width: auto;">
<span id="info3" style="display: none;"></span>
<div id="chart3" style="width:80%; height:300px;"></div>
</div>
</div>
following is my css
#widnow{
width:400px;
border: 1px solid #DCDCDC;
}
#button{
width: 25px;
height: 24px;
float:right;
cursor:pointer;
position:relative;
margin: 0px 0px 0px 0px;
}
#title_bar{
background-image: url("<%=request.getContextPath()%>/img/Header Background.png");
height: 25px;
width: auto;
border-bottom: 1px solid #DCDCDC;
}
following is my js
$("#button").click(function(){
var isclass = $(this).attr('class');
if (isclass == "max")
{
$("#max").attr("src","<%=request.getContextPath()%>/img/Minimize.png");
$(this).removeClass('max');
}
else{
$(this).addClass('max');
$("#max").attr("src","<%=request.getContextPath()%>/img/Maximize.png");
}
$("#box").slideToggle();
});
Its Working Well When there is one div i want to give this facility..but with one single java script function or with j-query how can i achieve this?i have many div in single page and all should have there individual maximize and minimize facility.so can anyone tell me how can change my java script that works with all div?

Reconstructing your code a bit:
function activateMaxMin(elemButton,elemMax,elemBox)
{
var isclass = elemButton.attr('class');
if (isclass == "max")
{
elemMax.attr("src","<%=request.getContextPath()%>/img/Minimize.png");
elemButton.removeClass('max');
}
else{
elemButton.addClass('max');
elemMax.attr("src","<%=request.getContextPath()%>/img/Maximize.png");
}
elemBox.slideToggle();
}
$("#button").click(function(){
activateMaxMin($(this),$("#max"),$("#box"));
});
In case there is another button like this, use:
$("#button1").click(function(){
activateMaxMin($(this),$("#max1"),$("#box1"));
});
Of course, it could have been done in more efficient way, but that would need rewriting your code entirely.

<div id="widnow" class='window' style="width: auto;">
<div id="title_bar" class='title_bar'>
<button type="button" class="maxMinButton" id="button">
<img id="max" src="<%=request.getContextPath()%>/img/Minimize.png" class='max'/>
</button>
</div>
<div id="box" style="height:auto; width: auto;" class='box'>
<span id="info3" style="display: none;"></span>
<div id="chart3" style="width:80%; height:300px;"></div>
</div>
</div>
//javascript function
function activateMaxMin(elemButton,elemMax,elemBox)
{
var isclass = elemButton.attr('class');
if (isclass == "max")
{
elemMax.attr("src","<%=request.getContextPath()%>/img/Minimize.png");
elemButton.removeClass('max');
}
else{
elemButton.addClass('max');
elemMax.attr("src","<%=request.getContextPath()%>/img/Maximize.png");
}
elemBox.slideToggle();
}
$(document).ready(function(){
$(".maxMinButton").click(function(){
var elemButton=$(this);
var maxMinWidnow=button.closes('.window');
var elemMax=$(".max:firs",maxMinWidnow);
var elemBox=$(".box:first",maxMinWidnow);
activateMaxMin(elemButton,elemMax,elemBox)
});
});
This is the best I could get without doing lots of modifications to your code. Notice the added classes in each div in html, that are necessary. Be careful during modification.

Just change id notation "#" to class selector "." like #max to .max
What browser does it would work only for first occurrence of the id and try to change the img id to class
Well in your case that is different i have created a fiddle see at that if that helps you:
http://jsfiddle.net/32e2V/
$(".button").click(function () {
$(this).closest('div').siblings(".box").slideToggle();
if ($(this).text() == "max") {
$(this).text('min');
} else {
$(this).text('max');
}
});