We Keep Coding

How can I make <img> tag show a full size image when clicked, while href of that tag can change?

I'm trying to create a gallery with a main image and smaller images below,by clicking on the main image it should open it in a new window, and if you click smaller one, it should change the main image to that you cliked and it also change href, so in the end, main image is dynamicly changing href and src attributes.
Below you could see how I try to do this, it's working, but when i press smaller images, they not only change the main one, but also opens in the new window. What should I do, so only main image could open new window?
function transitSrc(imgs) {
// Get the expanded image
var expandImg = document.getElementById("expandedImg");
// Use the same src in the expanded image as the image being clicked on from the grid
expandImg.src = imgs.src;
//Get the href of expanded image
var fullImage = document.getElementById("viewFullImg");
//Use the same href in the expanded image as the image being clicked on from the grid
fullImage.href = imgs.href;
// Show the container element (hidden with CSS)
expandImg.parentElement.style.display = "block";
}
.product-gallery {
list-style: none;
padding: 0;
width: 100%;
margin: 10px 0 0;
}
.product-gallery li {
display: inline-block;
width: 15%;
margin: 0 5px;
}
.product-gallery li:first-child {
margin-left: 0;
}
<div class="container">
<div class="row">
<div class="col-sm-6 mb-sm-40">
<div class="gallery">
//main image
<a id="viewFullImg" href="https://picsum.photos/id/1060/536/354?blur=2">
<img id="expandedImg" src="https://picsum.photos/id/1060/536/354?blur=2" style="width:50%">
</a>
</div>
//smaller images
<ul class="product-gallery">
<li>
<img style="width:80%" src="https://picsum.photos/id/870/536/354?grayscale&blur=2" onclick="transitSrc(this);">
</li>
<li>
<img style="width:80%" src="https://picsum.photos/id/1060/536/354?blur=2" onclick="transitSrc(this);">
</li>
<li>
<img style="width:80%" src="https://picsum.photos/id/870/536/354?grayscale&blur=2" onclick="transitSrc(this);">
</li>
</ul>
</div>
</div>
</div>

To obtain your desired behavior, you could use one of two approach:
Remove the a tag
Keep the tag and prevent its default behavior
The first method it's pretty straight forward, while, to prevent the a tag to do the redirect, you could override onClick preventing its default behavior:
function prevent(event) {
event.preventDefault();
}
Press here

get some div text block to show when a plus button is clicked

I am working on a wordpress costing form but really struggling with the responsive view as ive used text descriptions to explain the products. Is it possible that you know some code where i can put a plus button next to the title of the products. When i press the plus button the small description will show underneath the title.There are multiple products with title and small description. I have done two screenshots to show what i mean How it looks with small description https://pasteboard.co/xNRq4SCqcYpp.png. How i need it to look https://pasteboard.co/20OrgDInhwWa.png.
I presume it would be an if statement to say if lfb_itemBloc contains lfb_itemDes display none and generate a plus icon and only display lfb_itemDes when plus button is clicked.
The code in question is below
<div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture">
<div data-imagetype="" data-urlvariable="1" data-sentattribute="price" data- variablename="" data-shadowfx="0" data-html="true" class="lfb_selectable" >
<img data-no-lazy="1" data-tint="false" src="https://testing.secureyourticket.com/wp-content/plugins/WP_Estimation_Form/assets/img/placeholder.png" alt="" class="lfb_selectableImg img .png">
<span class="fas fa-times icon_select"></span>
</div>
<p class="lfb_imgTitle ">Google Analytics</p><p class="lfb_itemDes " style="
">Set up Google analytics on your site and install tracking codes/tags as needed to view visitors/sessions and site engagement.</p>
</div>
Thanks in advance

Not so complicated. Among many different ways you may do a variant of the following.
var elmt = document.querySelector(".stg"),
desc = document.querySelector(".desc");
elmt.addEventListener("click", e => desc.style.display = desc.style.display === "block" ? "none" : "block");
.stg {
pointer-events: none;
}
.stg:after {
content: " +";
pointer-events: all;
}
.desc{
content: "Some Description";
display: none;
font-size: 0.67em;
}
<div class="stg">Some context</div>
<div class="desc">Description on the topic</div>

It's pretty straightforward. Assuming the HTML will get written first and you need to do all this after the fact - first insert the icon, then apply a click action. On that we can find the related description through .closest() and .find(). Then you can also toggle the font-awesome icon as well.
let insertExpand = `<span class="fa fa-plus expand-icon"></span>`;
jQuery(function($) {
$('.lfb_itemDes').each(function() {
if ($(this).text().trim() !== '') {
$(insertExpand).insertBefore($(this).closest('.lfb_item').find('.lfb_imgTitle'));
}
})
$('.expand-icon').click(function() {
$(this).closest('.lfb_item').find('.lfb_itemDes').toggle();
if ($(this).hasClass('fa-plus')) $(this).removeClass('fa-plus').addClass('fa-minus');
else $(this).removeClass('fa-minus').addClass('fa-plus');
})
})
.lfb_itemDes {
display: none;
}
.expand-icon {
cursor: pointer;
float: right;
}
.lfb_item {
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture">
<p class="lfb_imgTitle">Google Analytics</p>
<p class="lfb_itemDes" style="
">Set up Google analytics on your site and install tracking codes/tags as needed to view visitors/sessions and site engagement.</p>
</div>
<div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture">
<p class="lfb_imgTitle">Something else w/ no description</p>
</div>
<div class="lfb_itemBloc lfb_item lfb_itemContainer_441 lfb_picRow" data-id="441" data-itemtype="picture">
<p class="lfb_imgTitle">Something else w/ description</p>
<p class="lfb_itemDes" style="
">Blah blah blah.</p>
</div>

Tizen wearable web app popup button image not showing

I'm designing a web app with some popup buttons and the functionality is working fine but the buttons are displaying empty.
I've placed 2 x png files in a folder named 'images', ok.png and cancel.png.
The code i'm using from the Tizen tutorial is below;
https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/creating-popup-buttons
<div class="ui-page ui-page-active" id="main">
<div class="ui-content">
<a href="#sideBtnPopup" class="ui-btn" data-rel="popup" id='testPopup'>Test popup</a>
<li><p id="okOutput"></p></li>
<li><p id="cancelOutput"></p></li>
</div>
<style>
.btn-icon-cancel::before {-webkit-mask-image: url(./images/cancel.png)}
.btn-icon-ok::before {-webkit-mask-image: url(./images/ok.png)}
</style>
<div id="sideBtnPopup" class="ui-popup">
<div class="ui-popup-content">
Press as passing boat or pin
</div>
<div class="ui-popup-footer ui-grid-col-2 ui-side-button">
<button class="ui-btn btn-icon-cancel btn-cancel" id="sideBtn-1" onclick="cancelButton()">Cancel</button>
<button class="ui-btn btn-icon-ok" id="sideBtn-2" onclick="okButton()">OK</button>
</div>
</div>
<script>
function okButton() {
document.getElementById("okOutput").innerHTML = "Ok Pressed";
tau.closePopup();
}
function cancelButton() {
document.getElementById("cancelOutput").innerHTML = "Cancel Pressed";
tau.closePopup();
}
</script>
</div>
I've tried moving the css code into the css file. I've also tried a few other things to set the url of the image, I've tried resizing the image down to the size of the button but no luck.
To be clear, the buttons work fine but the images don't display in the buttons, they are simply blue ovals with black background.
Any help would be greatly appreciated.

If You want to use -webkit-mask-image You need to set background-color and -webkit-mask-size as well.
Just update your <style> tag to following:
<style>
.btn-icon-cancel::before {
-webkit-mask-image: url(./images/cancel.png);
-webkit-mask-size: 100%;
background-color: #fff;
}
.btn-icon-ok::before {
-webkit-mask-image: url(./images/ok.png);
-webkit-mask-size: 100%;
background-color: #fff;
}
</style>
replacing #fff with desired icon color.

How to keep changes in the same element even when page is changed using javascript?

In my web application there is a left menu that is of very big size. I have placed a button to make small it. Everything is working when I click on button my menu is being hidden and another small menu is being shown. When I click on any link in small menu, another page is loaded and big menu is shown. If I want to see small menu again I need to click button. I want that if any page is loaded, menu should be shown in last form that was on last page (It can be big also if it was in big form on last page).
My code is here
HTML
<div class="flLeft similarHeight">
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="logo">Brand Name</div>
</li>
</ul>
</div>
<div class="flLeftsmall">
<ul class="nav smallnavigation">
<li class="nav-header">
<div class="logo">Brand</div>
</li>
</ul>
</div>
<div class="pull-left">
<span><i class="glyphicon glyphicon-triangle-left menu-big"></i></span>
</div>
CSS
.flLeft {
background:#1b3b5e;
width: 220px;
height: 200px;
}
.flLeftsmall {
display: none;
background:#1b3b5e;
width: 80px;
height: 200px;
color: #fff;
}
a{color: #fff;}
jQuery
$(document).ready(function () {
$('.menu-big').click(function () {
$(this).toggleClass('glyphicon-triangle-right glyphicon-triangle-left');
$('.flLeft').toggle('slide');
$('.flLeftsmall').toggle('slide');
});
});
I am using bootstrap and jQuery plugins properly.
You can see my jsfiddle here.
Please help me.!

Can be achieved using sessionStorage or LocalStorage. It's not elegant, but it works.
Within your click event for collapsing the menu, add a storage item to save the state of the menu
sessionStorage.setItem('menuSize', 'small'); // Or big etc, will need to break this up into two click events.
Then on the pages subsequent, check this storage item to see whether the user has chosen the small or bigger menu.
if (sessionStorage.getItem('menuSize') == 'small') {
$('.flLeft').css("display", "none");
$('.flLeftsmall').css("display", "block");
}
Updated fiddle: https://jsfiddle.net/5vjf0ffs/2/

Try this
It uses localStorage. To store value and then use it to check if we shall display either the small or big box.
$(document).ready(function() {
if (localStorage.getItem("slide") == "small") {
$('.flLeft').toggle('slide');
$('.flLeftsmall').toggle('slide');
}
$('.menu-big').click(function() {
$(this).toggleClass('glyphicon-triangle-right glyphicon-triangle-left');
if (localStorage.getItem("slide") == null) {
localStorage.setItem("slide", "small");
} else {
localStorage.removeItem("slide");
}
$('.flLeft').toggle('slide');
$('.flLeftsmall').toggle('slide');
});
});

JQuery "show" not displaying the right display style

I have created some kind of gallery with php code. I wanted to animate going to the next set of pictures with JQuery hide() and show(). The problem is that when I show the next set of pictures, the pictures aren't showing next to each other anymore but in a vertical row.
The original display type is "inline-block", but when I put the css function after the animate function, the animation looks weird.
I tried creating a JsFiddle but The Javascript part doesn't seems to be working http://jsfiddle.net/P3gty/
This is my code:
Javascript
function changeGallery(count)
{
currentpage+=count;
for(var i=0;i<numpics;i++)
{
//document.getElementById("galpic"+(i)).style.display = "none";
$("#galpic"+(i)).hide(animationtype,animationspeed);
}
for(var i=0;i<8 && ((currentpage*8))+i<numpics;i++)
{
//document.getElementById("galpic"+(i+(currentpage*8))).style.display = "block";
$("#galpic"+(i+(currentpage*8))).delay(animationspeed).show(animationtype,animationspeed);
}
disableButtons();
}
css
.thumb
{
border:solid black .1em;
display: inline-block;
}
html
<div id="thumbcontainer">
<ul id="pictures">
<!-- Multiple echos of -->
<li id='galpic$imagecount'><a href='img/gallery/".$file."'rel='lightbox[".$lightbox."]'>
<img src="img/thumbs/'.$file.'" alt="Picture" class="thumb" />
</a></li>
</ul>
</div>