Develop Reference

How does the lightbox kit prohibit image switching?

Would like to ask a question about the lightbox lightbox kit ~
sorry for my bad english, but i try to make it clear.
I have an image in the DOM using the lightbox kit to achieve a lightbox effect when clicking on the image.
But today in the project there is a DOM that is rendered as follows, and he will continue to be rendered by PHP with multiple duplicate DOMs!
Because it is explained in the use of lightbox that if data-lightbox="example" is set with the same name, it will be regarded as a group to achieve the effect of rotation. How can I make the data-lightbox with the same name? Wouldn't he be able to switch photos left and right?
img{
width: 300px;
max-height:50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="example" href="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2183&q=80
" data-lightbox="example-1">
<img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2183&q=80" />
</a>
<!-- How to disable image switching left and right when there are duplicate data-lightbox="example" names -->
<a class="example" href="https://images.unsplash.com/photo-1507136566006-cfc505b114fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1021&q=80" data-lightbox="example-1">
<img src="https://images.unsplash.com/photo-1507136566006-cfc505b114fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1021&q=80" />
</a>
</div>
img{
width: 300px;
max-height:50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="example" href="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2183&q=80
" data-lightbox="example-1">
<img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2183&q=80" />
</a>
<!-- How to disable image switching left and right when there are duplicate data-lightbox="example" names -->
<a class="example" href="https://images.unsplash.com/photo-1507136566006-cfc505b114fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1021&q=80" data-lightbox="example-1">
<img src="https://images.unsplash.com/photo-1507136566006-cfc505b114fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1021&q=80" />
</a>
</div>

Open lightgallery.js programmatically

So I'm using https://sachinchoolur.github.io/lightgallery.js/ for my gallery and it's great.
When user clicks and image it opens and all is well.
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
<script type="text/javascript">
lightGallery(document.getElementById('lightgallery'));
</script>
However, I have an edge case where I want the user to be able to press another image on the page to open the gallery.
Let's pretend it's this a tag
<a id="magic_start" href="">
I thought I'd be able to do this:
$("#magic_start").click(function(e) {
e.preventDefault();
$("#lightgallery li:first-child a").trigger();
});
I've also tried, click() and trigger('click') but they don't work.
I think because lightgallery.js is it's own man, so to speak.
But it does nothing. No errors, but does nothing.
Any suggestions?
Edit:
My current workaround is...
window.location.href = window.location.href + "#lg=1&slide=0";
location.reload();
But this takes a way from UX due to having to reload page.

The trigger function needs to be called on the img element, and not the outer a element.
lightGallery(document.getElementById('lightgallery'));
$("#magic_start").on("click", () => {
$("#lightgallery a:first-child > img").trigger("click");
});
<!-- lightgallery and jQuery vendor CSS/JS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<a id="magic_start" href="#">CLICK TO OPEN</a>
<div id="lightgallery">
<a href="https://via.placeholder.com/350">
<img src="https://via.placeholder.com/150" />
</a>
<a href="https://via.placeholder.com/350">
<img src="https://via.placeholder.com/150" />
</a>
</div>

Display image legend on hover (not as tooltip) using innerHTML?

I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.
[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]
Please help? Thanks! (FYI, I'm a novice coder.)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>

It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>

I guess its helpful .
But i use Jquery
just need call this code in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>

I am trying to animate the navigation bar on a website

I have this code which is meant to use jQuery so that when the 'Show navigation' button is clicked, that button will disappear, a 'Hide Navigation' button will appear, as will the Navigation options. The hope would be then that the 'Hide' button would do the opposite. I can get the show hide buttons to disappear and reappear accordingly, but the navigation options just stay in place.
Here is the code:
var nav = function(){
$('.navtoggle').click(function(){
$('#navbar').animate({
top:'10px'
}, 200);
$('.navtoggle').animate({
top:'-40px'
}, 200);
$('.navexit').animate({
top:'0px'
}, 200);
});
$('.navexit').click(function(){
$('#navbar').animate({
top:'-40px'
}, 200);
$('.navtoggle').animate({
top:'0px'
}, 200);
$('.navexit').animate({
top:'-40px'
}, 200);
});
};
$(document).ready(nav);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script src="navanimate.js"></script>
<div id="top_container">
<div id ="navbar">
<a class="navigation" href="index.html"><p>Home</p></a>
<a class="navigation" href="CV.html"><p>CV</p></a>
<a class="navigation" href="Video.html"><p>Video</p></a>
<a class="navigation" href="Hobbies.html"><p>My Hobbies</p></a>
<a class="navigation" href="Coursework.html"><p>Coursework</p></a>
<a class="navigation" href="Animation.html"><p>Animation</p></a>
</div>
<div class ="navtoggle">Show Navigation</div>
<div class ="navexit">Hide Navigation</div>
<h1>Home Page</h1>
</div>
<div id="main_content">
<p id="site_intro">Over the 6 pages of this website, I shall detail and exemplify everything I have learnt in the labs for the Introduction to Multimedia module. Browse and discover the many things I too have learnt over the last semester. <br><br>Throughout this site you will find many things, including my experience in the past, a short video of me, my favourite things to do, my work this term and the animation developed for the site. Enjoy!</p>
<ul><h3>About Me</h3>
<li>Candidate Number: 106244</li>
<li>Course: Games and Multimedia Environments</li>
<li>Year of Study: First year</li>
</ul>
<img src="images/IMG_0334.JPG" width="932" height="1142" alt="Good ol' picture of myself"/>
</div>
<div id="social_links">
<ul>Find Me Here
<li><img src="images/icons/Free-Shaded-Social-Icons/48/facebook-Icon.png" width="30" height="30" alt="My Facebook"/>Facebook</li>
<li><img src="images/icons/Free-Shaded-Social-Icons/48/Tumblr-Icon.png" width="30" height="30" alt="My tumblr Blog"/>Tumblr</li>
<li><img src="images/icons/Free-Shaded-Social-Icons/48/Deviantart-Icon.png" width="30" height="30" alt=""/>DeviantArt</li>
</ul>
</div>
<div id="footer"></div>
</body>
</html>

Change image with href in java script

<a href="#" id=BigSwatch><img src="addtocart.png" onclick="SwapLink('ekhle.html');"
onClick=display('pleasewait.png') /></a>
In this coding, I want change image and change href also.
here when user click on addtocart.png image, I want to change image to pleasewait.png and when user click on pleasewait.png image, I want to change href like "url2.html", but when i apply my coding image changed but url2.html page also redirect directly.

<a href="#" id=BigSwatch><img id="test" src="addtocart.png" onclick="SwapLink('ekhle.html');"
onClick=display('pleasewait.png') /></a>
Script
$('#BigSwatch').on({
'click': function(){
$('#test').attr('src','pleasewait.png');
$('#BigSwatch').attr('href','url2.html');
}
});

HTML
<a href="#" id=BigSwatch><img src="addtocart.png" /></a>
in JS
$("#BigSwatch").on("click","img",function(){
$(this).attr("src","pleasewait.png");// here your image path will set
$(this).closest("#BigSwatch").attr("href","ekhle.html");
});

The better way is you can put an anchor with background image. You can follow the simple process -
Keep an anchor with background image "addToCart.png" and with class "addToCart"
On click change the class to "pleasewait" which will change the background-image to "pleasewait.png"
On Click write a function to check, if it has class "addToCart" then prevent default redirection else go to "url2.html".
HTML:
CSS:
.addToCart {
background-image:url('images/addToCart.png');
display:block;
/* Define width and height */
}
.pleaseWait {
background-image:url('images/pleaseWait.png');
}
Javascript:
$('#BigSwatch').click(function(e){
if($(this).hasClass('addToCart')) {
$(this).removeClass('addToCart').addClass('pleaseWait');
e.preventDefault();
}
});
I Hope this would work fine.

You can do this with your HTML mark up only like this
<a href="#" id=BigSwatch onClick="this.href='ekhle.html'">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png"
onClick="this.src='https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png'; this.parent.href='ekhle.html'" />
</a>
Live Demo
I have used images from google. :)

try this code.
<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
if(info.src.match("pleasewait.png")){
window.location="irl.html";
}
else{
info.src="pleasewait.png";
}
}
</script>
</head>
<body>
<img src="addtocart.png" id="hr" onclick="switchHref()"
width="100" height="100"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
doc=document.getElementById("rad");
if(doc.checked==true){
info.src="pleasewait.png";
}
if(info.src.match("pleasewait.png")){
window.location="url.html";
}
}
</script>
</head>
<body>
<img src="addtocart.png" id="hr" width="100"
height="100"/>
<input type="radio" id="rad"
onChange="switchHref()" />Click
</body>
</html>